Jump to content
You must now use your email address to sign in [click for more info] ×

Optional Coloured/Transparent PNG backgrounds


Recommended Posts

I've been using AD for about a week now and I must say I love.

I have a couple of tools and personalization options I still miss from Illustrator and I'm hoping to see them in Affinity soon. One of these is the option to choose the background color of a PNG file upon exporting. Setting a background in any color is fast and easy while creating the content, but exporting an image with a transparent background is impossible. Or at least I haven't found the way to do it. 

Link to comment
Share on other sites

  • Staff

Hello VertigoBirdie,

Welcome to Affinity Forums.

To make the background transparent go to File -> Document Setup (or with the Move Tool selected click anywhere outside the document to deselect everything and then click the Document Setup button in the context toolbar) and in the color section check Transparent background checkbox.

Link to comment
Share on other sites

  • Staff

Yes,

 

Also, when you have made the background transparent, if you switch to the Export Persona, you will see that one "slice" has been auto-created - it is a slice which covers the whole document. Select this slice, then at the top, choose "PNG" and choose a "Matte" colour - your file will then export with the colour as the background :)

 

Thanks,

 

AndyS

Link to comment
Share on other sites

  • 2 years later...

Hm from a usability stand point this is not good.

 

I should not have to set the document background to transparent for exporting a transparent PNG slice.

 

The exporter should be able to ignore the background of the artboard intead guys!

Claas Kuhnen

 

 

 

 

Faculty Industrial Design  -  Chair Interior Design - Wayne State University

 

 

Owner studioKuhnen - product:interface:design

 

Link to comment
Share on other sites

  • 1 month later...

I stumbled on the same issue and I must agree with cekuhnen! It's not a huge deal now that I know where it is, but is not very intuitive. Of course the option for a transparent background should remain in the Document Settings. But nonetheless as a user I expect under the PNG export settings (More) the option to enable transparency (if not enabled by default).

For the same reason that when I export an image I have to option to make it paletted or to flatten it. I'm not expected to flatten my composition or turn it to 256 colors in order for the exported image to become like that, the application does it for me but when I get back to the main window, it's neither flatter nor paletted.

Link to comment
Share on other sites

  • 3 months later...

Connected to this, I can't get the 'matte' selection tool to work either. The scenario, a common one, is that I have various objects including cropped bitmaps sitting on a coloured background (shape object). I want the object aliasing to continue to the same background colour as the final export, stripping out the background colour in the export. IE This is a very common requirement. However, I can't get the selected matte colour to render as transparent. It outputs the background colour every time - seemingly ignoring the matte setting.

 

What's the trick I'm missing?

 

Q.

Link to comment
Share on other sites

Thanks @MEB. Current version (1.5.3.69) of AD on Windows 10 Pro/64bit. I'll test AP too.

 

@Geowil, yep, a straight transparent background export works great for PNG 24 and PNG 8 but sometimes you do want/need to matte out a particular colour to properly alias out/blend into any given background colour - being the query.

 

Thanks guys.

 

Q.

Link to comment
Share on other sites

