If you’re into
retro tech as much as I am, well buckle in since today we’re having a treat,
and boy is it sweet.
In the following moments, we will recreate some of the most classic, iconic products, from the likes of Polaroid, Sony and Casio, using some of
Illustrator’s most basic tools, and we will do so by throwing in as much detail
as possible.
If you decide that
you want to turn the pack into something larger, you can always take a quick
look at Envato Market,
where you can find endless icon packs just waiting to be taken.
So, assuming you already have Illustrator up and running, let’s start by
setting up a New Document.
1. Set Up the New Document
Before we set off
to creating the actual icons, let’s take a couple of seconds and set up our
project.
First, either go
to File > New or use the Control-N keyboard shortcut, to create
a New Document which we will adjust
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 (72 ppi)
Align New Objects to
Pixel Grid: checked.
Quick tip:
most of the indicated settings can be triggered by setting the document’s Profile to Web; the only one that won’t be automatically set is the Size, which you will have to manually
select.
2. Set Up the
Layers
With the document created, we’ll now prep our project by creating a set
of individual layers for each of our icons. If you’re wondering why, well let’s
just say that it’s far easier to work with multiple assets if you have each
one on its own layer, which will make your workflow a lot more straightforward,
since you’ll be building one icon at a time.
Assuming you know
how to use the Layers panel, bring
it up and create four layers, which we will rename as follows:
reference grids
casio watch
polaroid camera
sony walkman
The way that we’re
going to be using these layers is really simple. First, we’ll make sure that
all the layers except the one that we are currently working on are locked, by
clicking on the little empty box found next to the eye icon.
Once we do that,
we can focus on just one icon at a time, and work on it without accidentally
editing or repositioning the other two.
As soon as we’ve
created the icon, we’ll lock its layer and then move on to the next one.
3. Set Up a
Custom Grid
Since Illustrator lets us take advantage of its Grid, we will set it to
the lowest possible values, and use the Snap
to Grid option whenever we’re not in Pixel
Preview mode, in order to ensure that all our shapes are perfectly snapped
to the Pixel Grid.
The settings that
we’re interested in can be found under the Edit
> Preferences > Guides & Grid preferences submenu, and should be adjusted as follows:
Gridline every:
1 px
Subdivisions: 1
Quick tip: now, I won’t go too much into details,
since I’ve already written two separate pieces that talk about how the Grid system works, and how to use
various settings to create a pixel-perfect workflow.
What I am going to do is encourage you to read those,
since they’ll probably answer all your questions, and widen your technical
skills when it comes to some of Illustrator’s
more ambiguous tools and options.
Once you’ve set up your custom grid, all you’ll need to do in order to
make your shapes look crisp is enable the Snap
to Grid option found under the View menu.
Quick tip:
you should know that the Snap to Grid option
will transform into Snap to Pixel every
time we enter the Pixel Preview mode,
but that’s totally fine, since the two will behave exactly the same due to our
custom Grid.
4. Adjust the
Keyboard Increment
Another thing that you could adjust is the Keyboard Increment, which
can prove to be really handy, especially if you’re used to moving your objects
around using the keyboard’s directional arrow keys. The option can be found
under the Edit > Preferences >
General > Keyboard Increment preference submenu, and should be set to
the lowest possible value, which in this case is 1 px.
Quick tip:
most of the latest versions of Illustrator
come with this setting already adjusted, but for those of you who have
different values, just modify them as indicated, and you should be on track
with the rest of us.
That being said,
we’re pretty much done with the more technical stuff, which means that we can
now start working on the actual icons, and we will do so by first creating the
reference grids.
5. Set Up 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 your icons, and they should always be the
first decision that you make once you start working on a project, since you’ll
always want to start from the smallest size possible and build on that.
Now, in our case we’re actually going to be creating the icons using
just one size, more exactly 96 x 96 px, which is a fairly large one.
So, assuming
you’ve locked all the other layers except the reference grids one, grab the Rectangle Tool (M) and draw a 96 x 96 px square and position it in the center of your Artboard. Color
the shape using a darker grey (#CCCCCC) and then add another 92 x 92 px square (#E6E6E6) on top of
it, which will act as our main drawing area, thus giving us a little 4 px padding all around.
Since we’ll be creating three icons, group the two squares (Control-G) and create two duplicates (Control-C > Control-V) on each side,
and position them at a distance of 60 px
from the center one.
Once you have all
your reference grids in place, you can lock the layer so that you won’t
accidentally move them, and then we can start tinkering with the first icon.
6. Create the
Casio Watch
It took a while, but we are finally jumping into the action, and how
better to do it than by creating the iconic Casio smartch. Sorry, I meant watch,
yeah “watch”. Or did I?
Step 1
Position yourself
over the first reference grid, and zoom in so that you can have a better view
of what you’re going to be doing.
Then, using the Rectangle Tool
(M) create a 54 x 68 px shape (#7F7974)
and position it in the center of your grid.
Quick tip:
since we’re aiming to make the icons as crisp as possible, make sure each
created shape aligns to the Pixel Grid by
using the Transform Panel’s Align to Pixel Grid option, found under
the hidden options.
If you didn’t
know, these options can be made visible by clicking on the window’s little down-facing arrow and enabling Show Options.
Step 2
Adjust the watch’s
base shape by adding eight new anchor points at exactly 4 px from its main ones. To do this, you should first switch over
to Pixel Preview mode (Alt-Control-Y), and then select the
shape so that you can better view its main anchors.
Then, using the Add Anchor Point
Tool (found underneath the Pen Tool),
add one new anchor point on each side of the ones that form up the shape (the
corner points).
Step 3
When you’re
finally done adding the new anchors, you then need to switch over to the Delete Anchor Point Tool and remove the
points that give the shape its rectangular form.
Once you’ve gotten rid of the corner points, your new shape should look
something like this.
Step 4
Select the
adjusted shape, and then let’s give it a nice thick outline by applying an
offset path.
If you don’t know
what an offset is, well it’s a larger copy of the original shape that was
created by adding pixels to the Width and
Height of the selected object, thus
pushing its surface towards the outside.
First, we have to select the shape, and then we need to go to Object > Path > Offset Path. A
new window should appear, giving us the option of setting the size of the Offset (the copy). Since we don’t want
to go overboard with the thickness, we will assign it a nice 4 px value which will be easily visible.
Quick tip: you can always preview the result, which I always
recommend that you do, since you can play with the settings without having to
apply and then revert them until you find the right one, which would be wasting precious time.
Step 5
As soon as you click on OK, Illustrator will create the offset,
which will be positioned underneath your original shape. Now, since the copy
has the same color as the original, we will have to change it to
something darker (#544F4B), in order for it to stand out.
Quick tip:
from this point on, when we’re creating the outlines I won’t go
over the “do this – then that” part since the process isn’t that hard, but if
you happen to get stuck, just retrace the steps by giving them another read.
Step 6
Since we now have
our base shape for the watch, we can start working on the little details, and
we will do so by creating the little display.
First, grab the Rounded Rectangle, and create a 50 x 28 px shape with a Corner
Radius of 6 px. Since this will
act as the screen’s main outline, color it using #544F4B and then
position it towards the top section of the watch’s main shape, leaving a gap of
2 px from the top and sides.
Step 7
Add the screen section to the display by creating a 38 x 16 px shape with a 2 px Corner Radius, which we will color
using #C6CECA. Then position the new shape over the outline that we’ve just
created, making sure to push it more towards the bottom, so that we have a nice
4 px gap between it and the outline
itself.
Step 8
Next, let’s add
the all-around ring-like shadow, by creating a duplicate of the screen that
we’ve just created (Control-C >
Control-F) and then applying a negative offset of 2 px to it. Then select the copy and the offset, and use Pathfinder’s Minus Front shape mode in order to create the ring.
Quick tip: as you can see, the Offset Path
is an incredibly versatile tool, since it allows you to create larger
copies (using positive value increments), and also smaller ones (using negative
values) which we’ve just used to create the screen’s shadow.
Step 9
Once you’ve created the shadow, we need to color it accordingly, since at
this point it maintains the same color value as the screen itself. So select
the ring-like shape, and then color it using something darker (#544F4B), making
sure to lower its Opacity to
about 30%.
Step 10
Since we now have
our shadow, let’s take a couple of moments and create the little highlights.
First, set your
fill color to white (#FFFFFF) and then grab the Pen Tool (P) and position yourself next to the inner shadow, and
start drawing a diagonal rectangle by holding down on Shift in order to get
those nice 45° angles on your lines.
Create two shapes,
one larger 4 px one and another
smaller 2 px one, position them 4 px from one another, and then adjust
them by setting their Blending Modes to
Soft Light and lowering their Opacity levels to 40%.
Finally group the two (Control-G),
and then align them to the center of the display.
Step 11
At this point
you’re probably going to wonder why we added the highlights before the actual
elements that form up the HUD. Well, the reason is really simple: because I just hate to see dark lines covered by highlights. Call it madness, or
whatever, but I don’t know, for me it just doesn’t look right. And yeah, I know
that a highlight usually goes over the entire design, but I still don’t think
it looks good.
Moving on… So we
now have our screen, with its shadow and highlights, how about we start adding
the little details such as the golden paint and the HUD itself?
First, select the Rectangle Tool
(M), set #CCB376 as your fill color, and draw an 8 x 2 px shape, then another 2
x 2 px one, position them 2 px from
one another, and then position them towards the top side of the display, just
above the screen. Then add another 1 x
6 px one, and put it to the right side.
Step 12
Now ladies and
gents, I’m going to give you some creative freedom, and force you, sorry “let”
you play around with the elements of the HUD. Take your time, get creative, and
show me what you would like the screen to look like. Once you’re done, don’t
forget to select all the screen’s elements and group them together (Control-G), so that you won’t
accidentally move them around.
Meanwhile, I’m going to enjoy a sip of some fresh-made coffee.
Step 13
Done already?
Darn, well let’s get back on track, and how better to do so than by creating
the little numpad found towards the lower section of the watch.
Start by drawing a 42 x 26 px shape
(#68625E) with a 2 px Corner Radius,
give it a nice 4 px outline (#544F4B)
using the offset path, and then position the two so that you have a 2 px gap between them and the screen’s
main outline.
Step 14
Before we start
adding the actual buttons, we’ll have to first add a little inner shadow to the
numpad area.
First, select the
inner shape that we created a few steps ago, duplicate it (Control-C > Control-F), and then
create an offset of -2 px.
Once Illustrator adds the
offset, select both it and the duplicate and use Pathfinder’s Minus Front to
get the ring-like shape. Change its color to something darker (#544F4B) and
then make sure to lower its Opacity to
40%.
Step 15
With the shadow
added, we can now start creating the little buttons.
First, select the Rounded Rectangle Tool and create an 8 x 4 px shape with a 2 px Corner Radius. Color the button
using #544F4B, and then create three copies which we will position towards its
right at a distance of 2 px from one
another.
Then, group all
four buttons, and create three more rows underneath keeping the same 2 px gap in-between.
Finally select them all, and group them together (Control-G) so that they won’t fly around by accident.
Step 16
Create a copy of the buttons, change their Opacity level to 40%,
and then position them underneath, making sure to push them towards the bottom
by 1 px in order for them to be
visible.
Step 17
Since at this
point we’re pretty much done with the main section of the watch, all we need to
do in order to move on is add a couple of vertical highlights to its body.
To accomplish that,
grab the Rectangle Tool (M) and
create a smaller 1 x 68 px rectangle,
and another slightly thicker 2 x 68 px one,
which we will position 1 px from
another. Then, change their color to white (#FFFFFF), and set their Blending Modes to Soft Light while lowering their Opacity to 40%.
Finally, group the two (Control-G),
and position them over the watch’s main fill shape (a few pixels towards the
right from the center), making sure that all the other elements overlap them.
Step 18
Screen checked.
Buttons checked. Side sections… not so checked.
With the main body
of the watch built, we should now start working on its sides.
First, grab the Rounded Rectangle
Tool and create a 68 x 56 px shape
with a Corner Radius of 4 px. Color the shape using #77706B,
give it a 4 px outline (#544F4B) and
then position both of them underneath (right
click > Arrange > Send to Back), making sure to align them to the
center of our watch.
Step 19
With the side
sections in place, add four 4 x 8 px rounded
rectangles (#544F4B) with a 2 px Corner
Radius, positioned 4 px from
one another, on each side of the watch. These little pieces will act as small
insertions, which will make the icon feel more detailed.
Quick tip: you can either cut the shapes in half in order to position them next
to the side section’s outline, or you can simply overlap them since you will
achieve the same results.
Step 20
Add a subtle shadow to the side section piece to give it more depth. Use #544F4B for
the fill color, and as always, don’t forget to lower the Opacity to 40%. Oh, and make sure
the little insertions go over the shadow itself.
Quick tip: it would be a good idea to start grouping the different sections of
the watch, so that in case you ever want to edit it, you can do it without
worrying that you’ve deleted/moved something by mistake. Remember Control-G is your most trusty friend.
Step 21
Now that we have
our side sections, how about adding a little button to its right.
First, create a 4 x 4 px rounded rectangle, with a 1 px Corner Radius. Color the shape
using gold (#CCB376), give it a nice thick 4
px outline (#544F4B) and a subtle highlight, and then group (Control-G) and position the button to
the right side of the watch, horizontal aligning it to the center of the third
insertion.
As you can see, there’s only a short segment of the button showing, so
you’ll want to send it to the back (right
click > Arrange > Send to Back) and move it a few pixels to the left.
Step 22
At this point,
we’re almost done with the little watch icon, and all we need to add in order to
complete the composition are the top and bottom watch band sections.
Start by creating a 46 x 8 px rectangle
(#68625E) which we will position underneath the watch itself, leaving a 4 px gap between the new shape and the
main reference grid.
Step 23
Adjust the new shape, by selecting its top anchor points using the Direct Selection Tool (A) and then
pushing them (one at a time) towards the inside by 4 px using the keyboard’s directional arrow keys.
Step 24
Give the resulting shape an outline (#544F4B) and a couple of highlights, and then group (Control-G) and
create a copy which you will reflect horizontally (right click > Transform > Reflect > Horizontal) and then
position towards the bottom section of the watch.
Step 25
Finish off the icon by selecting and grouping all the composing
sections of the watch using the Control-G
keyboard shortcut.
Since we now have
our beautiful Casio Watch finished, we can lock its layer, and move on to next
icon, which is the little Polaroid Camera.
7. Create the
Polaroid Camera
Step 1
Start by positioning yourself over the second reference grid, and
using the Rectangle Tool (M), create
an 84 x 18 px shape with a 2 px Corner Radius. Color the shape
using #68625E and then adjust its top left and right corners by selecting them
using the Direct Selection Tool (A) and
then going over to the Transform panel
and changing their value from 2 px to
0 px in order to make them sharp.
Quick tip:
make sure the Link Corner Radius Values is
unchecked, otherwise you won’t be able to individually adjust them.
Step 2
Give the shape a 4 px outline
(#544F4B) and then position the two towards the bottom side of the grid.
Step 3
Start working on the picture exit slot by creating a 58 x 2 px rectangle (#5C5753) with a 4 px outline (#544F4B) which you will
align to the center of the larger segment forming the camera’s bottom tray.
Step 4
Add a slightly wider 74 x 4 px rectangle
towards the top side of the slot’s outline, coloring using the same #544F4B
value.
Step 5
Select the main outline of the picture’s tray, and give it a subtle
shadow by applying a 2 px offset,
making sure to lower the resulting shape’s Opacity
to 40%.
Step 6
Finish off this
part of the icon by adding a couple of highlights (color: #FFFFFF; Blending Mode: Soft Light; Opacity: 40%), one larger one to the top, and
two thinner vertical ones positioned slightly towards the right.
Since we’re pretty much done with the tray, you can select all of its
elements and group them together (Control-G)
so that you won’t accidentally move them around.
Step 7
Next, we’re going
to start working on the camera’s main body, which houses the lens, some buttons
and other goodies.
We will create
this section of the composition by drawing three different rectangles which we
will then adjust here and there.
First, create an 84 x 6 px rectangle and position it
just above the tray’s outline. Then, add another 84 x 14 px one and stack it over it. Finally add a 76 x 40 px rounded rectangle with a 4 px Corner Radius.
Color all three shapes using #CECABA and then get ready to make some
little adjustments.
Step 8
Select the second
rectangle, and start moving its top anchor points towards the inside by 4 px by using the Direct Selection Tool (A) in combination with the keyboard’s
directional arrow keys.
Once you have the adjusted shape, create a copy of it (Control-C) since we’re going to be
needing it in a couple of moments.
Step 9
Once you’re done adjusting the middle piece, select the top one, and
using the Transform panel, set its
bottom corners’ Corner Radius to 0 px in order to get a smooth square
side.
Step 10
Select all three shapes, and use Pathfinder’s
Unite shape mode in order to combine
them into a single larger shape.
Step 11
Use the Offset Path to give
the new shape the usual 4 px outline
(#544F4B).
Step 12
Paste the copy of the middle shape that I told you to save a couple of
steps ago, and color it using a darker shade (#C1BCAA), in order to give the
icon some depth.
Step 13
Using the Rectangle Tool (M)
create an 80 x 4 px shape, color it
using #544F4B and then position it over the top side of the darker piece. Then,
create a slightly wider 88 x 4 px one
(#544F4B) and position it towards the bottom side.
Step 14
Start adding a
bunch of highlights and shadows in order to make things more interesting.
Use white
(#FFFFFF) for the highlights, making sure to set the Blending Mode to Hard Light this
time (since using Soft Light might
make them look too washed out) and lower the Opacity to 40%.
For the shadows, use #544F4B along with the by now regular 40% Opacity level.
Step 15
Before we start
working on the lens and other elements, we have to finish off the main lines of
the camera, by adding two parallel lines that follow the side outline of the
upper body.
To do that, simply
select the Pen Tool (P), set your
stroke color to #544F4B leaving your fill empty, adjust the Stroke’s Weight to 2 px, and then
simply click and draw a line that starts from the center of the top outline and runs all the way down to the bottom one.
Leave a gap of 1 px between
it and the side outline, and then create a copy (Control-C > Control-F), reflect it vertically (right click > Transform > Reflect
> Vertical) and position it on the other side.
Step 16
We can now start adding details to the upper section of the camera’s
body, and we will do so by creating the lens.
Select the Ellipse Tool (L) and create a small 4 x 4 px circle which we will color
using #544F4B, and position over the camera’s top section of the body, aligning
it to its center (1).
We will create the
rest of the rings by selecting one shape at the time and then using the Offset Path as follows:
With the first
circle selected, apply an Offset of 2 px and color the shape using #5C5753
(2).
With the second
circle selected, apply an Offset of 2 px and color the shape using #544F4B
(3).
With the third
circle selected, apply an Offset of 1 px and color the shape using #5C5753 (4).
With the fourth circle selected, apply an Offset of 1 px and color the shape using #544F4B (5).
With the fifth circle selected, apply an Offset of 1 px and color the shape using #68625E (6).
With the sixth circle selected, apply an Offset of 1 px and color the shape using #544F4B (7).
With the seventh circle selected, apply an Offset of 1 px and color the shape using #7F7974 (8).
With the eighth circle selected, apply an Offset of 1 px and color the shape using #544F4B (9).
With the ninth circle selected, apply an Offset of 1 px and color the shape using #B2AFAF (10).
With the tenth circle selected, apply an Offset of 4 px and color the shape using #544F4B (11).
Once you’re done
creating the rings, take your time and add some half shadows to them, by
creating a copy (Control-C >
Control-F), which you will then adjust by removing its bottom half, and
then coloring it using #544F4B and lowering its Opacity to 40% (12).
For the tenth ring
(the light grey one) create a half ring highlight using white as the fill color
(#FFFFFF), Hard Light for the Blending Mode and 40% for the Opacity (12).
Finish off the lens by adding the actual glass piece (13), which you
will create by duplicating the fourth ring, which we will then position on top
of the rest of the elements. Set its Blending
Mode to Soft Light, its Opacity to 20%, and then add a top half highlight using the same values
(14), and two small circles positioned diagonally (15).
Once you have all the pieces, group them
together (Control-G) so that they
won’t get repositioned by accident.
Step 17
With the lens in
place, we can start working on the left-side details, by adding the little mock-up text lines and the red button.
First, grab the Rectangle Tool
(M) and create a taller 8 x 4 px shape,
and a wider 12 x 2 px one just under
it (at a 2 px distance), color them
both using #544F4B, and position them next to the camera’s left parallel line,
making sure to leave a gap of 2 px between
them and the line, and another 10 px one
towards the top side of the camera.
Step 18
With the text lines in place, grab the Ellipse Tool (L) and create a 6
x 6 px circle which we will color in red (#D66969). Give it a 4 px outline (#544F4B) an inner ring
shadow, and then with all three shapes grouped (Control-G), position them underneath the text lines, at about 4 px, making sure to align the button
to their left side.
Step 19
Once we’re done
with the left-side details, we can move over to the right one and start working
on the camera’s viewfinder.
As with the lens, start by creating a 2 x 2 px square (#544F4B) (1) to which we will apply an offset of 2 px. Color the resulting shape using #68625E (2) and then give a 4 px outline (#544F4B) (3), only this
time make sure that you adjust the resulting offset by making all of its corners round using the Transform Panel’s Corner Radius value
fields (use 2 px) (4).
Then, add a 4 x 4 px glass piece (color: #FFFFFF; Blending Mode: Soft Light; Opacity: 20%) over the rest of the elements,
aligning it to the center (5), and another half-sized highlight over it (6).
As always, don’t forget to select and group all
the elements together using the Control-G
shortcut. Once you do that, simply position the viewfinder over the camera,
towards its top-right corner, leaving an all-around 2 px gap.
Step 20
Next, using the Pen Tool (P), draw a little down-facing
arrow (4 px wide, 2 px tall) and position it just under the
viewfinder, leaving a gap of 1 px between
the two.
Then create the little dial by drawing a 4 x 4 px circle (#544F4B) (1), to which you will be adding a 1 px Offset (#68625E) (2). Once you
have the larger circle, select it, and then give it a 2 px Offset which will act as an outline (#544F4B) (3). Create a
copy (Control-C > Control-F)
of the second circle, cut it in half by removing its bottom anchor point,
and then turn it into a highlight by coloring it white (#FFFFFF) and setting
its Blending Mode to Soft Light and its Opacity to 20% (4).
Group all the dial’s elements together (Control-G), and then align it to the
viewfinder’s left side, making sure to leave a gap between it and the little
arrow indicator.
Step 21
Since we’re pretty
much done with all the mechanical/moving parts, we can now add the little
rainbow that flows from underneath the lens, by creating six 2 x 28 px rectangles, which we will
stack next to one another, and then position under most of the camera’s details
(highlights, shadows, outlines).
When it comes to
coloring the shapes, use the following values:
pink: #C983AB
red: #D66969
orange: #CC9169
yellow: #CCB376
green: #8EAF7E
blue: #7F99B2
Step 22
Finish off the icon, by adding the little top center piece using a 34 x 6 px rounded rectangle with a 2 px Corner Radius (#544F4B).
Then make sure to select all of the camera’s
elements and group them together (Control-G)
so that you can easily operate it later on if you need to.
8. Create the
Sony Walkman
We’re now down to
our third and last icon, which is the iconic Walkman, which Sony used to change
the way we listened to music. So, without any further delays, let’s get into
it.
Step 1
Start by making
sure you’re on the correct layer, locking all of the others, and then position
yourself over the third reference grid.
Using the Rectangle Tool (M),
draw a 38 x 60 px shape (#7F99B2)
and then give it a 4 px outline (#544F4B)
making sure to position the two objects to the bottom side of the main grid.
Step 2
Next, let’s turn
this box-looking thingy into something that actually resembles a cassette
player, by adding some delimiting lines and sections.
First, draw a 6 x 60 px rectangle
(#E0DBDA), and position it towards the right side of the blue shape. Then add
another slightly narrower 4 x 60 px one
(#544F4B) next to it, which will act as a delimiter.
Step 3
Using our by now beloved Rectangle
Tool (M), create a 28 x 4 px delimiter
(#544F4B) and align it to the center of the visible blue section, 6 px from its top.
Step 4
Start working on
the little window, from the cassette holder, by creating a 10 x 26 px rectangle (#68625E), to which we will apply a 4 px offset
which will act as the outline (#544F4B). As we did with the
viewfinder, we will round the outline’s corners using a 2 px Corner Radius.
Once you’re done adjusting the shape, position both it and the inner
lighter piece over the larger blue section, aligning the two to its center.
Step 5
Next, add a little inner ring highlight by creating a copy of the lighter
grey rectangle and applying a -2 px
offset which you will then use to create a cutout. Change the resulting
shape’s color to white (#FFFFFF), and then set its Blending Mode to Soft Light, making
sure to lower its Opacity to 40%.
Step 6
Take a couple of moments, and create the two tape bands, the diagonal
highlights and a small 2 px all-around shadow. Use the tricks and tools that we’ve used in the previous steps,
and once you’re done, move on to the next step.
Quick tip: remember, even if this is a tutorial,
your main goal should always be to force yourself to learn new skills and
techniques, not only by observing and retracing some steps, but by experimenting
on your own, since by doing so you’ll develop your own unique workflow.
Step 7
Start adding some highlights and shadows, using different Opacity levels depending on the
different areas. For the highlights, use 60%
on all the blue surfaces, and 40% for
the grey one.
When it comes to the shadows, use a more toned-down 30%.
Step 8
Start getting creative, and add a bunch of details using circles,
rounded rectangles and regular rectangles in order to make the device look more
interesting. Use the same color value found throughout all the outlines (#544F4B)
and try to vary the thickness of the lines here and there.
Step 9
Once you’re done
adding the little details, let’s move a little towards the outside of the “box”,
and start working on its little buttons.
First, grab the Rectangle Tool
(M) and create a 6 x 2 px shape
(#BC8D69) to which we will add a thinner 2
px outline (#544F4B), a little 2 x 1
px highlight, and a bottom 6 x 1 px
shadow. Group all the button’s elements together (Control-G) and position it towards the top side of the player,
leaving a gap of 8 px from its left
side.
Step 10
Next, move on to
the right side, and create a taller 1 x
10 px rectangle, followed by two smaller 1 x 4 px ones, which we will color using #B2AFAF. Give all three
shapes a 2 px outline (#544F4B), a
top highlight (1 x 2 px) and a
bottom shadow (1 x 2 px), and then
position them 1 px from one
another.
When you have all three buttons, group them (Control-G) and then position them underneath the player (right click > Arrange > Send to Back)
leaving an 8 px gap from the top
side of the walkman’s main outline.
Step 11
Move over to the
left side this time, and let’s add the two little hinges that allow the
cassette holder door to swivel.
Select the Rounded Rectangle Tool and create two 4 x 8 px shapes with a 1 px Corner Radius, color them using #544F4B,
and then position the two 26 px from
one another.
Position the grouped hinges underneath the player’s main outline, so
that only their left half is visible, and then Vertical
Center Align them to the larger blue section.
Step 12
Start working on
the headphones, by creating the little band connecting the two sound drivers.
First, grab the Rounded Rectangle Tool, set your Stroke color to #544F4B and its Weight to 2 px, and then draw an 84 x
107 px shape with a 42 px Corner
Radius which we will align to the top side of the reference grid.
Then, using the Direct Selection
Tool (A), select and remove its bottom anchor point by pressing Delete.
Expand the resulting shape by going to Object
> Expand > Fill & Stroke.
Step 13
Grab the Rectangle Tool (M) and
create a 4 x 10 px shape (#77706B),
give it a 2 px outline (#544F4B),
and then position both of them to the left side of the head band, leaving a gap
of 6 px from its bottom end point.
Step 14
Since the joint needs to look a little more detailed, we will have to
add a 4 x 2 px delimiter line (#544F4B)
and position it towards the top, leaving a gap of 2 px between it and the joint's larger outline (2). Then add a 4 x 1 px highlight to the top, and
another one under the delimiter.
Use a 1
x 1 px square to create the top section of the vertical highlights, and
another 1 x 4 px one for the bottom
one. Add a 4 x 1 px shadow to the
bottom section of the joint’s fill shape (3), and finally create a small 4 x 4 px circle (#544F4B) which we will
position towards the center of the joint, making sure to send it underneath, so
that only its right half will remain visible (4).
Once you have all the little details in place,
group (Control-G) the shapes forming
the joint since we’re going to be using a copy of this section to create the
right-sided driver.
Step 15
Start working on the lower section of the left headphone, by creating a 2 x 20 px rectangle (#544F4B) which we
will position just under the right side of the joint’s main outline.
Step 16
With the little
extension in place, we can now add the smaller section of the headphone that
holds the magnet.
First, create a 2 x 4 px rectangle
(#7F7974), give it a 2 px outline (#544F4B),
a highlight and some shadows, and then group (Control-G) and position all of its elements by aligning them to the bottom-left corner of the extension.
Step 17
Create the actual
headphone housing the driver, by drawing a 6
x 16 px rounded rectangle with a 2
px Corner Radius, which we will color using #68625E and then assign a 2 px outline (#544F4B).
Next, add the regular highlights and shadows, a couple of little 1 x 1 px squares to give it some
texture, and you’re done. Group the elements together using Control-G and move on to the final
step.
Step 18
Group all the elements of the left headphone together using the Control-G keyboard shortcut, and then
create a copy (Control-C > Control-F)
of it, which we will reflect (right
click > Transform > Reflect > Vertical) and position over to the
right side of the headband.
As always, don’t
forget to group (Control-G) all the
sections of the icon so that you won’t misplace them by accident.
Totally Awesome! We're Done!
We finally made it!
I hope you’ve managed to follow and understand the different steps required to
create these icons, and most importantly learned something new during the
process.
See you in the next one!