10

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 are required for an iOS icon?

I found a concise grid of needed sizes here, which i'll reproduce in list format:

  • 1024x1024
  • 180x180
  • 152x152
  • 120x120
  • 87x87
  • 80x80
  • 76x76
  • 58x58
  • 57x57
  • 40x40
  • 29x29

That's 11 different icon sizes!

I did find the whole Export Persona with slice configuration concept to be excellent, especially since you can apply slices to individual layers (say, for the normal and pressed versions of a button). Is there some way to use this same tool, perhaps, to do specific sizes of exports?

7

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.

iOS App Icon Template preview

4

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:

iOS icon template

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.

  • Wow, great information, thanks! Although I'm not sure how I would go about doing that in Affinity. Do you know how to make a template like that in Affinity? – Matt Mc Jan 27 '15 at 19:31
  • I’m using slices in Photoshop to cut and export the needed regions. I believe Affinity has a similar feature of the same name. (I’ve edited my answer to provide some more info.) – Marc Edwards Jan 28 '15 at 11:03
  • Hm, yes, it does have the slice feature, which is great. Is there something in your photoshop template that copies and resizes the image automatically? As in, you build the 76pt image and the rest are automatically created? Or you have to make each version, and then use slices to export? – Matt Mc Jan 28 '15 at 12:38
  • Yep, I use some actions and scripts for resizing. My full workflow is documented here: bjango.com/articles/appdesignworkflow The template I've posted a screenshot of is available here: bjango.com/articles/actions – Marc Edwards Jan 28 '15 at 23:49
3

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

enter image description here

2

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:

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

1

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.

  • 1
    I haven’t done any testing, but be careful this method doesn’t end up with bitmap scaled assets from the larger size. If it does, they will be worse quality than scaling as vectors/layer effects. You can’t just use slices in Affinity Designer? If I get time, I’ll set it up to test. – Marc Edwards Feb 21 '15 at 3:39
  • 1
    @MarcEdwards It's true, I haven't inspected to see if the results are scaled as vector or bitmap. Slices in Affinity Designer define a certain area for export; they cannot scale their output from what I can tell. I did make a test of the Place Image method, if you want to inspect: pixelapse.com/s/RGCQYVQR7DHTYC6KC – Matt Mc Feb 21 '15 at 5:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.