Jump to content
alsarraf

Export without transparent background

Recommended Posts

Sometimes I need to design white icons with transparent background, but removing the background color from the artboard makes its background white.

 

Is it possible to remove the background color from the artboard while exporting the icon ?

 

Share this post


Link to post
Share on other sites

In the Export Settings dialog, look for a dropdown list with three options: 'Whole document', 'Selection with background' and 'Selection without background'. Choose the last of those options.


Alfred online2long.gif
Affinity Designer/Photo/Publisher for Windows 1.9.0 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.9.0 • Designer for iPad 1.9.0 • iPadOS 14.4 (iPad Air 2)

Share this post


Link to post
Share on other sites

In the Export Settings dialog, look for a dropdown list with three options: 'Whole document', 'Selection with background' and 'Selection without background'. Choose the last of those options.

 

I couldn't find the options, sorry.

Can you send a screenshot ?

Share this post


Link to post
Share on other sites

I have a quick question about this too:

 

In v1.4.3 when exporting to PNG, if I exported the whole document (I do this when I need 'padding' around the artwork but setting the document size to reflect this), the resulting PNG always had a transparent background which is how I wanted it, but now it is the opposite; there is by default a white background.

 

Has the procedure changed in version 1.5?

 

I know about the 'selection without background' option but is there a way to select with a padding so the artwork does not go right to the edges?

 

Thanks

Share this post


Link to post
Share on other sites

I found it.

 

Usually I export multiple icons at the same time, and this option is only for one icon at a time.

 

So, is it possible to do it for multiple icons/artboards ?

 

Thanks.

Share this post


Link to post
Share on other sites

I have a quick question about this too:

 

In v1.4.3 when exporting to PNG, if I exported the whole document (I do this when I need 'padding' around the artwork but setting the document size to reflect this), the resulting PNG always had a transparent background which is how I wanted it, but now it is the opposite; there is by default a white background.

 

Has the procedure changed in version 1.5?

 

I know about the 'selection without background' option but is there a way to select with a padding so the artwork does not go right to the edges?

 

Thanks

 

Hi Mark Smith,

Welcome to Affinity Forums  :)

Yes, we tweaked this. If you need a transparent background go to menu File ▸ Document Setup...Colour section and check Transparent background. This checkbox is also available when you create a new document. When you export a PNG with transparency it will honour this setting.

Share this post


Link to post
Share on other sites

I found it.

 

Usually I export multiple icons at the same time, and this option is only for one icon at a time.

 

So, is it possible to do it for multiple icons/artboards ?

 

Thanks.

 

Hi alsarraf,

To export multiple icons simultaneously (with different sizes and formats too if needed) you must use the Export Persona.

 

Here's some video tutorials that explain how to take advantage of it to speed up export workflows:

Exporting: Layers

Exporting: Slices

Exporting: Continuous

Exporting: Automatic Directory/Folder Creation

Exporting: Multiple Outputs from a Single Slice

 

The first two should answer your questions (although I advise you to take a look at the others too). Let me know if you still have trouble.

Share this post


Link to post
Share on other sites

Hi alsarraf,

To export multiple icons simultaneously (with different sizes and formats too if needed) you must use the Export Persona.

 

Here's some video tutorials that explain how to take advantage of it to speed up export workflows:

Exporting: Layers

Exporting: Slices

Exporting: Continuous

Exporting: Automatic Directory/Folder Creation

Exporting: Multiple Outputs from a Single Slice

 

The first two should answer your questions (although I advise you to take a look at the others too). Let me know if you still have trouble.

 

Maybe there is a misunderstanding.

 

Say I have 10 artboards and each artboard has a gray background and contains a white icon.

 

Is it possible to export 5 artboards (to png) at the same time and remove their background color ?

Share this post


Link to post
Share on other sites

Brilliant - thank you! :)

 

Mark

 

Hi Mark Smith,

Welcome to Affinity Forums  :)

Yes, we tweaked this. If you need a transparent background go to menu File ▸ Document Setup...Colour section and check Transparent background. This checkbox is also available when you create a new document. When you export a PNG with transparency it will honour this setting.

Share this post


Link to post
Share on other sites

@alsarraf,

Yes, you can but you have to use the Export Persona / slices to do it. That's why I pointed out the videos.

By default Affinity creates a slice automatically for each artboard you have. If you set the background of the document to transparent it will affect all artboards, then in the Layers panel in Export Persona you can disable specific objects (in your case the background of you icons) so it doesn't get exported with the icon.

 

Take a look at the sample file below. Instead of icons I placed a white letter on each artboard with a grey rectangle below, set the document background to transparent (affects all artboards) and disabled/hide the grey rectangle in the Layers panel in Export Persona so it doesn't get exported with the letters. Now if you go to the Slices panel in the Export Persona and click Export Slices, all slices (one from each artboard) will be exported simulatenously without the grey background rectangle.

 

export_persona_sample.afdesign

Share this post


Link to post
Share on other sites

@alsarraf,

Yes, you can but you have to use the Export Persona / slices to do it. That's why I pointed out the videos.

