By Andrei Stefan

Final product image

What You’ll Be Creating

It’s been a long
time since we last did a quick tip on icons, so I thought that it would be nice
to make one about some Apple products, and see how easy it is to create them
using Adobe Illustrator.

We’ll be creating
four different products: an iPod, an iMac, a Mighty Mouse and a Wacom Tablet,
which isn’t actually made by Apple but it is part of their Photography &
Creativity line of accessories.

You can always expand the pack by adding your own icons, for which you
can find inspiration by taking a look at Envato Market, where you can
find tons of good icon packs with great themes.

1. Adjust
Illustrator’s Settings

As always, start
out by tweaking and adjusting some of Illustrator’s settings, in order to make
sure that you have a strong foundation to work with. Usually the things that I tinker with are the Grid and
the Units.

Now, I won’t go
into detail since we already have two articles that talk about these settings, so what I am going to do is show you the values that I usually go with.

Step 1

First, make sure you have Illustrator open, and then go to Edit > Preferences > Guides &
Grid
and set the Gridline every option
to 1 px and the Subdivisions to 1.

adjusting the grid settings

Quick tip:
You can read more about the reason behind these settings by checking out one
of my previous tutorials that thoroughly talks about Illustrator’s Grid System,
which I promise will make things a lot clearer.

Step 2

Once you’ve adjusted the Grid,
we can then move on to the Units tab,
and set your General and Stroke Units to Pixels since we’re aiming to create a batch of pixel perfect icons.

adjusting the units settings

Quick tip: You
can learn more about the process by reading my piece on how to adjust Illustrator for
a pixel-perfect workflow.

2. Set Up a New
Document

Assuming we’ve
managed to fine-tune Illustrator to our liking, we can start working on our
little project, and we will do so by setting up a new document.

Go to File > New or use
the Control-N keyboard shortcut, and
create a new project with 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 (72 ppi)
  • Align New Objects to
    Pixel Grid:
    checked

setting up a new document

3. Layer the
Document

Whenever I start a
new project, I always take a couple of moments and try to figure out how I can
layer each asset, so that I can easily access and edit it if I need to later
on. This way I can
focus on just one item at a time, since I’ll usually lock all the other layers,
and work on the present one until I feel I’m happy with the results.

Sure, everybody
has a different workflow, but for the present tutorial I’m just going to share
with you some of my default steps and let you figure out if they work for you.

That being said,
let’s open up the Layers panel, and
create five different layers, one for our reference grids, and four for our
icons.

