How to use Sketch iOS app icon template?

Question

I'd like to integrate some external artwork into a Sketch iOS app icon template that comes built-in with Sketch 42 (36781). I can't seem to find information on the proper way to use the template. I've checked the videos, docs, youtube, et al. Thanks in advance for a pointer or tips on how I might quickly get started. I even bought the design+code e-book (smh).

Answer 1

Version Updates

Depending on the version of Sketch you use; you will want to take a look at different versions of the plugin. Here is that list (https://github.com/tadija/AEIconizer/releases). To update from an older version you need to move the old plugin file from its default location, download the desired version from the list above and double-click the .plugin file to restore functionality.

Alternate Solution

I did find a solution that was simpler for me to use than the default iOS App template offered in Sketch 42.

1. You will need to download and unzip the AEIconizer plugin
2. After unzipping, double-click the AEIconizer.sketchplugin file to install it into Sketch
3. Type the letter 'A' to insert a square-sized Artboard (I chose one from the Mac template 1024x1024) ~ You can also use the insert menu (choose Artboard)
4. Place your artwork on the Artboard ~ I opened my graphic and just copied it to the empty artboard
5. Resize, position, color the artwork
6. On the Plugin menu select the AEIconizer
7. Clicking the plugin generates all of the sizes on different art boards
8. On the lower right at the bottom of the inspector click to export the files (it will export all three sizes of png)

Caveats

1. The [email protected] icon is 168x168 instead of 167x167 using the current plugin (I fixed mine by resizing the canvas in Fireworks) ~ Unsure how to fix in Sketch as it only shows up after being exported.

2. Be sure to select your Artboard before you run the plugin and give the background a color or it will be exported as transparent. The option is found in the inspector after you select the squared-size artbord:

   

3. If you missed the step above just save your work, delete the duplicate Artboards (not the original) and fix the background ~ otherwise the icon background will be black when imported to Xcode.

4. Create a folder to hold the files, open Xcode and drag onto the AppIcon assets according to the file name sizes.

| (Reference, designmodo.com article) |

Making use of the Aeiconizer Plugin

Now that the only artboard in our canvas contains our finished app icon design, we can replicate that artboard in a variety of iOS-compatible sizes.

Fact: the original artboard is the correct size for the Apple touch icon.

Select the artboard from the layers sidebar and navigate to Plugins → Aeiconizer. In an instant you will notice that our icon has in fact been duplicated multiple times — this workflow is much more efficient because:

We didn’t need to setup any symbols We worked with a singular artboard We can change our original design and run Aeiconizer again

| AEIconizer (github) | For more plugins checkout the website |