Advertisement
  1. Design & Illustration
  2. Icon Design
Design

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

by
Difficulty:BeginnerLength:LongLanguages:
Final product image
What You'll Be Creating

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.

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
setting up a new document

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 Edit > Preferences > Guides & Grid submenu, and adjust the following settings:

  • Gridline every: 1 px
  • Subdivisions: 1
setting up a custom grid

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
setting up the layers

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.

creating the main shape for the reference grid

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.

creating the main shape for the active drawing area

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.

creating and positioning all the reference grids

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.

creating and positioning the main shape for the battery icons background

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.

creating and positioning the main shape for the battery icons body

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.

turning the battery icons body into an outline using 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.

creating and positioning the battery icons first state indicator bar

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.

adding the remaining state indicator bar to the battery icon

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.

finishing off the battery icon

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.

creating and positioning the main shape for the settings icons background

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.

creating and positionign the main shape for the settings icons center slider

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.

creating and positioning the main shape for the center sliders state indicator

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.

creating and positioning the main shape for the center sliders lower section

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.

creating and positioning the main shape for the left sliders upper section

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.

creating and positioning the main shape for the left sliders state indicator

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.

finishing off the settings icons left 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.

finishing off the settings icon

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.

creating and positioning the main shape for the messaging icons background

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.

creating and positioning the main shape for the messaging icons left text box

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.

adding a new anchor point to the bottom edge of the messaging icons left text box

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

adjusting the shape of the messaging icons left text box

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.

turning the messaging icons left text box into an outline

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.

creating and positioning the first text line onto the messaging icons left text box

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.

creating and positioning the second text line onto the messaging icons left text box

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.

creating and positioning the messaging icons second text box

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.

finishing off the messaging icon

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.

creating and positioning the main shape for the alarm icons background

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.

creating and positioning the main shape for the alarm icons body

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.

turning the alarm icons main body into an outline

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.

drawing in the little hands inside the alarm clocks main body

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.

creating and positioning the main shape for the alarm clocks upper section

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.

finishing off the alarm clocks top section

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.

finishing off the alarm clock icon

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.

creating and positioning the main shape for the photos icons background

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.

creating and positioning the main shape for the photos icons body

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.

turning the photos icons main body into an outline

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.

adding the horizontal divider line to the lower body of the photos icon

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.

drawing the photos icons first mountain

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.

drawing the photos icons second mountain

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.

creating and positioning the main shape for the lower section of the photos icon

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.

finishing off the photos icon

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!

Final Design
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.