Usually I like to name them using simple keywords or descriptions that
help me easily identify them.

  • Layer 1: reference
    grids
  • Layer 2: ipod
  • Layer 3: imac
  • Layer 4: mighty
    mouse
  • Layer 5: tablet
  • layering the document

    4. Create the
    Reference Grids

    A Reference Grid, or Base Grid, is a precisely delimited surface that is constructed and
    used in order to guide you through the process of creating your icons.

    The size of the Base Grid reflects the overall size of
    your final asset, which usually follows one of the already adopted values that
    can stretch anywhere from 8 x 8 px all
    the way to 512 x 512 px or even
    higher.

    In our case, we’re
    going to be creating the icons using a 96
    x 96 px
    square as a reference surface, and add an all-around 12 px inner padding to it using four
    little red squares.

    As you can see, I’ve created a Base
    Grid
    for each icon, and positioned them about 60 px from one another.

    creating the reference grids

    5. Achieve
    Consistency Through Style

    Before we start
    creating the actual icons, I want to take a couple of seconds and talk to you about consistency and how it can be
    achieved.

    With every
    project, your icons have to fall within the same visual language, which means
    that they have to adhere to the same style. Now, style can easily be defined by
    the type and amount of details that you put into your work. From the weight of
    your stroke to the roundness of your corners, you can quickly make an icon
    your icon, since no two lines are identical, and that’s the beauty of it.

    Now, the thing is that all these style elements are linked to the basic building
    blocks or shapes that make up your assets. You should always try to break your
    design apart into small pieces, and figure out how you can come up with
    something visually appealing by playing with their appearance.

    icon basic anatomy

    Whether it’s the
    exaggeration of a feature or a reinterpretation of a line, it doesn’t really
    matter, since as long as you find that special something and apply it
    throughout your work, you will always create something that is not only
    consistent, but also personal and therefore unique.

    Now, in our case, the style of our project is actually fairly common,
    which makes consistency easy to achieve.

    keeping things consistent

    We will be creating each icon using 4 px thick Stroke lines, giving each shape a nice 6 px Corner Radius. When it comes to details, we will be adding
    some different highlights and a couple of shadows here and there to give the
    icons a little pop.

    6. Creating the
    iPod

    Let’s begin by
    creating the iPod, since all the other icons are going to follow a pretty
    identical pattern, which is pretty easy to replicate once you get the hang of
    it.

    Step 1

    Make sure that
    you’re on the correct layer, and then zoom in on the first Reference Grid in order to have a better view of your drawing
    space.

    Select the Rounded Rectangle Tool
    and create a 54 x 68 px shape with
    a 6 px Corner Radius, color it using
    yellow (#eac363), and then position it towards the center of its Grid.

    creating the main shape for the ipod icon

    Step 2

    Since each icon
    has a hard outline, we will have to create a copy of the shape that we’ve just
    created (Control-C) and paste it in front
    (Control-F) so that we can then
    adjust it.

    With the duplicate in place, flip its fill with its stroke using the Shift-X keyboard shortcut, and then
    change the color to a dark grey (#303338), making sure to set the Stroke’s Weight to 4 px.

    adding an outline to the ipod icon

    Step 3

    Using the Rounded Rectangle Tool, add
    a 42 x 24 px shape (#303338) with a 2 px Corner Radius and position it
    towards the top of the icon, leaving a gap of 4 px on its left, top and right side.

    adding the screen to the ipod icon

    Step 4

    Once we’re done
    adding the screen, we can move on and work on the iconic scroll dial.

    First, grab the Ellipse Tool (L) and create a 24 x 24 px circle, which we will color
    using a slightly darker shade of yellow (#c69d4b).

    Then give it a nice 4 px outline
    as we did with the iPod’s main body, and position the two in the center of
    the empty bottom section of the icon.

    adding the scroll dial to the ipod

    Step 5

    Finish off the
    icon by adding an 8 x 8 px circle (#303338)
    in the center of the dial.

    At this point it would be a good idea to select all of its composing
    elements and group them (Control-G)
    so that things won’t get misplaced by accident.

    ipod icon finished

    7. Create the
    iMac Icon

    Once we’ve
    finished working on the first icon, we can lock its layer, and move on to the
    second one, which is the all-worshipped iMac.

    Step 1

    Using the Rounded Rectangle Tool, create
    a 68 x 52 px shape, giving it the
    same 6 px Corner Radius to keep
    things consistent. Color the shape using #eac363 and then position it towards
    the top section of the Grid, leaving
    a gap of 2 px for the outline.

    adding the main shape for the imacs screen section

    Step 2

    Create a copy of the previously created shape (Control-C > Control-F), and adjust it by removing its bottom
    round corners, changing its color to #303338, and then shortening its Height to just 40 px.

    adding the screen section to the imac

    Step 3

    Give the iMac’s upper section a 4
    px
    outline (#303338), and then add a small 4 x 4 px circle (#303338) where you would normally find the Apple
    logo.

    adding the pretend logo to the imac icon

    Step 4

    Grab the Pen Tool (P) and draw the middle
    section of the icon that connects the display to the bottom stand, making sure
    that the shape’s Height is exactly 10 px.

    Color it using a slightly darker shade of yellow (#c69d4b) and then give
    it an outline.

    adding the middle section of the stand to the imac icon

    Step 5

    Finish off the icon by adding the bottom section of the stand, and then
    group all the shapes together so they’ll act as a whole.

    imac icon finished

    8. Creating the Mighty
    Mouse Icon

    This one is by far
    the easiest icon you’ll ever make, since it only requires you to create three
    things: a fill shape, an outline, and that little scroll ball.

    Step 1

    Position yourself onto the fourth layer, and then using the Rounded Rectangle create a 40 x 68 px shape with a 20 px Corner Radius. Color the shape
    using #eac363 and then give it a nice 4
    px
    outline, making sure to center the two to the third Reference Grid.

    creating the main shapes for the mighty mouse icon

    Step 2

    Using the Ellipse Tool (L), create a 6 x 6 px circle and position it towards
    the top.

    As always, don’t forget to select all of the mouse’s shapes and group
    them using the Control-G keyboard
    shortcut.

    mighty mouse icon finished

    9. Create the
    Wacom Tablet Icon

    At this point you
    probably already know the drill. Check your layers, zoom in on the last Reference Grid, and let’s finish off the
    pack by creating the last icon.

    Step 1

    First, grab the Rounded Rectangle Tool and create a 56 x 68 px shape with a 6 px Corner Radius. Set its color to #eac363
    and then adjust its top corners by lowering their Roundness to 4 px.

    Then give the shape the usual 4
    px
    outline, and position the two towards the bottom side of the drawable
    section of the Reference Grid.

    creating the main shapes for the tablet icon

    Quick tip:
    Yeah I know, I’m kind of breaking that consistency
    rule with the Corner Radius, but
    sometimes little changes like this will actually add more appeal to your
    shapes.

    Step 2

    Create a copy of the yellow shape (Control-C > Control-F), and adjust it by removing its bottom
    corners and shortening its Height to
    12 px, coloring it using #c69d4b.

    adding the top darker section to the tablet icon

    Step 3

    Add a 4 px thick line towards
    the bottom section of the previously created shape, in order to delimit the two
    different sections of the tablet.

    adding the horizontal delimiter to the tablet icon

    Step 4

    Using the Rectangle Tool (M), create a 52 x 28 px shape (#303338)
    and position it in the center of the larger section from underneath the delimiter
    line that we just created.

    adding the drawing surface to the tablet icon

    Step 5

    Finish off the icon by adding the remaining details, like the little
    cord, and the two circle buttons. Then select all the icon’s shapes and group
    them using the Control-G keyboard
    shortcut.

    tablet icon finished

    10. Add the
    Finishing Touches

    At this point
    we’re pretty much done with the main building blocks of the icons, which means
    we can now move on to the last stage, that of adding details—remember those
    highlights and shadows that I was talking about towards the beginning.

    Now I’ll only be showing you the process for the first icon, since I
    want you to use what you’ve learned in this little tutorial and finish off the
    rest of the assets by yourself.

    Step 1

    Go back to the
    second layer, the one that houses the iPod, and let’s start by adding the
    all-around highlight.

    Quick tip: As you might remember, I had you group all the icon’s shapes together,
    so we will have to enter Isolation Mode in
    order to add the finishing touches. To do so, either double click on the group
    itself, or right click > Isolate
    Selected Group
    .

    using isolation mode to add details to the icons

    Once in Isolation Mode, create a copy of the
    outline (Control-C > Control-B)
    and change its Stroke Color to white
    (#FFFFFF), making sure to align the Stroke
    towards the inside.

    Quick tip: Now since the yellow fill shape will end up covering the highlight, you
    will have to select it, then right click
    > Arrange > Send to Back
    to position it under.

    adding the all-around highlight to the ipod icon

    Step 2

    With the Stroke still
    selected, lower its Opacity level to
    60%, setting its Blending Mode to
    Soft Light.

    adjusting the blend mode settings for the all-around highlight

    Step 3

    Next, add two diagonal highlights with different width values, using the
    same Blending Mode (Soft Light) but a slightly lower Opacity
    level (40%).

    adding the diagonal highlights to the ipod icon

    Quick tip:
    You can easily create the highlight shapes, by drawing them using the Pen Tool (P) and holding down on the Shift key in order to get those perfect
    45° angles.

    Step 4

    Create that cute
    star-shaped highlight, by drawing it using the Pen Tool (P) and then lowering its Opacity to 40% while
    leaving its Blending Mode set to Normal.

    Then simply position it somewhere along the screen, towards its bottom
    right corner.

    adding the star-like highlight to the ipod icon

    Step 5

    Finish the
    detailing process for the iPod icon by adding an inner shadow to the scroll
    wheel. Follow the same process used for the all-around highlight, but make sure
    to set the shape’s color to black (#000000) and its Opacity to 30%.

    Once you’ve added the shadow, you can exit Isolation
    Mode
    by pressing the Escape key.

    As soon as you’re done with the first icon, move on to the next one, following the same workflow and adding details where you feel they would be needed. Take your time and make sure that you get a consistent and overall balanced amount of detail to each of the remaining icons.

    ipod icon with all details added

    It’s a Wrap!

    There you have it: an easy and fairly quick tutorial on how to create some cute-looking icons using the most basic tools that Illustrator has to offer.

    I really hope that you’ve found most of the information displayed here useful, and learned something new during the process.

    all icons finished

    Read more here:: How to Create a Set of Apple Product Icons Using Adobe Illustrator