Export without transparent background

[alsarraf]

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 ?

 

[Alfred]

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.

[alsarraf]

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 ?

[MEB]

Hi alsarraf,

These options are available from the Area dropdown in the Export dialog.

 

[Mark Smith]

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

[alsarraf]

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.

[MEB]

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.

[MEB]

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.

[alsarraf]

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 ?

[Mark Smith]

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.

[MEB]

@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

[alsarraf]

@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

 

 

Solved.

Thank you so much !

[MEB]

You're welcome :)

[ogardiner]

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]

[MEB]

Hi ogardiner,

Welcome to Affinity Forums :)

Thanks for your feedback. I agree with you, this is not quite right.

I've logged it for review.

[Ben]

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.

[ogardiner]

@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

[Ben]

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.

[ogardiner]

@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