Oops. @MEB. I just realised that feature works differently to expected (and Fireworks where I'm coming from) after I re-read Andy Somerfields' post "Select this slice, then at the top, choose "PNG" and choose a "Matte" colour - your file will then export with the colour as the background"...

 

I was expecting to be able choose the transparency colour (from the colour index) using that tool as I needed to alias out to particular colour. With Fireworks you can select which of your index colours to use for the transparency (which is what I need) and so it seems that might not be possible (after taking another look).

 

Apologies for the confusion - although I still would like to be able select the colour to index out.

 

Q.

Link to comment
Share on other sites

  • 1 month later...

@MEB: There is no "File -> Document Setup" option. Menu items

I can't figure this out either. 

1. Import image with background. 

2. Select, using magic wand tool, all colored space (background is black).

3. Document=>Transparent Background. {Nothing Happens}

4. Export this image with Transparent Background checked. Unmodified image exported. 

5. Open Export Persona.

6. No PNG-24 transparency option. 

7. I give up. 

 

There has to be an easier way to do this. 

Link to comment
Share on other sites

3 hours ago, user099 said:

@MEB: There is no "File -> Document Setup" option. Menu items

I can't figure this out either. 

1. Import image with background. 

2. Select, using magic wand tool, all colored space (background is black).

3. Document=>Transparent Background. {Nothing Happens}

4. Export this image with Transparent Background checked. Unmodified image exported. 

5. Open Export Persona.

6. No PNG-24 transparency option. 

7. I give up. 

 

There has to be an easier way to do this. 

 

The original question refers to AD, or Affinity Designer. Your screenshot (why uploaded to imgur.com, instead of being attached to your message here?) is from Affinity Photo. As you have discovered, you don't need a 'File > Document Setup...' option for this because there is a 'Transparent Background' option on the Document menu. However, that option doesn't change the coloured pixels in the image: it simply allows them to become fully or partially transparent (as in a PNG image) instead of fully opaque (as in a JPEG). After selecting the background, or selecting the coloured space and then inverting the selection, press the Delete key on your keyboard to remove all colour from the selected pixels.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

2 hours ago, user099 said:

I found this thread while searching for an Affinity Photo answer; I don't know why the search engine pulled up Affinity Designer. 

Must be SEO.

Sorry.

 

No need for apologies! The original post and @MEB's reply refer to AD, but later posts mention Affinity Photo, so it isn't greatly surprising that a search engine led you here.

 

I hope you now have the result you wanted.

 

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

3 hours ago, Alfred said:

I hope you now have the result you wanted.

 

7 minutes ago, user099 said:

Unfortunately, not. 

 

I'm sorry to hear that! Please describe your steps in detail, so that someone here can try to identify why things are going wrong for you.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

You have to select Transparent background first and remove background second. If you do it in wrong order you just fill background with color and transparent background has no effect as there is no transparency in document.

I think you think transparency in 1980's terms – that there is some color which is assigned transparency. It does not work that way. You just remove parts of image and those parts become transparent – checkerboard texture indicates transparency.

Link to comment
Share on other sites

I am not sure that this is really an issue, rather than a process suggestion. I totally understand the Fireworks style workflow for slicing for things like logos or graphics that you want to export with an alpha channel for placement over graphics / colours in CSS.

 

In the export Persona, there is a tab next to "Slices" called "layers" - I switch to that, and go through and turn off the layers or even specific graphic items that I want to be visible or not in the export. This works well enough, but...

 

It would certainly be more useful to be able to define what ares of a slice  you want to be the "mask" - i can't really sort out what the point is at all of the current "Matte" colour is used for on the slice Export Options tab - it doesn't really seem to do anything regardless of what I sample there. For example I can have a very simple slice area, white logo, single colour background. I set the Matte value to white... exports the logo just like it was a jpeg... set it to the background value... exact same thing. I don't know what the matte value is supposed to do in the export persona, but it doesn't seem to do anything.

 

However- I think the bigger thing here is more the workflow when choosing what elements of your layout / graphic to include in your slice.

This is not a real "issue" since keeping things organized on layers is good for all kinds of reasons, and turning them off at time of export is not a big deal, and I find the process of switching between the layer tab and the slices tab to be fairly easy, albeit a little tedious.

 

Ideally... in the actual slices detail - I could define right in that slice what layers to include in the export - so each slice area is customizable.

 

I don't think this is really a big deal - I can get the proper transparency with the current build, but it's a little clunky. And I would certainly be open to some explanation as to the intended use / function of the Matte value when setting up a PNG slice.

Link to comment
Share on other sites

  • 8 months later...
  • 1 year later...

I had to search the internet to find out how to export with transparent background as well. That option is really well hidden.

From a usability standpoint, the "default background" in a document has traditionally always been considered "transparent".

The Export Persona is great, but it should really recognize that when you are exporting a file format that can handle transparency, the option should be front and center.

 

EDIT: Also, this thread isn't the only one showing that many users are confused by this... here's just a few more I found...

 

 

 

I just noticed that there's a second way to do it without the persona, but even that one is a bit convoluted:

 

Link to comment
Share on other sites

  • 11 months later...
  • 5 months later...
  • 1 month later...

No way anyone who made Affinity actually uses Affinity.   I still can't figure out how to export a transparent PNG after reading this thread.  I lost the $25/month it would cost to pay for Photoshop in the time I spent researching how to do a single operation and failed. LMAO.

Link to comment
Share on other sites

  • Staff

@thisisjoke

Welcome to the Serf Affinity forums :) 

A transparent PNG happens automatically for a document with a transparent background. Change it in the document menu "Transparent Background" = checked.

Then the information above about exporting should make more sense.

Patrick Connor
Serif Europe Ltd

"There is nothing noble in being superior to your fellow man. True nobility lies in being superior to your previous self."  W. L. Sheldon

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.