Today is a special one, since we’re
celebrating ten years of awesomeness, and how better to do that than by giving
you a special tutorial where you’ll learn how to create a set of ten must-have
UI icons, using the most basic shapes and tools that Illustrator has to offer.
If you’re looking for more icons, in different styles, head over to GraphicRiver.
That being said, get
a quick sip of that fresh baked coffee, and let’s get to work.
1. How to Set Up a New Project File
Assuming 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: 20 - Spacing:
20 px - Width:
64
px - Height:
64
px - Units:
Pixels
And from the Advanced tab:
- Color
Mode: RGB - Raster
Effects: Screen (72ppi) - Preview Mode: Default
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.
Step 1
Go to the Edit > Preferences > Guides & Grid 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 and Snap to Pixel option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode (if you’re using an older version of the software).
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 few layers in order to
separate the reference grids from the actual icons. If you’re familiar with my
previous tutorials, you’ll notice that with this one we’re taking a slightly
different approach, since we’re basing the project on Artboards instead of
Layers due to the high icon count.
That being said, bring up the Layers panel, and create a total of two
layers, which we will rename as follows:
- layer
1: reference grids - layer 2: icons
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 once you start a new project, since you’ll always want to start from the
smallest possible size and build on that.
Now, in our case, we’re going to be
creating the icon pack using just one size, more exactly 64 x 64 px, which is on the medium part of the scale.
Step 1
Make sure you’re on
the right layer (that would be the first one), and then grab the Rectangle Tool (M) and create a 64 x 64 px orange (#F15A24) square
which we will center align to the first Artboard and use to define the overall
size of our icons.
Step 2
Add a smaller 56 x 56 px one (#FFFFFF) which we will
position on top of the previous shape, since it will act as our active drawing area,
thus giving us an all-around 4 px padding
to work with.
Step 3
Select and group the
two squares together using the Control-G
keyboard shortcut, and then create the remaining grids using 19 copies
(Control-C > Control-F) which we
will position onto each of the empty Artboards. Take your time, and once you’re
done, make sure you lock the current layer before moving on to the next section.
5. How to Create the Navigation Icons
Assuming you’ve
successfully managed to create the little reference grids, move on to the next
layer (that would be the second one), and let’s kick off the project by
creating the first icon group, which will help us navigate better.
Step 1
Start working on the
back icon by creating its main body using a 48 x 48 px circle, which we will color using #DCEEFF and then
center align to the first Artboard.
Step 2
Give the shape that
we’ve just created an outline using the Stroke method, by creating a copy of it (Control-C), which we will paste in front (Control-F) and then adjust by first changing its color to #629CF9 and then flipping its Fill with its Stroke (Shift-X). Set
the resulting outline’s Weight to 8 px, selecting and grouping all of the
current section’s composing shapes together afterwards using the Control-G keyboard shortcut.
Step 3
Start working on the
little left-facing arrow by creating its main body using a 24 px wide 8 px thick Stroke line (#629CF9) with a Round Cap, which we will center align
to the larger underlying Artboard.
Step 4
Finish off the icon by
drawing the arrow’s head using an 8 px thick Stroke (#629CF9) with a Round Cap and Join. Take your time, and once you’re done, select and group the two
together (Control-G), doing the same
for all the icon’s composing shapes before moving on to the next one.
Step 5
Create the forward icon
using a copy (Control-C) of the one
that we’ve just finished
working on, which we will paste (Control-F)
onto the second Artboard and then adjust by vertically reflecting it (right click > Transform > Reflect
> Vertical).
Step 6
Create the scroll up icon
using a copy (Control-C) of the
previous icon, which we will paste (Control-F)
onto the next Artboard and then adjust by rotating it –90º using the Rotate tool
(right click > Transform > Rotate > -90º).
Step 7
Add the scroll down icon
using a copy (Control-C) of the one
that we’ve just created, which we will paste (Control-F) onto the fourth Artboard and then adjust by horizontally
reflecting it (right click >
Transform > Reflect > Horizontal).
Step 8
Start working on the
refresh icon by creating its main body using a 36 x 36 px circle with an 8
px thick Stroke (#629CF9), which
we will center align to the active drawing area’s bottom edge.
Step 9
Open up the circle by removing its top-left quarter section, making sure to set the resulting
path’s Cap to Round from within the Stroke
panel.
Step 10
Create the arrow head
using an 18 x 24 px rectangle, which
we will color using #DCEEFF, and then position as seen in the reference image.
Step 11
Turn the rectangle
into a left-facing arrow by adding a new anchor point to the center of its left
edge using the Add Anchor Point Tool (+),
and then removing the outer-left ones by clicking on them using the Delete Anchor Point Tool (-).
Step 12
Finish off the arrow, and with it the icon itself, by giving the resulting shape an 8 px thick outline (#629CF9) with a Round Join, selecting and grouping (Control-G) the two together, and doing the
same for the entire icon afterwards.
6. How to Create the Search and Magnification
Icons
Assuming you’ve finished
working on the first icon group, move on to the next Artboard and let’s start
working on our next group.
Step 1
Create the search
icon’s lens section using a 40 x 40 px circle
(#DCEEFF) with an 8 px thick outline
(#629CF9), which we will group (Control-G)
and then align to the active drawing area’s top-left corner.
Step 2
Take a couple of
moments and draw the handle section using an 8 px thick Stroke (#629CF9)
with a Round Cap, using the
reference image as your main guide.
Step 3
Finish off the icon by shortening the length of its handle by selecting its top anchor point using
the Direct Selection Tool (A) and
then dragging it downwards diagonally while holding down the Shift key to keep a straight line. Take
your time, and once you’re done, select and group (Control-G) all its composing shapes before moving on to the next
icon.
Step 4
Create the zoom in
icon using a copy (Control-C) of the
one that we’ve just finished working on, which we will paste (Control-F) onto the next Artboard,
adding the plus sign to the center of its lens section using two 16 px long 8 px thick Stroke lines
(#629CF9) with a Round Cap. Take
your time, and once you’re done, select and group (Control-G) all its composing shapes before moving on to the next
one.
Step 5
Add the zoom out icon
using a copy (Control-C) of the one
that we’ve just created, which we will paste (Control-F) onto the next Artboard and then adjust by double
clicking on the plus sign to isolate it. Then ungroup (right click > Ungroup) and remove its vertical Stroke line.
7. How to Create the Visibility Icons
We are now down to
our third icon group, so make sure you’ve positioned yourself onto the next
Artboard (that would be the ninth one) and let’s get started.
Step 1
Create the toggle on
visibility icon’s main body using a 48 x
32 px ellipse, which we will color using #DCEEFF and then center align to
the underlying Artboard.
Step 2
Adjust the shape that
we’ve just created by pinching its left and right anchor points using the Anchor Point Tool (Shift-C) in order to
turn the ellipse in a more eye-like shape.
Step 3
Give the resulting
shape an 8 px thick outline (#629CF9)
with a Round Join, selecting and
grouping the two together afterwards using the Control-G keyboard shortcut.
Step 4
Add the pupil section
using a 16 x 16 px circle, which we
will color using #629CF9 and then center align to the two shapes that we’ve
just grouped.
Step 5
Finish off the icon
by adding a little reflection using an 8
x 8 px circle, which we will color using #DCEEFF and then align to the
pupil’s top-right corner, grouping (Control-G)
the two together afterwards. Take your time, and once you’re done, select and
group (Control-G) all of its
composing shapes before moving on to the next one.
Step 6
Create the toggle off
visibility icon using a copy (Control-C)
of the one that we’ve just finished working on, which we will paste onto the
tenth Artboard and then adjust by drawing the diagonal line using an 8 px thick Stroke (#629CF9), selecting and grouping (Control-G) all of them together afterwards.
8. How to Create the File Sharing Icons
Let’s be honest, no
true UI icon pack is complete without a set of file sharing icons, so let’s
make sure we add a set of our own.
Step 1
Start working on the upload icon by creating the main shapes for its box
section using a 48 x 12 px rectangle
(#DCEEFF) with an 8 px thick outline
(#629CF9), which we will group (Control-G)
and then center align to the active drawing area’s bottom edge.
Step 2
Add the little extending
segments using two 8 px tall 8 px thick Stroke lines (#629CF9) with a Round
Cap, which we will position onto the sides of previously created shapes,
selecting them and then creating a larger group (Control-G).
Step 3
Add the up-facing arrow
using a copy (Control-C) of the one
that we already created for the navigation icons, which we will paste (Control-F) onto the current Artboard
and then center align to the active drawing area’s top edge. Once you have the arrow in place,
select and group all of the icon’s composing shapes together using the Control-G keyboard shortcut.
Step 4
Create the download
icon using a copy (Control-C) of the
one that we’ve just finished working on, which we will paste onto the next
Artboard and then adjust by horizontally reflecting its little arrow (right click > Transform > Reflect
> Horizontal).
9. How to Create the Information Prompt
Icon
If you’re like me,
you’re probably one of those people that don’t really like the next item, since
interfaces should be easy to use, but deep down know that sometimes it’s a
necessary evil.
Step 1
Create the icon’s main body using a 48
x 48 px circle (#DCEEFF) with an 8
px thick outline (#629CF9), which we will group (Control-G) and then center align to the 13th Artboard.
Step 2
Create the exclamation
mark’s little dot using an 8 x 8 px circle,
which we will color using #629CF9 and then center align to the larger shapes,
positioning it at a distance of 4 px from
its outline’s bottom edge.
Step 3
Finish off the mark, and with it the icon itself, by adding the line segment using a 12 px tall 8 px thick Stroke (#629CF9),
which we will position above the dot, at a distance of just 4 px. Select and group (Control-G) the two shapes together,
doing the same for the entire icon, before moving on to the next one.
10. How to Create the Share Icon
Sharing is one of
those things that makes the Internet a great place to live out your digital
existence, so I’m going to share with you a simple approach on how to create
your very own shareable icon.
Step 1
Create the icon’s main
sections using three 16 x 16 px circles
(#DCEEFF) with an 8 px thick outline
(#629CF9), which we will individually group (Control-G) and then position as seen in the reference image.
Step 2
Draw the line segment
connecting all three sections using an 8
px thick outline (#629CF9) with a Round
Cap and Join. Take your time,
and once you’re done, send the resulting path underneath by right clicking > Arrange > Send to
Back, selecting and grouping all of the icon’s composing shapes together
using the Control-G keyboard
shortcut.
11. How to Create the State Toggle Icons
We love turning
things on and off, so why not spend a couple of moments and see how we can
create our very own state indicator toggles.
Step 1
Start working on the toggle off icon by creating its main body using a 48 x 32 px rounded rectangle (#DCEEFF)
with a 16 px Corner Radius and an 8 px thick outline (#629CF9), which we
will group (Control-G) and then
center align to the next Artboard.
Step 2
Add the state indicator
using a 16 x 16 px circle, which we
will color using #629CF9, and then center align to the larger shapes,
positioning it at a distance of 4 px from
the outline’s left edge. Once you’re done, select and group (Control-G) all three shapes together, before moving on to the next
icon.
Step 3
Create the toggle on
state using a copy (Control-C) of
the one that we’ve just finished working on, which we will paste onto the next
Artboard (Control-F), and then
adjust by vertically reflecting it (right
click > Transform > Reflect > Vertical).
12. How to Create the Hamburger Menu Icon
The next item on our list is one of those icons that instantly became a game changer once it was
used and fully understood, since it was instantly adopted as a universal
symbol.
Step 1
Start working on the
menu’s center section by creating an 8 x
8 px circle, which we will color using #629CF9 and then center align to the
active drawing area’s left edge.
Step 2
Add the bar segment
using a 36 px wide 8 px thick Stroke line (#629CF9) with a Round
Cap, which we will center align to the active drawing area’s right side.
Take your time, and once you have the path in place, select both it and the
circle and group them together using the Control-G
keyboard shortcut.
Step 3
Finish off the icon by
adding the top and bottom sections using two copies (Control-C > Control-F twice) of the shapes that we’ve just grouped,
which we will position at a distance of 8
px from the original. Once you’re done, select and group (Control-G) all its composing sections
before moving on to the next icon.
13. How to Create the Settings Icon
Be it either
sprockets or sliders, we can all agree that the settings icon is a must-have
item in any UI pack, since adjustments are one of those things that we
always like to make, if you know what I mean.
Step 1
Start out by creating the icon’s slider segments using three 48 px wide 8 px thick Stroke lines
(#629CF9) with a Round Cap, which we
will vertically stack at a distance of 16
px from one another, center aligning them to the empty underlying Artboard
afterwards.
Step 2
Finish off the icon
by adding the adjustment knobs using three 12
x 12 px circles (#DCEEFF) with an 8
px thick outline (#629CF9), which we will individually group (Control-G) and then position on the
sliders as seen in the reference image. Once you’re done, don’t forget to
select and group (Control-G) all of
the icon’s composing shapes before moving on to the next one.
14. How to Create the Like Icons
We are now down to
our last icon group, and how better to end the pack than by adding the little
heart states.
Step 1
Start working on the
upper section of the like button by creating a 28 x 28 px circle, which we will color using #DCEEFF, and then
position 8 px from
the active drawing area’s top edge and 4
px from its left one.
Step 2
Create another 28 x 28 px circle (#DCEEFF), which we
will position onto the opposite side of the active drawing area, making sure to
maintain the same gaps. Once you have both shapes in place, select
and unite them into a single larger object using Pathfinder’s Unite Shape
Mode.
Step 3
Turn on Pixel Preview mode (Alt-Shift-Y), and adjust the resulting
shape by selecting and removing its bottom half and then snapping the
top-center anchor point back to the Pixel
Grid.
Step 4
Grab the Pen Tool (P) and draw the heart’s lower
body, making sure to smoothen out its side anchor points using the Convert selected anchor points to smooth. Take your time and adjust the shape by
selecting and repositioning some of its handles’ end points as seen in the
reference image, turning off Pixel
Preview mode (Alt-Control-Y)
before moving on to the next step once you’re done.
Step 5
Finish off the icon by
giving the resulting shape an 8 px thick
outline (#629CF9) with a Round Join,
making sure to select and group (Control-G)
the two before moving on to the next one.
Step 6
Create the final icon
using a copy of the one that we’ve just finished working on, which we will
position on the last Artboard and then turn into a dislike button by adding
the diagonal crossbar using an 8 px thick
Stroke (#629CF9) with a Round Cap. Once you’re done, select and
group (Control-G) all its composing
shapes before saving the project.
Great Job! Our Little UI Pack Is All
Finished!
As always, I hope
you’ve enjoyed this step-by-step tutorial and most importantly learned
something fresh and useful along the way!
{excerpt}
Read More