: Export iOS Icon Sizes in Affinity Designer Although Affinity Designer has the extremely useful @1x, @2x and @3x export, I'm wondering if there's a way to export in the variety of sizes that

@Martha945

Since the requirements change from time to time, it's always a good idea to refer to Apple's guidelines. There's an Affinity Designer template on my website that I've develop that exports the 18 sizes that are currently required for universal applications.

Vote Up Vote Down

@Nimeshi706

You can do it in Affinity Designer, slices can scale their output, using suffixes, here is iOS icons export using the 'w' suffix:

Vote Up Vote Down

@Cugini998

I just found a good way to do this in Affinity Designer. It's not fully automated though. I'll explain how to get the three icon sizes currently needed for iPhone (29pt, 40pt, 60pt), each with 2x and 3x resolution:


Create a new Document, set unit to "Points", page size to 29x29 and check "Create Artboard" in the dialog
Paste and position your artwork in the artboard
Rename artboard to "29pt" in the Layers panel (optional)
Right-click the artboard and select "Duplicate"
Drag the new artboard (so you can see both side by side) and then rename it to "40pt" (again, this step is optional)
Resize the new layer to 40x40pt using the Transform panel - your artwork will be automatically scaled up
Repeat steps 4-6 to create a 60pt artboard as well (plus 76pt and 83.5pt for iPad, if necessary)
Go to the Export Persona, switch to the Slices panel and select the 2x and 3x resolutions (plus 1x for iPad)
Select all artboard-layers in the list ("29pt", "40pt" etc.) and click "Export selected" at the bottom of the panel.


Affinity will create all icon sizes in every selected resolution, so you might get more icons than you actually need. But they are neatly named "29pt@2x.png" etc, so it's really easy to assign them in your Xcode Asset Catalog.

One caveat: When you go to the Export Persona, Affinity automatically creates an export slice for each artboard (that's the blue frame with the size label on it). I found that sometimes the size of these slices is off by a few pixels. Seems like a bug in AD. You can easily fix it by dragging the corners of the slices though.

Vote Up Vote Down

@Turnbaugh909

Marc Edwards had a great answer in terms of what sizes of icons need to be created, the use of slices to do so, and good links to Photoshop resources for doing this. However, I'm still looking for a solution for how to export at multiple sizes in Affinity Designer specifically.

I realized, eventually, that this would be possible using the Place Image tool. Make your icon in one file, and then in another "template" file, you can use the Place Image tool to create multiple layers that pull in your icon file. Each of those layers can be turned into a named slice.

The disadvantage here is that each layer needs to be created and pointed at your icon file, so that seems like it would be tedious. Once it was in place, though, after any edits to your base file you could easily re-export everything.

Vote Up Vote Down

@Carla748

It looks like a huge, complex list, but there’s really only 5 sizes you need to build:


29pt
49pt
60pt
76pt
1024px


The first four sizes (listed in points) need 1×, 2× and 3× versions (if you’re being future proof, as well as covering the iPhone 6 Plus).

Some of the sizes you’ll see listed on the net and on Apple’s site are for iOS 6 and below (57×57 etc). They’re not needed if you’re targeting iOS 7 and above.

Here’s the Photoshop template I created:



I have slices set up to export each icon and an action to resize and reexport, so I end up with:


icon-29.png
icon-29@2x.png
icon-29@3x.png
icon-40.png
icon-40@2x.png
icon-40@3x.png
icon-60.png
icon-60@2x.png
icon-60@3x.png
icon-76.png
icon-76@2x.png
icon-76@3x.png


Not all those sizes are needed yet, but likely will be in the future. Starting with 4 base sizes makes building the icons far easier.

I’m using Slices in Photoshop to export the different regions needed for each icon. Please note that the icons you provide should not have any transparent areas — color should extend all the way into the corners. iOS will mask the icon, so you don’t have to worry about it.

You could do the same, using Affinity’s slice feature?



Update: I created some open source app icon templates for Affinity Designer, Sketch, Photoshop and Illustrator. They might be worth considering.

Vote Up Vote Down