VertigoBirdie Posted October 21, 2014 Share Posted October 21, 2014 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. Jeffreytem 1 Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted October 21, 2014 Staff Share Posted October 21, 2014 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. fgarcia72, khs_, Mike1979 and 7 others 8 1 1 Quote A Guide to Learning Affinity Software | Affinity Quick Reference Link to comment Share on other sites More sharing options...
Staff Andy Somerfield Posted October 22, 2014 Staff Share Posted October 22, 2014 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 Jens Krebs and khs_ 2 Quote Link to comment Share on other sites More sharing options...
VertigoBirdie Posted October 22, 2014 Author Share Posted October 22, 2014 Thanks for the replies, guys, I guess I just overlooked these options. :) Quote Link to comment Share on other sites More sharing options...
cekuhnen Posted January 15, 2017 Share Posted January 15, 2017 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! cloudbusting, gaegury, Ron99 and 3 others 6 Quote Claas Kuhnen Faculty Industrial Design - Chair Interior Design - Wayne State University Owner studioKuhnen - product:interface:design Link to comment Share on other sites More sharing options...
F_Kal Posted February 18, 2017 Share Posted February 18, 2017 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. Quote Link to comment Share on other sites More sharing options...
quantos Posted June 16, 2017 Share Posted June 16, 2017 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. Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted June 16, 2017 Staff Share Posted June 16, 2017 Hi quantos, Which OS and Affinity app are you using? Quote A Guide to Learning Affinity Software | Affinity Quick Reference Link to comment Share on other sites More sharing options...
Geowil Posted June 17, 2017 Share Posted June 17, 2017 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. Quote Link to comment Share on other sites More sharing options...
quantos Posted June 17, 2017 Share Posted June 17, 2017 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. Quote Link to comment Share on other sites More sharing options...
quantos Posted June 17, 2017 Share Posted June 17, 2017 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. Quote Link to comment Share on other sites More sharing options...
user099 Posted August 10, 2017 Share Posted August 10, 2017 @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. 2989 1 Quote Link to comment Share on other sites More sharing options...
Alfred Posted August 10, 2017 Share Posted August 10, 2017 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. Quote Alfred 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 More sharing options...
user099 Posted August 10, 2017 Share Posted August 10, 2017 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. Quote Link to comment Share on other sites More sharing options...
Alfred Posted August 10, 2017 Share Posted August 10, 2017 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. Quote Alfred 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 More sharing options...
user099 Posted August 10, 2017 Share Posted August 10, 2017 Unfortunately, not. Quote Link to comment Share on other sites More sharing options...
Alfred Posted August 10, 2017 Share Posted August 10, 2017 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. Quote Alfred 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 More sharing options...
Fixx Posted August 11, 2017 Share Posted August 11, 2017 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. Quote Link to comment Share on other sites More sharing options...
Saibot99 Posted August 11, 2017 Share Posted August 11, 2017 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. Quote Link to comment Share on other sites More sharing options...
ConnectCreative Posted April 20, 2018 Share Posted April 20, 2018 + 1 for having 'transparent background' an option in export settings for PNGs. Coming from Illustrator and new to Designer, it took me a while to fine this solution. Quote Link to comment Share on other sites More sharing options...
eobet Posted July 13, 2019 Share Posted July 13, 2019 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: antong 1 Quote Link to comment Share on other sites More sharing options...
antong Posted July 6, 2020 Share Posted July 6, 2020 Heh. I also made it some time ago, but forgot. Now I'm googling again Quote Link to comment Share on other sites More sharing options...
Jeremy Bohn Posted January 6, 2021 Share Posted January 6, 2021 Just adding my 2 cents. I also had to Google how to do this. For a very basic feature, this is not good. Quote Link to comment Share on other sites More sharing options...
thisisjoke Posted February 13, 2021 Share Posted February 13, 2021 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. Quote Link to comment Share on other sites More sharing options...
Staff Patrick Connor Posted February 13, 2021 Staff Share Posted February 13, 2021 @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. Alfred 1 Quote Patrick Connor Serif Europe Ltd Latest V2 releases on each platform Help make our apps better by joining our beta program! "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 More sharing options...
Recommended Posts
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.