How to Create a Pack of Android Launcher Icons in Adobe Illustrator | How To

In today’s tutorial we’re going to make some little changes to our regular program, and tackle a subject that I’ve wanted to do for a long time. If you haven’t figured it out from the title, well, we’re going to create five simple icons that you could turn into Android launcher icons for any future apps that you might create or be involved in creating.

As for the
process, we’ll be using your basic selection of geometric shapes combined with
the Align panel and some other tools that you probably already work with every
day.

That being said, grab a fresh batch of coffee and let’s get started.

Oh, and don’t forget you can always expand the
project by heading over to GraphicRiver, where you’ll find tons of awesome
Android designed icon packs, just waiting to be clicked on.

Would you prefer to learn via video format? Check out the video tutorial over on the Envato Tuts+ YouTube channel:

1. How to Set Up a New Document

Since I’m guessing that you already have
Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N)
using the following settings:

• Number
  of Artboards: 1
• Width:
  800
  px
• Height:
  600
  px
• Units:
  Pixels

And from the Advanced tab:

• Color
  Mode: RGB
• Raster
  Effects: Screen (72ppi)
• Preview Mode: Default

Quick tip: some of you might
have noticed that the Align New Objects
to Pixel Grid option is missing, which is because I’m running the new CC
2017 version of the software, where great changes have been made to the way Illustrator handles the way shapes snap
to the underlying Pixel Grid.

2. How to Set Up a Custom Grid

Since we’re going to be creating the icons
using a pixel-perfect workflow, we’ll want to set up a nice little Grid so that we can have full control
over our shapes—that is if we’re running the older version of the software.

Step 1

Go to the submenu, and adjust
the following settings:

• Gridline
  every: 1 px
• Subdivisions: 1

Quick tip: you can learn more
about grids by reading this in-depth piece on how Illustrator’s Grid System
works.

Step 2

Once we’ve set up our custom grid, all we
need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode.

Now, if you’re new to
the whole “pixel-perfect workflow”, I strongly recommend you go through my how
to create pixel-perfect artwork tutorial, which will help you widen your
technical skills in no time.

3. How to Set Up the Layers

With the New Document created, it would be
a good idea to structure our project using a couple of layers, since this way
we can maintain a steady workflow by focusing on one icon at a time.

That being said, bring up the Layers panel, and create a total of six
layers, which we will rename as follows:

• layer 1: reference grids
• layer 2: battery
• layer 3: settings
• layer 4: messaging
• layer 5: alarm
• layer 6: photos

4. How to Create the Reference Grids

The
Reference Grids (or Base Grids)
are a set of precisely delimited reference surfaces, which allow us to build
our icons by focusing on size and consistency.

Usually, the size of the grids determines
the size of the actual icons, and they should always be the first decision you
make on you start a new project, since you’ll always want to start from the
smallest possible size and build on that.

Now, since we’re going to be creating the
icons with the intent of having them used within the actual Android OS, we’ll
have to follow their recommended Size and Format guideline, and set up a
custom grid of 96 x 96 px with an
all-around 4 px padding.

Step 1

