Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From \$16.50/m

# How to Create a Friday the 13th Themed Icon Pack in Adobe Illustrator

Difficulty:IntermediateLength:LongLanguages:

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

• 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

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