Jump to content
VertigoBirdie

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Same here as Quantos.

 

Affinity Photo, Windows, version 1.5.2.69

 

 

--edit---

 

Has anyone tried Document -> Transparent Background as a workaround?  I just noticed this and it seems to work.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

@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. 

Share this post


Link to post
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 online2long.gif
Affinity Designer 1.6.5.123 • Affinity Photo 1.6.5.123 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.6.12.86 • Affinity Designer for iPad 1.6.4.45 • iOS 12.2 (iPad Air 2)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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 online2long.gif
Affinity Designer 1.6.5.123 • Affinity Photo 1.6.5.123 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.6.12.86 • Affinity Designer for iPad 1.6.4.45 • iOS 12.2 (iPad Air 2)

Share this post


Link to post
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 online2long.gif
Affinity Designer 1.6.5.123 • Affinity Photo 1.6.5.123 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.6.12.86 • Affinity Designer for iPad 1.6.4.45 • iOS 12.2 (iPad Air 2)

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×