Advertisement
  1. Design & Illustration
  2. Icon Design
Design

How to Create a Retro Tech Icon Pack in Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:
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:

  1. reference grids
  2. casio watch
  3. polaroid camera
  4. 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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.