How to Create an App Icon in Adobe Illustrator

from sketch to app icon
from sketch to app icon

Start sketching

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

Doing research

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

Starting to vectorize in Illustrator

Step 1: setting up your workspace

Create your workspace in Adobe Illustrator

Create a new document, set the dimensions and colorspace.

Step 2: importing your sketch

Analyze your sketch

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

  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

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

Step 5: coloring your artwork

Limit the number of colors

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

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

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 action to generate the icons from the iOS template.
Use the Photoshop action to generate the icons from the iOS template.

References

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Tutorial: Pixelate a Logo in Sketch

Design resources you must use to save your time and effort...

Friday Five with Brooks T. Atwood

Recreational Trim Trail Markings in Hemblington #Playground #Trim #Trail #Designs #Hemblington…

7 Principles to Design Happy Cities

Branding and Logo Design Examples for Inspiration — #141

3d icons update

The Myth of the Quick Copy Ask

The Story Behind Our New Look

The Mediacurrent wordmark with the badge icon used in superscript to appear as a trademark or copyright symbol.

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

More from Medium

Getting Started with a 3D Printer at Home — It’s Easier Than You Think!

Beta Opportunity: Abandoned Cart Emails API Transactional Email Templates

RiteKit Company Logo API as alternative to Brandfetch

What’s the Difference Between Dedicated Server and Cloud Servers?