Mobile app version of vmapp.org
Login or Join
Frith110

: How to use Sketch iOS app icon template? 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

@Frith110

Posted in: #Icon #Ios #SketchApp

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).

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Frith110

1 Comments

Sorted by latest first Latest Oldest Best

 

@Mendez620

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.


You will need to download and unzip the AEIconizer plugin
After unzipping, double-click the AEIconizer.sketchplugin file to install it into
Sketch
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)
Place your artwork on the Artboard ~ I
opened my graphic and just copied it to the empty artboard
Resize, position, color the artwork
On the Plugin menu select the AEIconizer
Clicking the plugin generates all of the sizes on different art
boards
On the lower right at the bottom of the inspector click to export
the files (it will export all three sizes of png)


Caveats


The 83.5@2x.png 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.
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:


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.
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 |

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme