How to Create an App Icon in Adobe Illustrator

from sketch to app icon
from sketch to app icon

Start sketching

While sketching an idea for an app, you need to have a little concept in your head. Try to analyze this concept to the bare elements so you can start sketching with a minimal set of elements. The fewer elements, the better you can focus on the primary idea. It’s a drawing process I try to focus on.

Collect your sketches and pick one sketch to start from.
Collect your sketches and pick one sketch to start from.

Doing research

Doing research means collecting ideas and documents to start from (with templates, sometimes PS or AI actions can come in handy, read the device guidelines (iOS, Android, Windows, …), define your target devices: this is usually defined in the project briefing, next create a mood-board to collect all the images and references that inspire you, read books and articles about the subject) — I’m creating my moodboards with Ember (desktop + mobile), it’s a great app to collect screenshots in your mood-board.

Creating a mood board for inspiration on color use, line use, shape and illustrative direction.

Starting to vectorize in Illustrator

Step by step instructions on how to vectorize your imported sketch.

Step 1: setting up your workspace

Create your workspace in Adobe Illustrator

Start Illustrator and choose New Document cmd + N. For this tutorial, I’m setting the dimensions to 1024 x 1024 pixels, the highest number for the icon dimensions. For this tutorial, I’m targeting the iOS apps, so I’ll stick to the Apple guidelines for iOS apps.

Create a new document, set the dimensions and colorspace.

Step 2: importing your sketch

Analyze your sketch

Go to File > Place and select your sketch to import it. Choose Embed in the Linked File panel on top to embed the artwork in your Illustrator file. You can eventually reduce the opacity of the layer to 50%. Rename the layer to “sketch” and lock it by clicking the lock icon next to the eye icon. Create a new layer on top of the “sketch” layer that you will use to draw the shapes.

Analyze your sketch for a couple of minutes and split it into geometrical shapes.

Step 3: place each element on its own layer

Organize your file

Once you are ready to start drawing, organize your file and place every element on a separate layer and name each layer to the element. You should have the following layers in stacking order:

  1. The Cap layer
  2. The Hair layer
  3. The Eyes layer
  4. The Beak layer
  5. The Neck layer
  6. The Head layer
  7. The background layer
  8. The Sketch layer
Every element on its layer in stacking order.
Every element on its layer in stacking order.

Step 4: combining shapes

Using the Shape Builder Tool

To combine certain shapes, there’s a handy tool in Illustrator to replace the Pathfinder tool, it’s called the “Shape Builder Tool” Shift + M, it lets you combine, subtract and divide shapes but more intuitive.

Combining shapes with the Shape Builder Tool.
Combining shapes with the Shape Builder Tool.

Step 5: coloring your artwork

Limit the number of colors

Once the basic shapes are ready, choose a color palette to color the figure. I was inspired by the iOS 7 color palette and distilled a few colors from it and combined them with a few other colors I liked. Try to limit your palette as much as possible for clarity.

Inspired by the iOS 7 color palette.
Inspired by the iOS 7 color palette.
Coloring your artwork with the limited color set.

Step 6: Adding details

Giving character to the bird

Take the illustration to the next level by adding more detail to the bird: think of the eyebrows, subtle shadows in the eyes to give some depth, play with different colors to see what gives the best results. Adding detail is always a bit dangerous because you can add so much that you lose track of the “whole picture” and because it takes a lot of time to do (at least for me). In this example, I will limit the amount of detail, I’m going to stick to the more flat style of the icon which I think is perfect for the application style.

Adding details with color tints.
Adding a drop shadow to the figure with effects.

Assembling all elements

Step 7: Open a template or make one

The iOS icon template

I’m using the iOS 7 App Icon Template by Michael Flarup, a great template btw, you can find the link in “References” at the end of this tutorial.

Open the icon iOS template and place your artwork.

Delivering the icon

Step 8: automating the icon generating process

Using the iOS icon template

Use the Photoshop actions coming with the template to generate all the different icon formats. Click the “Export Icons (Squared)”, you’ll see the preview pane and hit “Save”. This will save all the icons in a folder. These are now ready to use.

Use the Photoshop action to generate the icons from the iOS template.
Use the Photoshop action to generate the icons from the iOS template.

References

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bene

Bene

I’m a web- & graphic designer living in Belgium with over ten years of expertise in creating web & print experiences for institutes and companies