Today I’ve put together a special little tutorial for all of you “Doctor Who” fans out there in which we’re going to learn how to create our very own props from the TV series, using some of the most basic shapes and tools that Illustrator has to offer.
You can always expand the pack by taking a quick look over at Envato Market, where you'll find tons of beautifully crafted icon packs at the press of a button.
Assuming you’re as
excited as I was when I wrote this piece, let’s get started!
1. Set Up a New Document
Since I’m sure that you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) using the following settings:
- Number of Artboards: 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
2. Set Up a Custom Grid
As you probably already know, Illustrator lets you take advantage of its powerful Grid System by setting it up using the lowest possible values, so that in the end you’ll have full control over your shapes since you can make sure they’re perfectly snapped to the underlying Pixel Grid.
Step 1
The settings that we’re interested in can be found under the Edit > Preferences> Guides & Grid submenu, and should be adjusted as follows:
- Gridline every: 1 px
- Subdivisions: 1
Quick tip: you can learn more about grids by reading this in-depth piece on how Illustrator’s Grid System works.
Step 2
Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode.
Now, since we’re aiming to create the icons using a pixel-perfect workflow, I strongly recommend you go through my how to create pixel-perfect artwork tutorial, which will help you widen your technical skills in no time.
3. Set Up the Layers
With the New Document created, it would be a good idea to start layering our project, since this way we can maintain a steady workflow by focusing on one icon at a time.
That being said, bring up the Layers panel, and create a total of four layers, which we will rename as follows:
- layer 1: reference grids
- layer 2: tardis
- layer 3: sonic screwdriver
- layer 4: dalek
4. Create the Reference Grids
The Reference Grids (or Base Grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.
Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make on you start a new project, since you’ll always want to start from the smallest possible size and build on that.
Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 128 x 128 px, which is a fairly large one.
Step 1
Start by locking all
but the reference grid layer, and then grab the Rectangle Tool (M) and create a 128 x 128 px orange (#F15A24) square, which will help define the
overall size of our icons.
Step 2
Add another smaller 120 x 120 px one (#FFFFFF) which will
act as our active drawing area, thus giving us an all-around 4 px padding.
Step 3
Group the two squares composing the reference grid using the Control-G keyboard shortcut, and then create two copies at a distance of 40 px from one another, making sure to align them to the center of the Artboard.
Once you’re done, lock the current layer and move on to the next one where we’ll start working on our first icon.
5. Create the Tardis Icon
We’re going to kick things off by creating the Doctor’s time machine / spacecraft, so make sure you’re on the right layer, that would be the second one, and then zoom in on the first reference grid so that you can have a better view of what you’re going to be doing.
Step 1
Create the base of
the telephone booth by drawing a 64 x 6
px rectangle, which we will color using #3579B7 and then horizontal center
align to our active drawing area, positioning it 2 px from its bottom edge.
Step 2
Select the Add Anchor Point Tool, and use it to add two new anchor points towards the rectangle’s upper section (at about 2 pxfrom its top edge). Once you’re done, adjust the shape by individually selecting its top anchor points using the Direct Selection Tool (A), and pushing them towards the inside by 2 px using the Move Tool (right click > Transform > Move > Horizontal > 2 px).
Step 3
Give the resulting shape a 2 px thick outline by using the Offset Path method. First select the shape and then go to Object > Path > Offset Path and enter 2 pxinto the Offset value field.
Step 4
Change the fill color of the larger outline to#161B1E in order to make it stand out.
Step 5
Add a darker section
towards the upper side of the blue shape, by creating a 68 x 4 px rectangle (#29537A) which we will horizontal center align to its top edge, masking it afterwards
(both shapes selected > right click> Make Clipping Mask) using a copy of it (Control-C > Control-F).
Step 6
Separate the darker
section that we’ve just created from the rest of the blue shape by adding a 64 x 2 px rectangle (#161B1E) right
under it which will act as a horizontal divider/ outline.
Step 7
Grab the Rectangle Tool (M) and add a set of
highlights by drawing a 2 x 2 px square
(#FFFFFF) followed by a wider 4 x 2 px rectangle
(#FFFFFF), which we will position 2
px from one another. Adjust the shapes by setting their Blending Mode to Soft Light and lowering their Opacityto 60%, making sure to group (Control-G) and position them towards
the right side of the blue base, exactly 38 px from the active drawing area’s right edge.
Step 8
Grab a copy (Control-C > Control-F) of the highlights that we’ve just created and position it on the left side of the blue base, 42 px from the active drawing’s area left edge.
Oh, and once you have it place, you can select all the shapes that we have so far and group them (Control-G) so that they won’t get separated by accident.
Step 9
Create the upper
section of the booth by drawing a 58 x
90 px rectangle (#3579B7) which we will position above our base, giving it
the same 2 px thick outline (#161B1E).
Step 10
Add a 58 x 2 px rectangle (#FFFFFF) at the upper edge of the blue shape that we’ve just created, and turn it into a
highlight by setting its Blending Mode toSoft Light while lowering its Opacity to 60%.
Step 11
Create the inner
section of the time machine by drawing a 46
x 78 px rectangle which we will color using #29537A and give a 2 px thick outline (#161B1E), positioning them both just above the base.
Step 12
Add a 46 x 2 px rectangle towards the upper
section of the blue shape that we’ve just created, and two 1 x 76 px ones towards its left and right side, coloring all three
using black (#000000). Turn them into subtle shadows by lowering their Opacity to 40%, selecting and grouping (Control-G)
both them and the two underlying shapes afterwards.
Step 13
Start working on the
left door by creating an 18 x 74 px rectangle, which we will color using #3579B7, give a 2
px thick outline (#161B1E), and then position towards the left side of the
inner section that we’ve just created, at a distance of 2 px from its outline.
Step 14
Using the Rectangle Tool (M), create four 10 x 12 px shapes (#29537A) with a 2 px outline (#161B1E) which will act
as small engraved panels, and then position them onto the door, leaving a 2 px vertical gap between them.
Step 15
Change the first
panel’s color to #D8D2BA, and then add a couple of 2 px thick window lines (#161B1E), two vertical and two horizontal, to turn it into a window.
Step 16
Add three 10 x 1 px rectangles (#000000) underneath the window lines that we’ve just created (right click > Arrange > Send Backward),
and then turn them into shadows by lowering their Opacity to 30%.
Once you’re done, select and group all of the window’s composing elements using the Control-Gkeyboard shortcut.
Step 17
Take a moment and focus on the rest of the panels by adding a 10 x 1 px shadow (color: black; Opacity: 40%) towards their top edge and a 10 x 1 px highlight (color: white;Blending Mode: Soft Light; Opacity: 60%) towards their bottom edge.
Once you have them in place, individually select and group them to their underlying panel using the Control-G keyboard shortcut.
Step 18
Add a 18 x 2 px rectangle (#FFFFFF) towards
the upper section of the door, and four sets of 2 px thick rectangles, one 2
x 2 px and another 4 x 2 px, positioned 2 px from one another. Select them and
turn them into subtle highlights by setting their Blending Modes to Soft Lightwhile lowering their Opacity to 60%.
Step 19
Select and group all of the left door's composing shapes together, and then use a copy of it (Control-C > Control-F) to create the right door.
Step 20
Add the little piece
of paper to the left door’s second panel, by creating a 6 x 8 px rectangle (#D6D3CC) with a 2 px outline (#161B1E). Draw three 1 px thick rectangles (#161B1E) positioned 1 px from one another, which will act as text lines, and then
select and group all of the paper’s shapes together (Control-G).
Step 21
Using the Rounded Rectangle Tool add the handles
to the doors by creating a 4 x 8 px shape
(#161B1E) with a 1 px Corner Radius
which we will position over their overlapping outlines, vertical center aligning it to the second panels.
Step 22
With the handles in place, add a 2 x 2 px circular lock (#161B1E) to the
right door's left side, positioning it between its second and third panel.
Once you have it in place, select it, the doors and the handle, and group them together using the Control-G keyboard shortcut.
Step 23
Create the upper
section of the phone booth by drawing a 50
x 10 px rectangle (#3579B7), give it 2
px thick outline (#161B1E), and then position them both above the doors.
Step 24
Add a 42 x 2 px rectangle (#394954) with a by
now standard 2 px thick outline (#161B1E), and position them both in the center of the blue shape that we’ve just
created.
Step 25
Take a couple of moments and add some highlights (color:white; Blending Mode: Soft Light; Opacity: 60%) and shadows (color: black; Opacity: 40%) using the reference image as a positioning guide.
Step 26
Grab the Rectangle Tool (M) and create a 50 x 2 px shape, which we will color
using #29537A, give a 2 px thick
outline (#161B1E) and then position both shapes on top of the telephone booth’s
main shape.
Step 27
Add a 50 x 1 px shadow (color: black; Opacity: 40%) towards the bottom section of the shape that we’ve just created, and a set of highlights (color: white; Blending Mode: Soft Light; Opacity:60%) towards its right side using a 2 x 1 px rectangle and a wider 4 x 1 px one positioned 2 px from one another.
With the details in place, select and group all the section’s composing shapes using the Control-G keyboard shortcut.
Step 28
Add a smaller 42 x 2 px section (#22415B) above the
one that we’ve just created, giving it a 2
px outline (#161B1E) and the same details (highlights and shadow), grouping
(Control-G) them all afterwards.
Step 29
Add the small headlight to the roof of the
telephone booth, by creating a 4 x 6 px rectangle
(#D8D2BA) (1) with a 2 px outline (#161B1E)
(2) on top of which we will add a 4 x 2
px horizontal divider (#161B1E) followed by a 2 x 4 px vertical one (#161B1E) (3). Add some subtle shadows (color: black; Opacity: 40%) to the yellow shape’s top section and horizontal
divider, making sure to position them underneath (right click > Arrange > Send Backward) (4).
Finish off the
headlight by adding a 10 x 8 px ellipse
(#161B1E) (5) which we will adjust by removing its bottom anchor point (6).
Step 30
Select and group (Control-G) all of the headlight’s composing shapes together, and then position them towards the top of the time machine, horizontal center aligning them.
Step 31
Add the telephone
booth’s left side section, by creating a 1
x 10 px rectangle which we will color using #29537A, give a 2 px outline (#161B1E), and then group (Control-G) and align to the upper
section of its main body.
Step 32
Finish off the icon by grabbing a copy (Control-C > Control-F) of the side section that we’ve just created and positioning it on the right side of the booth’s body.
6. Create the Sonic Screwdriver Icon
Once we’ve finished working on the first icon, we can lock its layer and move on to the second one where we're going to create the iconic sonic screwdriver from the tenth doctor.
So assuming you’ve already zoomed in on its reference grid, let’s get started.
Step 1
Grab the Pen Tool (P) and create the bottom
section of the screwdriver by drawing a 12
x 12 px square, which we will color using #4B4E4F and then position 2 px from the active drawing area’s
bottom edge.
Step 2
Adjust the square by adding two new side anchor points at 2 px from its top edge (2), and then pushing its bottom ones towards the inside by 2 px (2). Individually select the side anchors that we’ve just created, and then use the Convert Selected Anchor Points to Smooth option, slightly adjusting their curvature using the little handles (3).
Once you’re done,
give the shape a 2 px thick outline
(#161B1E) using the Offset Path method
(Object > Path > Offset Path > and
enter 2 px into the Offset value field) (4).
Step 3
Add a 12 x 2 px rectangle (#161B1E) on top of
the shapes that we’ve just created, positioning it 2 px from the bottom section of the outline.
Step 4
Continue adding details to the current
section by creating and positioning a 4
x 2 px rectangle (#4B4E4F) on the upper edge of the larger grey shape (1). Give
it the usual 2 px thick outline (#161B1E)
and send it to the back (right
click > Arrange > Send to Back) (2) and then add a 2 x 2 px square (#161B1E) on each side
of the larger outline (3).
Finally, add a couple of horizontal and vertical highlights (color:white; Blending Mode: Soft Light; Opacity: 60%) (4) and then select and group (Control-G) all the shapes together.
Step 5
Add a 10 x 6 px rectangle (#C6BABA) at the top of the section that we’ve just added details to (1), and then adjust
it by adding two new anchor points so
that we can push its top ones towards the inside by 2 px (2).
Give the resulting shape a 2 px outline (#161B1E) and then send them both to the back (right click > Arrange > Send to Back)
(3), adding some subtle highlights (color:white; Blending Mode: Normal; Opacity: 60%) as seen in the reference
image (4). Finally, select and group (Control-G)all its composing elements.
Step 6
Add another 8 x 2 px rectangle (#847F80) with a 2 px outline (#161B1E) above the
connector segment that we’ve just created, making sure that their outlines
overlap.
Step 7
Give the segment an 8 x 1 px shadow (color: black; Opacity: 40%)
at the top, and a smaller 4 x
1 px insertion (#161B1E) at the bottom which we will adjust by
individually selecting and pushing its top anchor
points towards the inside by 1 px selecting
and grouping (Control-G) all the
shapes afterwards.
Step 8
Using the Rectangle Tool (M), create the
screwdriver’s handle using a 12 x 46 px rectangle
(#C6BABA) which we will adjust by setting the Corner Radius of its bottom corners to 2 px and then giving it a 2
px outline (#161B1E).
Step 9
Add a 12 x 2 px rectangle (#FFFFFF) at the top of the handle’s fill shape, which we will turn into a highlight
by lowering its Opacity to 60%.
Step 10
Add the slider’s
track using a 2 x 20 px rectangle (#161B1E)
in the center of the handle, which we will align to its upper section.
Step 11
Create the slider
button using a 4 x 6 px rectangle
which we will color using #847F80, give a 2
px outline (#161B1E) a 2 x 2 px circle
(#161B1E) in its bottom half, and a
highlight (color: white; Blending Mode: Soft Light; Opacity: 80) grouping (Control-G)
and positioning them underneath the track that we created in the previous
step.
Step 12
Finish off the handle by adding an 8 x 2 px shadow (color: black; Opacity: 40%) underneath its button, and some vertical highlights (color: white; Opacity: 60%) on its right side, selecting and grouping (Control-G) all its composing shapes afterwards.
Step 13
Start working on the
screwdriver’s top connector by creating a 12
x 6 px rectangle which we will color using #847F80 and then position above
the handle’s outline.
Step 14
Adjust the shape that
we’ve just created, by adding two side anchor
points at a distance of 2 px from
its bottom edge (1), and then individually selecting and moving its top ones
towards the inside by 2 px (1). Give
the resulting shape a 2 px thick
outline (#161B1E) (2), a 14 x 2 px horizontal
divider (#161B1E) (3) and a couple of vertical and horizontal highlights (color: white; Blending Mode: Soft Light; Opacity:80%) (4) selecting and grouping (Control-G)
all its shapes afterwards.
Step 15
Using almost the same process, create another section using a 10 x 6 px rectangle (#847F80) as your starting point. Add a set of
shadows (color: black; Opacity: 40%) instead of the horizontal
highlights, and also add a small 4 x 1 px rectangle
(#161B1E) towards its bottom section, which we will adjust by pushing its top anchor points towards the inside by 1 px, grouping (Control-G) all the shapes afterwards.
Step 16
Start working on the
screwdriver’s head by creating a 12 x
18 px rounded rectangle with a 1 px
Corner Radius which we will color using #C6BABA and then position above the
segment from the previous step.
Step 17
Adjust the shape that
we’ve just created by cutting out a 10 x
12 px rounded rectangle with a 3 px
Corner Radius from its lower section using Pathfinder’s Minus Front
Shape Mode, giving the resulting shape a 2 px thick outline (#161B1E).
Step 18
Give the
screwdriver’s head a couple of horizontal and vertical highlights (color: white; Opacity: 60%) and then add a 4
x 8 px rectangle (#161B1E) in the center of the empty space, selecting
and grouping (Control-G) all its
composing shapes afterwards.
Step 19
Using the Rectangle Tool (M), create a 10 x 1 px shape (#847F80) with a 2 px thick outline (#161B1E) and a 4 x 1 px subtle shadow (color: white; Blending Mode: Soft Light; Opacity:80%), grouping (Control-G) and
positioning them above the screwdriver’s head.
Step 20
Create the enhanced emitter lens using a 6 x 6 px circle (#3579B7), with a 2 px outline (#161B1E) and a 1 px thick circular highlight (color: white; Blending Mode: Soft Light; Opacity:60%) which we will select and group (Control-G)
afterwards.
Then select all the screwdriver’s composing sections and group (Control-G) those as well.
Step 21
Start working on the
wooden stand by creating a 28 x 92 px rectangle
(#D69A72) with a 2 px outline (#161B1E)
which we will align to the center of the underlying drawing area, making
sure to position them both underneath the screwdriver itself (right click > Arrange > Send to Back).
Step 22
Create a slightly
larger 36 x 100 px rectangle, color
it using #B77855, and then give it a 2
px outline as well (#161B1E), positioning them underneath the other two
shapes of the stand (right click >
Arrange > Send to Back).
Step 23
Add a 36 x 2 px lighter rectangle (#D69A72)
at the top edge of the stand’s outer section, and another 36 x 2 px darker one (#995C3D) at the bottom.
Step 24
Use the Pen Tool (P) to draw four diagonal
rectangles (#161B1E) in the corners of the stand to give it a sense of
depth.
Step 25
Add the stand’s
extensions holding the device, by creating a 20 x 4 px rectangle (#4B4E4F) with a 2 px outline (#161B1E), a top-facing highlight (color: white; Blending Mode: Soft Light; Opacity:60%), one 2 x 2 px circle (#161B1E)
to each side, and a 24 x 2 px shadow
(color: black; Opacity: 40%) underneath its outline.
Group (Control-G) the shapes, and then create a copy (Control-C > Control-F) which we will position 50 px from the original, grouping (Control-G) and then vertical center aligning them to the underlying stand.
Step 26
Finish off the stand and the icon itself by adding a 28 x 2 px horizontal highlight (color: white; Blending Mode: Soft Light; Opacity:80%) to the front section’s top, a vertical 2 px wide one towards its right side, and a small shadow (color: black; Opacity: 40%) underneath the device’s head section.
Finally group (Control-G) the stand’s elements, and then the entire icon, locking the current layer afterwards.
7. Create the Dalek Icon
We are now down to our third and last icon, which is the iconic Dalek robot that appeared numerous times during the show's lifespan. That being said, make sure you’re on the last layer, and zoom in on its reference grid so that we can get started.
Step 1
Using the Rectangle Tool (M), create a 64 x 12 px shape (#4B4E4F) which we
will adjust by adding two side anchor
points at 4 px from its top
edge, pushing the upper onestowards
the inside by 4 px. Give the
resulting shape a 2 px thick outline
(#161B1E) and then position both shapes at the bottom of the active
drawing area.
Step 2
Start adding detail to the base by adding
a 64 x 2 px horizontal divider (#161B1E)
at the top (2), and a 64
x 2 px highlight (color: white; Blending Mode: Soft Light; Opacity: 60%) right under it (3). Add
three 2 px wide vertical dividers (#161B1E),
tilting the upper section of the side ones towards the inside (4), and two
pairs of vertical highlights between them (5).
Finally, select and group all the composing shapes together using the Control-G keyboard shortcut.
Step 3
Create the Dalek’s
lower body using a 54 x 52 px rectangle
(#88A2A8) which we will adjust by adding two side anchor points to both its top and bottom edge, pushing the top ones
towards the inside by 8 px. Give the
resulting shape a 2 px outline (#161B1E)
and then position both shapes at a distance of 52 px from the active drawing area’s top edge, sending them to the
back of the base (right click >
Arrange > Send to Back).
Step 4
Add a 40 x 2 px shadow (color: black; Opacity: 40%) towards the body’s upper section, leaving a 2 px empty space gap, and then mask it using a copy of the underlying shape as a Clipping Mask (both shapes selected > right click > Make Clipping Mask).
Step 5
Add the vertical line
dividers using three 2 x 50 px rectangles (#161B1E) positioned 12 px from one another,
which we will align to the shadow that we’ve just created.
Step 6
Adjust the side dividers by individually selecting and moving their lower anchor points towards the outside by 6 px.
Step 7
Next, add the little
spherical shapes to the Dalek’s body, using a 4 x 4 px circle (#C5D3D8) with a 2 px thick outline (#161B1E) and a top half highlight (color: white; Opacity: 60%). Take your time and create four rows of spheres, positioning them as seen in the reference image, at a vertical distance of 4 px from one another.
Step 8
With the spheres in place, use a copy of their outlines to create the down-facing shadows (color: black; Opacity: 40%), making sure to position them underneath (right click > Arrange > Send Backward).
Step 9
Create the upper section of the Dalek’s
body, using a 42 x 24 px rectangle
(#C5D3D8) which we will adjust using the same process used for the lower
body, only this time move the top anchor points towards the inside by just 4 px.
Give the resulting
shape a 2 px outline (#161B1E) and
then position both shapes above the lower body’s shadow.
Step 10
Add a 34 x 2 px rectangle (#FFFFFF) at the top of the blue shape that we’ve just created, and then turn it
into a highlight by setting its Blending
Mode to Soft Light while
lowering its Opacity to 80%.
Step 11
Next add a 36 x 2 px horizontal divider (#161B1E)
right under the highlight that we’ve just created, and another slightly wider 42 x 2 px one (#161B1E) towards its
bottom, leaving a 2 px gap from the larger outline.
Step 12
Add a set of vertical highlights (color: white; Opacity: 60%) under the bottom vertical divider that we’ve just created, using a 2 x 2 px square and a 4 x 2 px rectangle positioned 2 px from one another, which we will group (Control-G) and position on the right side of the body.
Step 13
Add the middle
insertion by creating a 10 x 4 px rectangle
(#6D8E93) which we will adjust by individually selecting and pushing its top anchor points towards the inside by 1 px. Give the resulting shape a 2 px outline (#161B1E), a top half
shadow (color: black; Opacity: 40%) and then group all its
composing shapes together (Control-G), positioning them above the bottom horizontal divider.
Step 14
Create the Dalek’s
left “arm” using an 8 x 8 px square
(#4B4E4F) with a 2 px thick outline
(#161B1E). Add an 8 x 2 px top
shadow (color: black; Opacity: 40%) and a 6 x 6 px circle (#161B1E) in the
middle, and then group (Control-G)
and position the shapes on the left side of the insertion.
Step 15
Add the right “arm”,
by grabbing a copy (Control-C >
Control-F) of the one that we’ve just created and positioning it towards
the right side of the insertion. Then isolate the group by double clicking on
it, and add a 4 x 4 px circle (#88A2A8)
followed by a smaller 2 x 2 px (#161B1E)
one in its center.
Step 16
Create the upper
elements of the current section of our Dalek’s body, using an 8 x 6 px rectangle (#7E989E) with a 2 px outline (#161B1E) for the center
piece, and two 2 x 6 px rectangles
(#7E989E) with the same 2 px thick
outline (#161B1E) for the side ones, which we will position 2 px from one another.
Step 17
Add a 2 px tall highlight (color: white; Blending Mode: Soft Light; Opacity:80%) to each of the elements that we’ve just created, a 4 x 2 px rectangle (#161B1E) towards
the upper section of the center piece, and a set of 2 x 2 px circles (#161B1E) towards its bottom, individually
grouping (Control-G) each of the
three sections afterwards.
Step 18
Take your time and add some subtle shadows (color: black;Opacity: 40%) underneath the three elements that we’ve just added details to, and a 4 x 4 px highlight (color: white;Opacity: 40%) towards the center of the current body section.
Step 19
Finish off the
current section by drawing the side elements (#161B1E) using the Pen Tool (P), and once you’re done
select and group all its composing shapes using the Control-G keyboard shortcut.
Step 20
Start working on the
robot’s neck, by creating a 30 x 14 px rectangle
(#4B4E4F) which we will adjust using the same process used for both
sections of the body, only this time we’re going to push its top anchor points towards the inside by
just 1 px. Give the resulting shape
a 2 px outline (#161B1E) and then
position both shapes above the body, making sure to send them to the back (right click > Arrange > Send to Back).
Step 21
Using the Rectangle Tool (M), add two 38 x 2 px horizontal dividers (#161B1E)
positioned 2 px from one another and from the bottom edge of the neck’s outline.
Step 22
Next, add two 2 x 10 px vertical dividers (#161B1E)
positioned 8 px from one another,
and place them in the center of the neck, aligning them to the bottom
edge of its outline.
Step 23
Add some details to
the horizontal dividers by creating six 2
x 1 px rectangles (#161B1E) which we will position 2 px from the vertical ones.
Step 24
Finish off the neck section by adding three 30 x 1 px shadows (color: black; Opacity: 40%) which we will position as seen in the reference image, selecting and grouping (Control-G) all the shapes afterwards.
Step 25
Start working on the
robot’s head by creating a 34 x 28 px ellipse
(#C5D3D8) which we will cut in half by removing its bottom anchor point. Give the resulting shape
a 2 px thick outline using the Offset Path method, and then position
them both above the neck section.
Step 26
Give the head a 2 px thick highlight, by creating a
copy (Control-C > Control-F) of
the blue shape and subtracting a 30 x 24
px ellipse from it. Color the resulting shape using white (#FFFFFF) and
then lower its Opacity to 60%.
Step 27
Create the enclosure holding the “eye”
using a 10 x 6 px rectangle (#161B1E)
which we will adjust by pushing its top anchor
points to the center by 2 px. Add
an 8 x 8 px circle (#161B1E) towards
its top edge and a 4 x 1 px rectangle
(#161B1E) above it.
Once you’re done, position all three shapes towards the upper section of the head, leaving a 4 px space gap from the bottom.
Step 28
Finish off the eye by adding a 4 x 4 px circle (#66A2C6)
on top of the one that we’ve created in the previous step, giving it a top half
highlight (color: white; Blending Mode: Soft Light; Opacity: 60%) and then selecting and grouping (Control-G) all its composing shapes
afterwards.
Step 29
Add a 6 x 2 px rectangle (#161B1E) at the bottom of the head, and a 2
x 2 px circle (#161B1E) positioned 2
px from both its left and right side.
Step 30
Finish off the icon by drawing the head’s two horns using the Pen
Tool (P) with the fill color set to (#161B1E). Once you’re done, group all
its composing shapes using the Control-Gkeyboard shortcut.
All Done!
I’m going to be honest, it was a longer journey than I initially expected, but with some patience I’m sure you’ll get there.
That being said, I hope you’ve found the steps easy to approach and most importantly learned something new during the process.
