Iconset export in one file

[gnorf]

Hello,

i want to create an iconset for an aplication.

The applications needs an image in three rows and one column for each icon.

For example the first row shows the icon. The the second Row shows the icon hovered with mouse and the last row shows the icon if it is activated or clicked. The application will crop the used image by line and row and displays ist. (Play-Button is the 8th picture for example.

How to do this?

Is it possible or must i create the 15 icons (40x40px)  in the three states and merge it for each file? So i have to merge 45 files.

I found that it is possible to export several Artboards ind different file formats and resolutions. but i didn't not find any solution for the problem.

 

Something like this, for example:

 

Edited June 27, 2023 by gnorf

[Pšenda]

https://affinityspotlight.com/article/hi-res-iconui-design-can-be-pixel-perfect/

https://affinityspotlight.com/article/designing-a-travel-icon-set-with-isabel-sousa/

https://affinityspotlight.com/article/creating-custom-symbols-in-affinity-designer-for-ui-design/

Edited June 27, 2023 by Pšenda

[GarryP]

Welcome to the forums @gnorf

You can put the artboards together and then use the Export Persona to export them as a group – see screenshot.

[gnorf]

THNX for your help.

That saved my life 😀

good videos for my first experience for generating iconsets.

I searched 2 hours and did not find anything. Some videos with the export via slices. But only every artboard as an single file

Background-Layer was the missing part.

 

Edit:

it does not work.

if i select background it will only export one icon.

How "to put the artboards together"? Maybe i missed the step

 

found the solution:

I must add one artboard with the full size and move all other Artboards in the new artboard. Now i can export the full iconset in one file.

Edited June 27, 2023 by gnorf

[GarryP]

You’re welcome.

You don’t need to put the icon artboards inside another artboard – although that might be useful – you just need to ‘butt’ them up against each other (snapping is useful here).
(The “background” layer is simply the ‘whole document’ taken as one export slice.)