Today’s tutorial
is part of the Horror Movie Week special, in which I and everybody else at
Team Tuts+ got the chance to recreate a part of their favorite horror flick.
Since I’m a big fan of Jason, it was an easy choice for me, and boy we’ll have
fun with this one since we’ll get to recreate some cool props using Adobe Illustrator’s
most basic shapes and tools.
Now, without wasting any more time, let’s get our hands dirty and bring
these icons to life!
Oh, and don’t forget you can always expand the set by heading over to Envato Market, where you can find tons of beautifully crafted icon packs just waiting to be taken.
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
(72ppi) - 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 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 > bear trap
- layer 3 > hockey mask
- layer 4 > gear
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 Bear Trap Icon
First, 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 creating.
Step 1
Using the Rounded Rectangle Tool, create a 48 x 104 px shape with an 8 px Corner Radius, which we will color
using #A06C60 and then align to the center of our active drawing area.
Step 2
Select the shape that we’ve just created, and
then go to Object > Path > Offset
Path and create a 4 px Offset from
which we will then subtract the smaller shape using Pathfinder’s Minus Front
Shape Mode in order to get the trap’s jaw.
Step 3
Give the resulting
shape an outline using the Offset Path method,
by applying a 4 px Offset, which we
will then color using #3A322F in order to make it stand out.
Step 4
Draw another 52 x 108 px rounded rectangle (#FFFFFF)
with a 10 px Corner Radius, positioning it over the shapes that we’ve just created, and then give it a 2 px Offset, subtracting the smaller
shape from it afterwards.
Step 5
Since we’re going to
be using the white shape to create the highlight and shadow for the trap’s jaw,
we will have to adjust it by subtracting a 64 x 8 px rectangle (highlighted with orange) from it.
Step 6
Ungroup the resulting
shapes (right click > Ungroup)
and then select the top half and turn it into a highlight by setting its Blending Mode to Overlay and lowering its Opacity
to 30%.
Step 7
Select the bottom half and turn it into a
shadow by setting its color to black (#000000) and then lowering its Opacity to 20%.
Step 8
Fill in the empty
spaces from between the two detail shapes, by adding two 4 x 8 px rectangles (#000000) which we will adjust by lowering
their Opacity to 20%.
Step 9
Add two smaller 4 x 4 px rectangles over the shadows
that we’ve just created, coloring them using #3A322F.
Step 10
Use the Rectangle Tool (M) to create a 2 x 2 px rectangle (#FFFFFF) followed
by a larger 4 x 2 px one (#FFFFFF).
Position the two 2 px from one
another, and then turn them into highlights by setting their Blending Mode to Overlay and lowering their Opacity
to 30%, grouping (Control-G) and positioning a copy
on the top side of the jaw, and another one at the bottom.
Step 11
Start working on the trap’s metal teeth by
creating a 4 x 4 px circle (#3A322F)
which we will adjust by using the Anchor
Point Tool on its left and right anchor
points to make them slightly pointy. Then, create three copies of the
adjusted shape, at a distance of 4
px from one another, grouping (Control-G)
and positioning a set on the jaw’s top side and another one on its bottom
one.
Quick tip: also, at this point
it would be a good idea to select all of the shapes that we have so far and
group them together (Control-G).
Step 12
Grab the Rectangle Tool (M) and create the stock
bar by adding a 68 x 8 px shape (#70625E)
towards the center of the trap’s jaw, making sure to position it under (right click > Arrange > Send to Back),
giving it a 4 px thick outline (#3A322F)
using the Offset Path method.
Step 13
Add two 4 x 8 px rectangles (#000000) towards
the sides of the inner section of the bar, turning them into shadows by
lowering their Opacity to 20%.
Step 14
Next, add a couple of
2 px tall highlights towards the top
side of the stock bar. Use white (#FFFFFF) for the color, Soft Light for the Blending
Mode, and 60% for the Opacity.
Step 15
Using the Ellipse Tool (L) add two 4 x
4 px circles (#3A322F) to the sides of the stock bar’s inner section,
leaving a gap of 1 px between
them and the jaw’s outline.
Once you’ve added
them, select all the stock bar’s composing shapes and group them using the Control-G keyboard shortcut.
Step 16
Start working on the
bridge holding the plate, by creating a 4
x 68 px rectangle (#5E524E) which we will adjust by setting the Corner Radius of its bottom Anchor Points to 2 px. Give the resulting shape a 4 px thick outline (#3A322F) and then position the two towards the
upper section of the jaw, so that their outlines end up overlapping.
Step 17
Add a 4 x 4 px rectangle (#000000) towards
the upper section of the bridge, turning it into a shadow by lowering its Opacity to 20%.
Step 18
Add another 4 x 4 px rectangle (#3A322F) about 22 px from the shadow that we’ve just
created, and a 2 x 2 px circle (#3A322F)
towards the tip of the bridge, selecting and grouping (Control-G) all of its composing shapes afterwards.
Step 19
Create the trap’s
plate by drawing a 20 x 20 px circle
(#A06C60), which we will then position over the stock bar, giving it the same 4 px thick outline (#3A322F)
afterwards.
Step 20
Grab a copy (Control-C > Control-F) of the
plate’s fill shape (the 20 x 20 px circle)
and then subtract a smaller 16 x 16 px
one from it, setting the color of the resulting object to white (#FFFFFF), its Blending Mode to Overlay and its Opacity to
just 30%.
Step 21
Finish off the plate
by adding the little screws, using four 2
x 2 px circles (#3A322F), one for each of its “corners”.
Step 22
Cast an outer shadow
onto the stock bar by selecting the plate’s outline and applying a 2 px offset, which we will color using
black (#000000), lowering its Opacity to
20%.
Step 23
Since we want the
shadow to remain constrained to the stock bar’s surface, we will need to grab a
copy of its fill shape and use it as a Clipping
Mask (both shapes selected >
right click > Make Clipping Mask).
Step 24
Position the masked
shadow underneath the plate (right click
> Arrange > Send Backward), and then select all of the latter’s
composing shapes and group them together (Control-G).
Step 25
With the plate in
place, start working on the stock bar’s side sections by creating a 4 x 4 px rectangle (#5E524E) with a 4 px outline (#3A322F), which we will
position towards its left side.
Step 26
Add a 4 x 2 px highlight (color: white; Blending Mode: Overlay; Opacity:
30%) towards its upper section, and a 2
x 2 px circle (#3A322F) on top of all the other shapes, grouping (Control-G) the side section’s composing
elements afterwards.
Step 27
Create the stock
bar’s right section by grabbing and positioning a copy (Control-C > Control-F) of the one that we’ve just created
towards its right side.
Step 28
Start working on the
chain by creating the first link using a 10
x 16 px rounded rectangle (#A38989) with a 5 px Corner Radius, from which we will subtract a smaller 6 x 12 px rounded rectangle with a 3 px Corner Radius (#A38989). Give the
resulting shape a 2 px outline (#3A322F)
and then position the two shapes underneath the stock bar’s left side section.
Step 29
Give the link an
all-around highlight (color: white; Blending Mode: Overlay; Opacity: 30%), and then group (Control-G) all of its composing shapes,
and create the second link using a copy of it (Control-C > Control-F).
Step 30
Add the connecting
chain link by creating a 2 x 14 px rounded
rectangle (#BCAAAA) with a 1 px Corner
Radius and a 2 px outline (#3A322F)
which we will position between the two links that we’ve already created.
Step 31
Add a couple of
highlights (color: white; Blending Mode: Overlay; Opacity: 30%) and a bottom shadow (color: black; Opacity: 20%), and then select and group (Control-G) all of the connecting chain link’s composing shapes.
Step 32
Finish off the current icon by adding a 2 x 11 px rounded rectangle (#3A322F)
with a 1 px Corner Radius over the
stock bar’s left side section, aligning it to the upper section of the
little screw.
Once you’re done,
select all the icon’s composing shapes and group them together using the Control-G keyboard shortcut.
6. Create the Hockey Mask Icon
Assuming you’ve already locked the
previous layer and moved on up to the next one, zoom in on the second reference
grid, and let’s start working on the iconic mask.
Step 1
Using the Ellipse Tool (L), create the main shape
of the mask by drawing an 80 x 108 px ellipse
(#F7ECD2), which we will position in the center of the underlying active
drawing area, 4 px from its
bottom edge.
Step 2
Adjust the ellipse by
selecting its side anchor points using
the Direct Selection Tool (A) and
pushing them upwards by 6 px. You
can do this either manually with the help of the directional arrow keys, or by
using the Move Tool (right click > Transform > Move >
Vertical > -6 px).
Step 3
Give the resulting
shape a 4 px thick outline (#3A322F)
using the Offset Path method, removing any extra Anchor Points created in the process, and adjusting the shape as needed.
Step 4
Create a copy of the
smaller fill shape, and then subtract -2
px Offset from it using Pathfinder’s
Minus Front Shape Mode, coloring the
resulting shape using black (#000000) and lowering the Opacity to just 20%.
Step 5
Adjust the shadow
that we’ve just created, by selecting its inner bottom Anchor Point and moving it upwards by 4 px.
Step 6
Add the eye cutouts by creating two 16 x 16 px rounded
rectangles (#3A322F) with a 6 px Corner
Radius at a distance of 16
px from one another, and then position them over the mask, exactly 40 px from its outline.
Step 7
Adjust the cutouts by setting the Corner Radius of
their bottom corners to 8 px from
within the Transform panel.
Step 8
Start working on the
little circular cutouts by grabbing the Ellipse
Tool (L) and drawing a stack of three 4
x 4 px circles (#3A322F) vertically distributed 4 px from one another, which we will position about 8 px above the left eye.
Quick tip: I recommend you turn
on Pixel Preview mode (Alt-Control-Y) since it will be far
easier to position your shapes this way.
Step 9
Add another 4 x 4 px circle (#3A322F) on the
right side of the third cutout, at a distance of 4 px from it, making sure to position it slightly towards the
bottom by moving it 2 px downwards.
Step 10
Select and group (Control-G) the little cutouts that
we’ve added so far, and create and position a copy above the right eye cutout,
making sure to flip it vertically (right
click > Transform > Reflect > Vertical).
Step 11
Take your time, and add
the rest of the cutouts using the same 4
x 4 px circle (#3A322F), positioning them as seen in the reference image.
Once you’re done,
select and group them together (Control-G)
so that they won’t get separated by accident.
Step 12
Next, we’ll have to
grab the Pen Tool (P) and draw the
three colored decals using #F7734B as our Fill
color. So again, take your time, and use the reference image to add them
in.
Step 13
With the decals in
place, add the top section of the strap by creating an 8 x 16 px rectangle (#5E524E) with a 4 px outline (#3A322F) which we will align to the top edge of
the active drawing area.
Step 14
Create two 8 x 1 px rectangles (#3A322F) at a distance of 1 px from one
another, positioning them towards the upper section of the strap, leaving a 1 px gap.
Then, add a
thicker 8 x 2 px rectangle (#3A322F)
underneath them, at a distance of 2 px.
Step 15
Next, grab the Ellipse Tool (L) and draw a 2 x 2 px circle (#BCAAAA) which will
act as the bolt holding the strap, and give it a 2 px outline (#3A322F), grouping (Control-G) and positioning the two shapes in the center of the
space created by the thicker strap line that we’ve just created.
Step 16
Use the Rectangle Tool (M) to add a couple of
highlights between the strap’s detail lines using white (#FFFFFF) as your
fill color, Soft Light as your Blending Mode, and 60% for the Opacity.
Step 17
Finish off the top
strap by adding a 16 x 2 px rectangle
(#000000) underneath its outline, which we will turn into a shadow by lowering
its Opacity to 20%. Then, select all of its composing shapes and group them together
(Control-G).
Step 18
Start working on the
side straps, by creating a 2 x 8 px rectangle
(#5E524E) with a 4 px outline (#3A322F)
which we will position on the left side of the mask, Horizontally Center Aligning it to the eye cutout.
Step 19
Add a 1 x 4 px rectangle (#3A322F) in the center-right of the fill shape, and a top and side highlight (color: white; Blending Mode: Soft Light; Opacity:
60%), selecting and grouping (Control-G)
all of the strap’s composing shapes afterwards.
Step 20
Finish off the icon by
creating the right strap, using a copy (Control-C
> Control-F) of the one that we’ve just created, and positioning it onto
the right side of the mask, flipping it vertically (right click > Transform > Reflect > Vertical).
Then, simply select
all the icon’s composing shapes and group them using the Control-G keyboard shortcut.
7. Create the Gear Icon
We are now down to
our third and last icon, which is probably Jason’s favorite thing in the whole
world. Yup, we’re going to create some of the gear used by the character in the
movies, so make sure you’re on the right layer, and then zoom in on our last
reference grid, and let’s get started.
Step 1
Let’s start working
on the deadly kitchen knife by creating an 8 x 24 px rectangle (#A06C60), which we will adjust by setting the Radius of its bottom corners to 4 px. Give the resulting shape a 4 px thick outline (#3A322F) using the Offset Path method, and then position
both shapes towards the bottom edge of the active drawing area, at a distance
of 26 px from its left side.
Step 2
Add an 8 x 2 px rectangle (#FFFFFF) at the top of the handle’s fill shape, which we will turn into a highlight by
setting its Blending Mode to Overlay and lowering its Opacity to 30%.
Step 3
Grab the Pen Tool (P) and, using a 1 px thick Stroke (#3A322F) with
the Cap set to Round, draw some little wood lines. Take your time, and once you’re
done select and group them using the Control-G
keyboard shortcut.
Step 4
Add two 4 x 4 px circles (#3A322F) on top of
the handle, one towards the top and the other one towards the bottom, and then
select and group (Control-G) all of
its composing shapes together.
Step 5
Create the knife’s
blade by drawing a 16 x 168 px ellipse
(#BCAAAA) which we will adjust by removing its bottom Anchor Point. Give the resulting shape the usual 4 px thick outline (#3A322F) and then
align the two shapes to the right edge of the handle, making sure that the
outlines overlap.
Step 6
Create a copy (Control-C > Control-F) of the
blade’s fill shape, and then give it a -2
px offset which we will subtract from it, in order to create the shape for
the highlight. Adjust the resulting shape by changing its color to white
(#FFFFFF) and setting its Blending Mode
to Overlay while lowering its Opacity to 30%.
Step 7
Finish off the
kitchen knife by adding a 16 x 2 px rectangle
(#3A322F) to the lower section of its blade, grouping all its shapes together
afterwards (Control-G).
Step 8
Start working on the
little hacksaw by creating its blade using a 12 x 72 px rectangle (#BCAAAA)
with a 4 px outline (#3A322F), aligning both shapes to the top edge of the active drawing area, at a distance
of 6 px from the knife.
Step 9
Using the Rectangle Tool (M), create a 2 x 74 px shape which we will color
using #997E7E and then position over the left side of the blade.
Step 10
Add a 12 x 4 px rectangle (#FFFFFF) at the top of the blade, and turn it into a highlight by setting its Blending Mode to Overlay while lowering its Opacity
to 30%.
Step 11
Add another 2 x 70 px vertical highlight (color: white; Blending Mode: Overlay; Opacity:
30%), and position it towards the right side of the blade, just below the one
that we created in the previous step.
Step 12
Using the Rectangle Tool (M) add a 2 x 74 px vertical divider (#3A322F)
towards the left side of the blade, leaving a 2 px empty gap from the larger outline.
Step 13
Add a 2 x 2 px circle (#3A322F) in the
upper-right corner of the blade, leaving a 1
px gap around it. Once you’ve added the little bolt, select and group
(Control-G) all of the blade’s
elements together.
Step 14
Next, let’s create the little section from
underneath the blade that holds it to the handle.
First, draw a 4 x 4 px square (#A38989) with a 4 px outline (#3A322F) which we will position just below the blade.
Then, add a 4 x 2 px shadow (color: black; Opacity: 20%),
a 2 x 2 px circle (#3A322F) for a
bolt, and finally select and group (Control-G)
all its shapes.
Step 15
Create a 22 x 2 px rectangle which we will color
using #A38989, and then give it a 4 px outline
(#3A322F), positioning the shapes underneath the blade’s connector that we
created in the previous step, aligning them to its left side.
Step 16
Add a 22 x 1 px top highlight (color: white; Blending Mode: Overlay; Opacity:
30%) and a 4 x 2 px rectangle (#3A322F)
towards the bottom of the outline, and then select and group all of the
connector’s composing shapes using the Control-G
keyboard shortcut.
Step 17
Start working on the
actual handle by creating a 16 x 30 px rectangle
(#BCAAAA) (1) which we will adjust by setting the Radius of its top Anchor
Points to 2 px (2). Then,
subtract a 12 x 20 px rectangle from
its lower section (3), giving the resulting shape a 4 px thick outline (#3A322F) (4). Add a couple of highlights (color: white; Blending Mode: Overlay; Opacity:
30%) here and there (5), and a 4 x 4
px circle (#3A322F) in its upper-left corner (6).
Step 18
Continue adding
details to the handle by creating a 32
x 8 px rectangle (#BCAAAA) (1), which we will adjust by setting the Radius of its left corners to 4 px (2). Then, give the resulting
shape a 4 px outline (#3A322F), making sure to send it to the back (right
click > Arrange > Send to Back) of the handle’s fill shape that we
created in the previous step (3). Add a bunch of highlights (color: white; Blending Mode: Overlay; Opacity:
30%) (4 and 5), followed by six 2 x
8 px vertical rectangles (#3A322F) positioned 2 px from one another (5).
Finish off the handle by adding a 2 x 2 px circle (#3A322F) to its
rounded side (6) and then selecting and grouping (Control-G) all of its composing shapes.
Step 19
Once you have the
handle, position it in the lower section of the active drawing area, left
aligning it to the blade’s outline.
Step 20
Add the upper section
of the hacksaw holding the blade, by creating a 36 x 90 px rounded rectangle (#3A322F) with a 12 px Corner Radius, from which we will subtract a smaller 28 x 82 px one with an 8 px Corner Radius. Remove the left and
bottom sections that overlap the blade and handle, and then give the resulting
shape the usual 4 px thick outline (#3A322F).
Step 21
Finish off the icon by adding two 4 x 4 px shadows (color: black; Opacity: 20%) to the shape that we’ve just created, and then select
and group (Control-G) the hacksaw’s
shapes, before grouping the rest of the icon’s elements.
It’s a Wrap!
There you have it! A super-comprehensive tutorial on how to create an icon pack for one of
the goriest horror flicks ever made. I hope that you’ve found the steps easy to
follow, and most importantly learned a new trick along the way.
{excerpt}
Read More