How to Create a Set of Music Player UI Buttons in Adobe Illustrator

Final product image
What You’ll Be Creating

In today’s tutorial we’re going to learn
how to create our very own set of music control UI buttons, using some of the
most basic shapes and tools that Illustrator has to offer.

And don’t forget, you can always expand the pack by heading over to GraphicRiver, where you’ll find a great selection of UI themed icons.



That being said, make
sure you fill up that coffee mug since it’s going to be a long and interesting
one!

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:
    16
  • Spacing:
    20 px
  • Width:
    32
    px
  • Height:
    32
    px
  • Units:
    Pixels

And from the Advanced tab:

  • Color
    Mode:
    RGB
  • Raster
    Effects:
    Screen (72ppi)
  • Preview Mode: Default
setting up a new document

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
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 and Snap to Pixel options 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 couple of 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
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 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 32 x 32 px, which is on the smaller
end 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 32 x 32 px orange (#F15A24) square
which we will center align to the first Artboard and use to define the overall
size of our icons.

creating the main shape for the reference grid

Step 2





Add a smaller 28 x 28 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 2 px padding
to work with.

creating the main shape for the active drawing area

Step 3





Select and group the
two squares together using the Control-G
keyboard shortcut, and then create the remaining grids using 15 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.

adding the remaining reference grids

5. How to Create the Play Button

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 of the set.

Step 1













Start by creating the
button’s main body using a 20 x 24 px rectangle
with a 4 px thick Stroke (#152730) with a Round Join,
which we will center align to the first Artboard.

creating and positioning the main shape for the play button

Step 2





Adjust the shape of the rectangle that we’ve just created, by adding a
new anchor point to the center of its right edge using the Add Anchor Point Tool (+) and then removing its top and
bottom-right ones using the Delete
Anchor Point Tool (-)
.

finishing off the play button

6. How to Create the Stop Button

The next button is probably one of the
easiest ones to create since it’s made out of a single shape.













Grab the Rectangle Tool (M) and create the
button’s body using a 24 x 24 px square
with a 4 px thick Stroke (#152730) with a Round Join, which we will position in the center of the second Artboard.

creating and positioning the main shape for the stop button

7. How to Create the Pause Button

Assuming you’ve
positioned yourself onto the third Artboard, let’s start working on our next
button.

Step 1













Create the button’s left section using an 8 x 24 px rectangle with a 4
px
thick Stroke (#152730) and a Round Join, which we will center align
to the active drawing area’s left edge, as seen in the reference image.

creating and positioning the main shape for the left section of the pause button

Step 2





Finish off the button by adding its right section using a copy (Control-C > Control-F) of the shape
that we’ve just created, which we will position on the opposite side of the
active drawing area. Once you have the copy in place, make sure to select and
group (Control-G) the two shapes
together before moving on to the next button.

finishing off the pause button

8. How to Create the Record Button

Move on to the next Artboard (that would
be the fourth one) and let’s quickly create the record button.

Step 1













Grab the Ellipse Tool (L) and create a 24 x 24 px circle with a 4 px thick Stroke (#152730), which we will center align to the underlying
active drawing area.

creating and positioning the main shape for the record button

Step 2





Finish off the button
by adding a smaller 12 x 12 px circle
with a 4 px thick Stroke (#EF815B) in the center of the
larger shape, making sure to select and group the two together using the Control-G keyboard shortcut.

finishing off the record button

9. How to Create the Fast Forward Button

Assuming you’ve
finished working on the previous button, move on to the second row of
Artboards, where we will start working on the little fast forward button.

Step 1













Create the main shape for the right arrow using a 12 x 16 px rectangle with a 4
px
thick Stroke (#EF815B) with a
Round Join, which we will center
align to the active drawing area’s right edge.

creating and positioning the main shape for the right arrow of the fast forward button

Step 2





Turn the shape that we’ve just created into a right-facing arrow using
the same process used for the play button, by adding a new anchor point
to the center of its right edge using the Add
Anchor Point Tool (+)
, and then removing its top and bottom right ones
using the Delete Anchor Point Tool (-).

adjusting the shape of the right arrow of the fast forward button

Step 3





Finish off the button by adding the left arrow using a copy (Control-C > Control-F) of the one
that we’ve just finished working on, which we will adjust by setting its Stroke’s color to #152730, aligning it
to the left side of the active drawing area. Once you’re done, select and group
the two shapes together using the Control-G
keyboard shortcut.

finishing off the fast forward button

10. How to Create the Fast Backward Button

Next, we’re going to create the fast backward button with the help of the one that we’ve just finished working on.













Make a copy (Control-C > Control-F) of the shapes
that we’ve just grouped and position it on the next Artboard, making sure to
vertically reflect it using the Reflect
tool (right click > Transform >
Reflect > Vertical
).

creating the fast backward button

11. How to Create the Skip Forward Button

Position yourself
onto the next Artboard, and let’s create the skip forward button.

Step 1













Start by creating the button’s right section using a 6 x 24 px rectangle with a 4 px thick Stroke (#EF815B) with a Round
Join
, which we will center align to the active drawing area’s right edge.

creating and positioning the main shape for the right section of the skip forward button

Step 2





Add the main shape for the right-facing arrow using an 18 x 24 px rectangle with a 4 px thick Stroke (#152730) with a Round
Join
, which we will position on the opposite side of the underlying
active drawing area.

creating and positioning the main shape for the left section of the skip forward button

Step 3





Finish off the button by turning the shape that we’ve just created into
a right-facing arrow, making sure to select and group (Control-G) all of its composing shapes together, before moving on
to the next one.

finishing off the skip forward button

12. How to Create the Skip Backward Button

Next, we’re going
to quickly create the mirror version of the skip button in a matter of seconds.













Create a copy (Control-C >
Control-F
) of the button that we’ve just finished working on, and position
it onto the next Artboard, making sure to vertically reflect it using the Reflect tool (right click > Transform > Reflect > Vertical).

creating the skip backward button

13. How to Create the Shuffle Button

Position yourself onto the third row of Artboards, and let’s start working
on the little shuffle button.

Step 1













Turn on the Pixel
Preview
mode (Alt-Control-Y),
and then draw a z-shaped path using a 4
px
thick Stroke (#EF815B) with a
Round Cap, using the reference image
as your main guide. Take your time, and once you’re done, move on to
the next step.

drawing the main shape for the upper section of the shuffle button

Step 2





Adjust the shape of the path that we’ve just created, by smoothening out the inner facing anchor points
using the Convert selected anchor points
to smooth
tool, and then repositioning their handles at a distance of 6 px from their center.

adjusting the shape of the upper section of the shuffle button

Step 3





While still in Pixel Preview
mode, draw the little right-facing arrow using the reference image as your main
guide. Once you’re done, select and group (Control-G)
the two paths together making sure to go back to the Default preview mode (Alt-Control-Y).

adding the arrowhead to the upper section of the shuffle button

Step 4





Finish off the button by adding its lower
section using a copy (Control-C > Control-F) of the shapes that
we’ve just finished working on, which we will horizontally reflect (right click > Transform > Reflect
> Horizontal
) and then position so that the paths overlap, as seen in
the reference image.

finishing off the shuffle button

14. How to Create the Repeat Button

Assuming you’ve
finished working on the shuffle button, move on to the next Artboard, where we
will start working on the repeat one.

Step 1













Start by creating the main shape for the button’s upper section using an
18 x 8 px rectangle with a 4 px thick Stroke (#152730), which we will align to the active drawing area’s
left edge, positioning it at a distance of 6
px
from its top edge.

creating and positioning the main shape for the upper body of the repeat button

Step 2





Adjust the shape of the rectangle that we’ve just created by setting the Radius
of the top-left corner to 8 px from
within the Transform panel’s Rectangle Properties.

adjusting the shape of the upper section of the repeat button

Step 3





Continue adjusting the shape, by selecting its bottom-right anchor point
using the Direct Selection Tool (A)
and then removing it by pressing Delete,
making sure to set the resulting path’s Cap
to Round.

removing the lower section from the upper body of the repeat button

Step 4





Add the little right-facing arrow using a copy (Control-C > Control-F) of the one from the previous button,
which we will position onto the adjusted path’s upper-right anchor point, as
seen in the reference image. Once you’re done, select and group the two paths
together using the Control-G keyboard
shortcut.

adding the arrowhead to the upper body of the repeat button

Step 5





Finish off the current button, by creating its
lower section using a copy (Control-C > Control-F) of the shapes that
we’ve just grouped, which we will horizontally and vertically reflect (right click > Transform > Reflect
> Horizontal
and Vertical) and then position as seen in the reference image. Once you’re done, select and
group (Control-G) the two sections
together, before moving on to the next button.

finishing off the repeat button

15. How to Create the Playlist Button

Next, we’re going to take a couple of
moments and create the playlist button, so make sure you’ve positioned yourself
onto a new Artboard, and let’s get started.

Step 1













Create the little
horizontal lines using two 14 px wide
4 px thick Strokes (#152730) with a Round
Cap
, positioned 4 px above a smaller 4 px wide one (#152730),
which we will group (Control-G) and
then align to the active drawing area’s top-left edge.

Step 2





Start working on the
musical note by creating its lower body using a 10 x 8 px ellipse with a 4
px
thick Stroke (#EF815B), which
we will align to the active drawing area’s bottom edge, positioning it at a
distance of 4 px from its right
edge.

creating and positioning the main shape for the lower section of the musical note

Step 3





Finish off the note, and with it the icon itself, by drawing its stem using a 4 px thick Stroke (#EF815B)
with a Round Cap and Join using the reference image as your
main guide. Take your time, and once you’re done, select and group (Control-G) all of its composing shapes
together before moving on to the next one.

finishing off the playlist button

16. How to Create the Add to Playlist
Button

Assuming you’ve finished working on the
previous button, make your way to the next Artboard and let’s start working on
our next item.

Step 1













Kick things off by
creating the horizontal detail lines using two 24 px wide 4 px thick Strokes (#152730) with a Round Cap, vertically stacked 4 px above two smaller 10 px ones (#152730), which we will
group (Control-G) and then center
align to the active drawing area’s left edge.

creating the main shapes for the left section of the add to playlist button

Step 2





Start working on the
little plus sign by creating the vertical segment using an 8 px tall 4 px thick Stroke line (#EF815B) with a Round Cap, which we will align to the
active drawing area’s bottom edge, positioning it at a distance of 4 px from its right edge.

creating and positioning the main shape for the vertical section of the plus symbol

Step 3





Finish off the plus sign, and with it the button itself, by adding the horizontal segment using an 8 px thick Stroke (#EF815B) with a Round
Cap
, which we will center align to the previously created segment. Once you’re done, select and
group (Control-G) the two together,
doing the same for the entire button afterwards.

finishing off the add to playlist button

17. How to Create the Download Button

Position yourself onto the fourth and last
row of Artboards, and let’s start working on button number 13.

Step 1













Create the main shape
for the box using a 24 x 6 px rectangle
with a 4 px thick Stroke (#EF815B) with a Round Cap and Join, which we will center align to the active drawing area’s
bottom edge.

creating and positioning the main shape for the bottom section of the download button

Step 2





Open up the path of
the shape that we’ve just created, by adding a new anchor point to the center
of its top edge using the Add Anchor
Point Tool (+)
, which we will then remove using the Delete Anchor Point Tool (-).

opening up the path of the bottom section of the download button

Step 3





Start working on the
down-facing arrow, by creating its main body using an 18 px tall 4 px thick Stroke (#152730) with a Round Cap, which we will center align
to the active drawing area’s top edge.

creating the main body for the down facing arrow of the download button

Step 4





Finish off the arrow, and with it the button itself, by drawing the down-facing head using a 4 px thick Stroke (#152730) with a Round
Cap
and Join. Once you’re done,
select and group (Control-G) the
arrow’s composing shapes together, making sure to do the same for the entire
button afterwards.

finishing off the download button

18. How to Create the EQ Button

Next off our list
is the EQ button, which as you’ll see is pretty easy to make.

Step 1













Start out by creating three columns of 4 px wide 4 px thick Stroke lines (#152730), which we will
vertically stack 2 px from one
another both vertically and horizontally.

creating and positioning the main shapes for the eq button

Step 2





Select the top three Stroke
rows, and then adjust them by changing their color to #EF815B.

adjusting the color of the eq button

Step 3





Finish off the button by selecting and removing some of the composing
line segments as seen in the reference image. Once you’re done, select and
group (Control-G) all of the
remaining ones before moving on to the next button.

finishing off the eq button

19. How to Create the Cast Button

Assuming you’ve
finished working on the previous button, move on to the next Artboard, and let’s start working on
the little cast symbol.

Step 1













Create the button’s main shape using a 24 x 20 px rectangle with a 4
px
thick Stroke (#152730) and a Round Cap and Join, which we will center align to the underlying active drawing
area.

creating and positioning the main shape for the body of the cast button

Step 2





Adjust the shape that we’ve just created, by switching over to Pixel Preview mode (Alt-Control-Y) and then adding a new anchor point 4 px from its top-left corner, followed by another one positioned
8 px from its
bottom-right corner using the Add Anchor
Point Tool (+)
.

adding a set of new anchor points to the body of the cast button

Step 3





Open up the path that we’ve just adjusted by selecting its bottom-left
anchor point using the Direct Selection
Tool (A)
, and then removing it by pressing Delete.

adjusting the shape of the body of the cast button

Step 4





Start working on the lower-left section by creating an 8 x 8 px circle with a 4 px thick Stroke (#EF815B), which we will position as seen in the reference
image.

creating and positioning the smaller circle for the cast button

Step 5





Create a slightly bigger 20 x 20
px
circle with the same 4 px thick
Stroke (#EF815B), which we will
center align to the one from the previous step.

creating and positioning the larger circle onto the cast button

Step 6





Finish off the button by selecting and removing
the two circles’ left and bottom anchor points, grouping the
resulting shapes and the larger frame together using the Control-G keyboard shortcut.

finishing off the cast button

20. How to Create the Share Button

We are now down to our 16th and last button, so make sure you’ve positioned yourself onto the remaining Artboard and let’s finish this!

Step 1













Start by creating the frame using a 24
x 16 px
rectangle with a 4 px thick
Stroke (#152730) with a Round Cap and Join, which we will center align to the active drawing area’s
bottom edge, positioning it at a distance of just 2 px from it.

creating and positioning the main shape for the body of the share button

Step 2





Adjust the shape that we’ve just created by adding a new anchor point
at a distance of 4 px from the
frame’s top-left corner, followed by another one at a distance of 6 px from its bottom-right one. Open up
the resulting shape’s path by selecting its top-right anchor point using the Direct Selection Tool (A) and then
removing it by pressing Delete.

opening up the path of the body for the share button

Step 3





Finish off the current button, and with it the project itself, by adding
the right-facing arrow using a copy (Control-C)
of the one from the repeat button, which we will paste (Control-F) onto the current Artboard and then adjust by shortening the length of its body from 18 px to 16 px

Once
you’re done, position the resulting shapes as seen in the reference image,
making sure to select and group (Control-G)
all of the button’s composing shapes together before hitting that save button.

finishing off the share button

It’s a Wrap!





There you have it—a nice and easy tutorial on how to create your
very own set of control buttons. As always, I hope you’ve managed to follow
each and every step and, most importantly, learned a new trick or two along the
way.

finished project preview