By default Affinity creates a slice automatically for each artboard you have. If you set the background of the document to transparent it will affect all artboards, then in the Layers panel in Export Persona you can disable specific objects (in your case the background of you icons) so it doesn't get exported with the icon.

 

Take a look at the sample file below. Instead of icons I placed a white letter on each artboard with a grey rectangle below, set the document background to transparent (affects all artboards) and disabled/hide the grey rectangle in the Layers panel in Export Persona so it doesn't get exported with the letters. Now if you go to the Slices panel in the Export Persona and click Export Slices, all slices (one from each artboard) will be exported simulatenously without the grey background rectangle.

 

attachicon.gifexport_persona_sample.afdesign

 

 

Solved.

Thank you so much !

Share this post


Link to post
Share on other sites

Just as a feedback for the dev team: I understand that you adjusted the behavior and now exported png files get a white background except when the document has the "transparent background" option checked. In previous versions the transparent background option only influenced the transparency grid on the document and not the background of exported files. Honestly, the new behavior might seem more consistent, but it is really uncomfortable.

 

I create lots of ui assets (buttons, badges etc.) which need to have a transparent background. But I don't use the transparency grid because it does not provide a realisitic preview of how the ui asset looks on a typical user interface. Until now I could switch the document to use the white background and still export the png with a transparent background. If I needed the occasional opaque png, I could use the background option of the respective slice.

 

Since 1.5 I have a much more complicated workflow: Now I have to check the "transparent background" option for my document, then create a white backdrop to preview my assets without the transparency grid, and then disable the backdrop in the export persona to still export assets with a transparent background. So much hassle... And the background option of each slice is more or less useless, because "transparent" does not mean transparent any more.

 

I know I am but a single user, but maybe you can consider improving this behavior :)

 

Thanks and keep up the great work,

Ole Trenner

 

[Edited: fixed typos]

Share this post


Link to post
Share on other sites

I've had mixed feelings on this, but I think the new behaviour is actually correct.

 

Two reasons for this:

 

1)
We offer two ways of generating a slice - linked and unlinked.  An unlinked slice should draw everything inside its rectangle. That should include the background.  A linked slice is attached to a given layer in your document, and only draws that layer and its children.  It does not draw anything behind it (including the document background matte). So - you can create a linked slice if you want transparency.

 

2)

You can already exclude layers from export, so it is possible to create a transparent document, then add a general preview white rectangle layer to your document that you can lock and mark as "not visible in export" (see the Layers panel in Export Persona).  This gives you the same visual effect of previewing against a white background, but also works with the transparent document to provide PNG export with no background (since the preview white box does not get rendered when exporting, and your document does not provide a general matte colour).

I do this to create icon box grids with a colour for previewing on UI - I mark this whole group as excluded from export, and I get nice transparent PNGs while still previewing over a UI mockup.

 

This is already available in 1.5.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

@MEB Thanks, it's much appreciated :)

 

@Ben Thanks for your insights. I agree that (maybe) the new approach might be more consistent, and I am aware of the possible workarounds. Still, the new behavior requires a more complicated workflow than the old behavior. And I know that you guys value usability and ux more than anybody else ;)

 

There are probably ways to keep the new consistency while improving the ux:

 

- Configuration options for the transparency grid colors would allow me to switch to completely white (or at least less obtrusive) grid

- Slices could have a checkbox "include document background"

- The "new document" modal could offer an option to automatically create the not-to-be-exported backdrop

 

I'm sure you have even better ideas :) I just wanted to describe my use case and workflow.

 

Anyway, keep up the great work, best,

Ole Trenner

Share this post


Link to post
Share on other sites

These ideas are all good, some trivial, others more involved. It's also always risky adding very specifically tailored options in general dialogs - if everyone got their special options those dialogs would get very busy.

 

But - is it a killer to create a single white rectangle and mark it as non-exportable?  Seriously, it'd take someone I think seconds, and it's a one-time task per document, so not sure you could call it "complicated workflow"?  As I said - I preview over other colours for app UI, so this workflow just makes sense to me.


SerifLabs team - Affinity Developer
  • Software engineer  -  Photographer  -  Guitarist  -  Philosopher
  • iMac 27" Retina 5K (Late 2015), 4.0GHz i7, AMD Radeon R9 M395
  • MacBook (Early 2015), 1.3GHz Core M, Intel HD 5300
  • iPad Pro 10.5", 256GB

Share this post


Link to post
Share on other sites

@Ben You are right of course - it is only a few seconds and only once for each document. It won't stop me from using AD and loving it ;)

It is just that these seconds weren't necessary in earlier versions. They are only now, and what for? Is the program better now that I have to use a workaround to do this simple task? To quote the Zen of Python:

 

Special cases aren't special enough to break the rules.

Although practicality beats purity.

 

 

Just a last thought: In the end it is really not that important if a task takes a few seconds longer. But these seconds might push someone to chose another program altogether...

 

Anyway, thanks again for taking the time to elaborate on this point :)

 

Wishing you guys a nice weekend,

Ole Trenner

Share this post


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

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | 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.