Start by locking all
but the reference grid layer, and then grab the Rectangle Tool (M) and create a 96 x 96 px orange (#F15A24) square, which will help define the
overall size of our icons.

Step 2

Add another smaller 88 x 88 px one (#FFFFFF) which will act
as our active drawing area, thus giving us that all-around 4 px padding.

Step 3

Group the two squares composing the
reference grid using the Control-G keyboard
shortcut, and then create three copies at a distance of 24 px from one another, making sure to align them to the center of
the Artboard.

Once you’re done,
lock the current layer and move on to the next one where we’ll start working on
our first icon.

5. How to Create
the Battery Icon

We’re going to
kick off the project by creating the battery icon, which could be used for a
power saving app, or even a status indicator one since it’s pretty basic.

That being said,
make sure you’re on the right layer (that would be the second one) and then
zoom in on the first reference grid so that we can get started.

Step 1

Start by creating the icon’s background using an 88 x 88 px circle, which we will color using #00C853, center
aligning it to the underlying active drawing area afterwards.

Quick tip: since Google was nice enough to put out a
Material Design guideline for colors, I’ve ended up mixing and matching a
couple of the values, which I’ve used for the backgrounds.

Step 2

Create the battery’s main body using a 24 x 40 px rectangle, which we will color using white (#FFFFFF) and
then center align to the larger circle, at a distance of 20 px from its bottom edge.

Step 3

Turn the shape that we’ve just created into an outline, by flipping its Fill with its Stroke (Shift-X), and
then setting its Weight to 4 px and its Corner to Round Join,
all from within the Stroke panel.

Step 4

Create the first state indicator bar, using either a 12 x 4 px rectangle (#FFFFFF) or a 12 px wide stroke (#FFFFFF) with a 4 px Weight, which we will center align
to the battery’s body, leaving a 4 px gap
around it.

Step 5

Add two more indicator bars, which we will vertically stack at a
distance of 4 px from one another,
grouping them together (Control-G)
afterwards.

Step 6

Finish off the
icon by adding the top cap, which we will create using a smaller 8 x 4 px rectangle (#FFFFFF) that we
will center align to the battery’s body, at a distance of 6 px (4 px for the
padding + 2 px for the top half of
the stroke).

Once you’re done, don’t forget to select and group (Control-G) all the battery’s composing shapes, doing the same thing
for all of the icon’s composing sections as well.

6. How to Create
the Settings Icon

Assuming you’ve
managed to finish the first icon, lock its layer and then move on up to the
next one (that would be the third one) and let’s start working on the settings
one.

Step 1

As we did with the previous icon, start by creating its background using
an 88 x 88 px circle, which we will
color using #2196F3, center aligning it to the underlying active drawing area
afterwards.

Step 2

Start working on the center slider by creating a 4 x 32 px rectangle or a 32
px tall stroke with a 4 px thick
Weight, which we will color using
white (#FFFFFF) and then center align to the larger circle, at a distance of 18 px from its top edge.

Step 3

Create the slider’s state indicator using a 12 x 4 px rectangle (#FFFFFF) which we will center align to the
previously created shape, at a distance of 4
px from its bottom edge.

Step 4

Add the lower section of the slider using 4 x 12 px rectangle (#FFFFFF) which we will position just under the
state indicator bar, selecting and grouping (Control-G) all three shapes together afterwards.

Step 5

Create the top section for the left slider using a smaller 4 x 12 px rectangle (#FFFFFF), which we
will align to the top edge of the center slider, positioning it at a distance
of 12 px from it.

Step 6

Add the slider’s state indicator by creating a 12 x 4 px rectangle (#FFFFFF) which we will vertically stack to the
previously created shape, at a distance of 4
px from its bottom edge.

Step 7

Finish off the
left slider by adding the bottom section which we will create using a 4 x 32 px rectangle (#FFFFFF) that we
will position underneath the indicator.

Once you’re done, select all three shapes and group them together (Control-G) as we did with the center
slider.

Step 8

Finish off the
icon by creating a copy (Control-C >
Control-F) of its left slider, which we will position onto the right side
of the circle, at a distance of 4 px from
the center slider.

Once you’re done, don’t forget to select and group (Control-G) all its composing sections so that they won’t get
separated by accident.

7. How to Create
the Messaging Icon

Assuming you’ve
already moved on up to the next layer (that would be the fourth one), zoom in
on the third reference grid and let’s get started.

Step 1

Create the icon’s background using an 88 x 88 px circle, which we will color using #7C4DFF and then
center align to the underlying active drawing area.

Step 2

Create the main shape for the left messaging box using a 32 x 24 px rectangle, which we will
color using white (#FFFFFF) and then position at a distance of 20 px from the active drawing area’s
both left and top edge.

Step 3

Start adjusting
the shape that we’ve just created, by first turning on the Pixel Preview mode (Alt-Control-Y)
and then adding a new anchor point to
its bottom edge, at a distance of 10 px from
its left one by left clicking with the help of the Add Anchor Point Tool.

Once you’re done, don’t forget to exit Pixel Preview mode by using the Alt-Control-Y keyboard shortcut.

Step 4

Continue adjusting the rectangle by selecting its bottom-left anchor point with the Direct Selection Tool (A), and then
pushing it to the bottom by 8 px with
the help of the Move tool (right
click > Transform > Move > Vertical > 8 px).

Step 5

Turn the resulting shape into an outline, by flipping its Fill with its Stroke (Shift-X) and
then setting its Weight to 4 px and its Corner to Round Join.

Step 6

Add the smaller text line by creating a 10 x 4 px rectangle, which we will color using white (#FFFFFF) and
then position inside of the little message box, aligning it towards its
top-left corner, making sure to leave a 4
px gap around it.

Step 7

Add the wider text line using a 20 x
4 px rectangle (#FFFFFF) which we will left-align to the previously created
one, at a distance of 4 px from its
bottom edge.

Once you’re done, don’t forget to select and
group all of the text box’s shapes together using the Control-G keyboard shortcut.

Step 8

Create a copy (Control-C >
Control-F) of the little text box’s outline, and then reflect (right click > Transform > Reflect
> Vertical) and position it onto the right side of the circle, at a
distance of 18 px from the active
drawing area’s both right and bottom edge.

Step 9

Finish off the
icon, by removing the text box’s overlapping section (highlighted with red) so
that you end up having a 4 px gap
between it and the left one’s outline. To do this, simply add a new anchor point to its top and left edge,
and then remove all the other ones.

Once you’re done, select all of the icon’s composing sections and group
them together using the Control-G keyboard
shortcut.

8. How to Create
the Alarm Icon

Since by now you
probably already know the drill, lock the layer and move on up the next layer
(that would be the fifth one) and let’s start working on our alarm icon.

Step 1

Create an 88 x 88 px circle,
which we will then color using #FFC107, center aligning it to the underlying
active drawing area.

Step 2

Create the alarm clock’s main body using a 40 x 40 px circle, which we will color using white (#FFFFFF) and
then center align to the active drawing area, at a distance of 20 px from its bottom edge.

Step 3

Turn the shape that we’ve just created into an outline, by flipping its Fill with its Stroke, and then setting its Weight
to 4 px from within the Stroke panel.

Step 4

Select the Pen Tool (P) and
draw in the clock’s hands using a 4 px thick
Stroke with the color set to white
(#FFFFFF) and the Corner to Round Join, making sure to leave a 4 px gap between the ending anchor points and the larger circle.

Step 5

Move a few pixels towards the top, and create an 8 x 6 px rectangle (#FFFFFF) which we will center align to the
upper section of the larger circle, positioning it so that it ends up
overlapping the Stroke‘s top half.

Step 6

Add a 16 x 4 px rectangle
(#FFFFFF) on top of the one that we’ve just created, selecting and grouping (Control-G) them together afterwards.

Step 7

Finish off the icon by drawing in the two little diagonal line segments
using a 4 px Stroke with the color
set to white (#FFFFFF). Once you’re done select and group (Control-G) all of the alarm clock’s composing shapes together,
doing the same for the entire icon afterwards.

9. How to Create
the Photos Icon

Make your way to
the sixth and last layer, and let’s finish the project by creating the photos
icon.

Step 1

Using an 88 x 88 px circle (#FF6F00)
create the icon’s background which we will center align to the underlying
active drawing area.

Step 2

Create the photo’s main body using a 36 x 36 px rectangle, which we will color using white (#FFFFFF) and
then center align to the underlying active drawing area, at a distance of 20 px from its top edge.

Step 3

Turn the shape that we’ve just created into an outline, by flipping its Fill with its Stroke (Shift-X), and
then setting its Weight to 4 px and its Corner to Round Join from
within the Stroke panel.

Step 4

Using the Pen Tool (P) draw
in the horizontal divider line using a 4
px thick Stroke (#FFFFFF) which
we will position inside of the previously created shape, at a distance of 4 px from its bottom edge.

Step 5

Using the same 4 px thick Stroke (#FFFFFF) with a Round Join, start drawing the first mountain by positioning your first anchor point onto the left edge of the
photo, at a distance of 10 px from
the horizontal divider line that we’ve just created.

Add the second anchor at a distance of 10 px both horizontal and vertical from
the first one. Finish off the mountain by adding the third and last anchor onto the horizontal divider line,
while holding down the Shift key to
draw in a perfect diagonal line.

Step 6

Draw in the second smaller mountain, using the
same 4 px thick Stroke (#FFFFFF), and then once you’re done, select and
group all of the photo’s composing shapes together using the Control-G keyboard shortcut.

Step 7

Create the icon’s bottom section using a 28 x 6 px rectangle, which we will color using white (#FFFFFF) and
then center align to the lower section of the photo’s outline, at a distance of
4 px.

Step 8

Finish off the
icon, by turning the shape that we’ve just created into a 4 px thick outline (#FFFFFF) with a Round Join, and then adjusting it by adding a new anchor point to the center of its top
edge, which we will then remove in order to open the path (highlighted with
red).

Select the resulting shape and the rest of the photo’s composing
elements and group them (Control-G)
doing the same for the icon’s composing sections afterwards.

It’s a Wrap!

I hope that you’ve managed to keep up with each and every step, and most
importantly learned something new and useful during the process. That being
said, I’ll see you in the next one!