By Andrei Stefan

Final product image

What You’ll Be Creating

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.

setting up a new document

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

    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

    setting up a custom grid

    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.

    adjusting the keyboard increment

    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.

    setting up the reference grids

    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.

    creating the main shape for the casio watch

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

    adding new anchor points to the watch icons main shape

    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.

    the watch icons main shape after adjustments

    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.

    creating the watchs outline using the offset path

    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.

    changing the color of the watchs outline

    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.

    adding the outline to the watchs screen

    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.

    adding the screen to the watch icon

    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.

    creating the watch screens inner 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.

    adding the two diagonal highlights to the watch icons screeen

    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.

    adding the gold decorative elements to the watch icon

    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.

    adding the hud elements to the watch icon

    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.

    adding the main shapes for the watchs numpad

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

    adding the inner shadow to the watchs numpad section

    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.

    adding the row of buttons to the watch icon

    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.

    adding shadows to the watchs buttons

    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.

    adding the vertical highlights to the watch icon

    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.

    adding the main shapes for the watchs side sections

    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.

    adding the little insertions to the watchs side sections

    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.

    adding a subtle shadow to the watchs side sections

    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.

    adding the golden button to the watch icon

    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.

    creating the main shape for the watchs top band piece

    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.

    adjusting the watch bands top section

    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.

    creating the bottom section of the watch band

    Step 25

    Finish off the icon by selecting and grouping all the composing
    sections of the watch using the Control-G
    keyboard shortcut.

    casio watch icon finished

    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.

    adjusting the polaroid cameras bottom section

    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.

    positioning the base shapes of the polaroid cameras lower section

    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.

    creating the exit tray for the polaroid camera

    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.

    adding the top door to the polaroid cameras photo tray

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

    adding a subtle shadow to the cameras tray

    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.

    adding the highlights to the cameras bottom tray

    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.

    creating the main shapes for the cameras upper section

    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.

    adjusting the second element of the cameras upper section

    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.

    adjusting the corners of the cameras top section

    Step 10

    Select all three shapes, and use Pathfinder’s
    Unite shape mode in order to combine
    them into a single larger shape.

    using pathfinder to create the upper section of the camera

    Step 11

    Use the Offset Path to give
    the new shape the usual 4 px outline
    (#544F4B).

    adding an outline to the cameras upper body

    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.

    changing the color of the cameras center shape in order to give it 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.

    adding two horizontal delimiter lines to the cameras upper body

    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.

    adding highlights and shadows to the cameras upper body

    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.

    adding two side lines to the cameras upper body

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

    creating the cameras lens

    Once you have all the pieces, group them
    together (Control-G) so that they
    won’t get repositioned by accident.

    adding the lens piece to the camera icon

    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.

    adding the mock up text lines to the camera icon

    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.

    adding the red button to the camera icon

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

    creating the cameras viewfinder

    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.

    adding the viewfinder to the camera icon

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

    creating the cameras dial

    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.

    adding the dial to the camera icon

    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

    adding the rainbow to the polaroid camera icon

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

    polaroid camera icon finished

    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.

    creating the walkmans base shapes

    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.

    adding the silver section to the walkman icon

    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.

    positioning the top horizontal line onto the walkman icon

    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.

    adding the base shapes for the walkmans cassette holder

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

    adding the ring like highlight to the walkmans cassette holder

    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.

    adding details to the walkmans cassette holder door

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

    adding highlights and shadows to the walkman icon

    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.

    adding detail elements to the walkman icon

    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.

    adding the top button to the walkman icon

    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.

    adding the side buttons to the walkman icon

    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.

    adding the little hinges to the walkman icon

    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.

    creating the headband for the walkman icon

    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.

    creating the main joint for the left headphone

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

    adding details to the left headband joint

    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.

    adding details to the left headband joint

    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.

    adding the lower extension to the left headband joint

    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.

    adding the magnet housing piece to the left headband joint

    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.

    adding the left ear piece to the headband

    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.

    sony walkman icon finished

    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!

    all icons finished

    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!

    Read more here:: How to Create a Retro Tech Icon Pack in Adobe Illustrator