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

UX for physical products — The internet of things.

How to ace your Flipkart Design interview

Sustainable SPORTS planning: how to provide sports amidst urban pressures and growing business…

Reducing the complexity of buying vanity units through visualisation

UX Case Study | Waste 4 Change mobile apps challenge from DTSPRO 2022

Top Makeup Tips for Getting Best Pictures

Insider Tips To Keep Your Carpet Looking Great Between Cleanings — Mentone, CA

Understanding Habits To Build Habit Forming Products

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

Navigation In Adobe illustrator

Make APP UI in Sketch and export various images needed by different OS device and mobile resolution…

Google Forms — How to set up form navigation using Apps Script

All about PUBG: A case study