It’s almost that special time of the year when the dead once again rise from their graves and walk among us, giving all living creatures a night to remember. So I thought it would be nice to give you a small treat in the form of a Halloween themed icon tutorial, using some of the most basic tools that Adobe Illustrator has to offer.
So grab a slice of that sweet pumpkin pie, and let’s get started!
Oh, and don’t forget you can always expand the pack by heading over to Envato Market where you'll find tons of Halloween themed icon packs.
1. Set Up a New Document
Since I’m more than 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 layer 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: grave
- layer 3: coffin
- layer 4: guillotine
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 when 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 Grave 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
Start working on the grave’s bottom section by grabbing the Rectangle Tool (M) and using it to
create a 90 x 10 px shape (#AFA0A0),
which we will position about 2 px from
the active drawing area’s lower section, leaving an 8 px space gap on its left side.
Quick tip: I recommend you use Pixel Preview mode (View > Pixel Preview or Alt-Control-Y) each time you have to deal with precise positioning, since it will be far easier to follow the steps this way.
Step 2
Give the shape
that we’ve just created athick
outline, by making a copy of it (Control-C> Control-F) which we will color using #2A2F35, and then adjust it by
flipping its Fill with a 4 px thick Stroke (Shift-X).
Once you’re done, select and group the two shapes (Control-G) since we will be using them again in the next step.
Quick tip:for this tutorial, we’re going to be creating all of the outlines using the Stroke Method, so I recommend you take a couple of minutes and go through my comparison of the two main methods for creating line icons, since it will probably answer all your questions.
Step 3
Create a copy of the shapes that we’ve just grouped (Control-C > Control-F) and position
them towards the right side, leaving a 6
px gap between them and the active drawing area. Since it will act as the
thicker side section, make sure to give it some depth by changing the color of
the fill shape to #917D7D.
Step 4
Add a slightly narrower 82 x 8 pxrectangle (#917D7D) with a 4 px outline
(#2A2F35) which we will group (Control-G)
and then position above the first shape that we’ve created, making sure that
the outlines overlap.
Step 5
Create a copy (Control-C > Control-F) of the two shapes from the previous step, and position the duplicates towards the right side of the active drawing area, leaving a 10 px gap between them.
Oh, and don’t forget to adjust the side fill shape’s color to something
a little bit darker (#726060).
Step 6
Start working on the gravestone by drawing a 64 x 98 px rectangle (#C4B8B8), which we will adjust by setting theCorner Radius of its top Anchor Points to 32 px within the Transform
Panel. Give it a 4 px outline (#2A2F35)
and then group (Control-G) and
center align the two shapes to the bottom section of the grave.
Step 7
Create the side section of the gravestone by drawing a 44 x 98 px rectangle (#917D7D), which
we will adjust by setting the Corner
Radius of its top-right Anchor Pointto 32 px. Add the 4 px thick outline (#2A2F35) using the Stroke method and then position the two
shapes towards the right side of the front section, leaving a 19 px space gap between them and the
active drawing area.
Step 8
Since at this point we have the main shapes of our icon, we can start adding little details to it.
Start by double clicking on the front section of the gravestone and
drawing the cross using a 24 x 8 px shape
(#2A2F35) for the horizontal line and an 8
x 42 px one (#2A2F35) for the vertical one. Group the two shapes (Control-G) and then align them to the
center of the underlying shape.
Step 9
Create the little name plate by drawing a 28 x 14 px rectangle (#917D7D) which we
will adjust by removing an 8 x 8 px circle
from each of its corners. Give the resulting shape an outline (#2A2F35), two 2 px tall rectangles (#2A2F35), and then position
it under the cross, at a distance of 12
px.
Step 10
Using the Ellipse Tool (L), create the main shape
of the garlic by drawing a 12 x 12 px circle
(#EAD3D3) (1) which we will adjust by moving its top Anchor Point towards the outside by 2 px (2). Sharpen the resulting tip by clicking on it using the Anchor Point Tool (3) and then give it
a 2 px thick outline (#2A2F35) (4).
Give the object some depth by adding an ellipse with 2 px thick Stroke (#2A2F35) (5) and then finish it off by drawing the little bottom line
sections using the Pen Tool(P) (5 and 6).
Step 11
Group all the garlic’s shapes together using the Control-G keyboard shortcut, and then position them onto the front section of the gravestone, leaving a 54 px gap towards the top, and a smaller 8 px one towards the right side.
Step 12
Grab the Pen Tool (P) and, using a 2 px thick Stroke (#2A2F35), draw the little rope
holding the garlic to the gravestone.
Step 13
Finish off the icon by adding little detail lines using the Pen Tool (P). Set your Stroke’s
Weight to 2 px using #2A2F35 for the color with the Cap set to Round, and
simply take your time and add line segments of different lengths to the front
and side sections of the icon.
Once you’re done, select all the icon's composing shapes and group them (Control-G) so that they won’t get separated by accident.
6. Create the Coffin 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 our little coffin icon.
Step 1
Create the front section of the icon by drawing a 72 x 72 px square (#F2A85F) followed by another 72 x 44 px rectangle (#F2A85F) just
above it. Unite the two into a single shape using Pathfinder’s Unite Shape
Mode, and then position the resulting shape 12 px from the left side of the active drawing area.
Step 2
Adjust the new shape by individually selecting each of its corners using the Direct Selection Tool (A), and horizontally pushing them towards the inside by 18 px using the Move Tool (right click > Transform > Move > and enter +18 or -18 depending on which side the Anchor resides on).
Step 3
Add a 4 px thick outline (#2A2F35)
to the adjusted shape using the Stroke method, and then select and group both of them (Control-G).
Step 4
Create the coffin’s side section by grabbing a copy (Control-C) of its front section, which
we will paste underneath it (Control-B), positioning it towards the right side, 10
px from the active drawing area’s edge, changing the color of the fill
shape to #C67F40.
Step 5
Grab the Ellipse Tool (L) and
create the front hole by drawing a 20 x
20 px circle which we will color using #C67F40. Give the shape a 4 px outline (#2A2F35) and then group
and position the two 16 px from
the top edge of the active drawing area.
Step 6
Add depth to the
front facing hole, by creating a copy of it (Control-C > Control-F) which we will move towards the right side
by 8 px, masking it using the circle
from underneath (select the shapes >
right click > Make Clipping Mask), and then adjusting it by changing the
color of the fill shape to #965C30.
Oh, and since we want the hole’s composing shapes to stick together, don’t forget to select and group them using the Control-Gkeyboard shortcut.
Step 7
Grab the Pen Tool (P) and
draw a 4 px thick horizontal line
segment (#2A2F35) over the coffin’s side section to add the required amount of depth
to it.
Step 8
With the line in place, add four 4
x 4 px bolts (#2A2F35), two above and two under it, leaving a 2 px space gap between them.
Step 9
Create the little spider by drawing a 6 x 8 px ellipse (#2A2F35) for the body and a smaller 4 x 4 px circle (#2A2F35) for the head,
which will slightly overlap it. Then, using the Pen Tool (P), draw the legs using a 2 px thick Stroke with
the color set to #2A2F35.
Step 10
Group (Control-G) and then position
the little spider onto the coffin’s front section, about 16 px from the hole, drawing the little
web line using a 2 px thick Stroke (#2A2F35).
Step 11
Finish off the
icon by adding the little detail line segments, as we did with the grave, with
the help of the Pen Tool (P). Use
the same 2 px thick Stroke (#2A2F35) with a Round Cap.
Once you’re done, select all of the icon’s composing shapes and group them together using the Control-G keyboard shortcut.
7. Create the Guillotine Icon
We are now down to the third and last icon from the pack, so make sure you’re on the right layer, and zoom in on its reference grid so that we can get started.
Step 1
Start working on the bottom section of the icon, by creating an 80 x 8 px rectangle which we will color
using #989E98, give a 4 px outline
(#2A2F35), and then group (Control-G). Position the two towards the bottom edge of the active drawing area, leaving
a 14 px space gap to their left
side.
Step 2
Create the side section by grabbing a copy (Control-C) of the shapes that we’ve just created and pasting it to
the back (Control-B), changing the
color of the fill shape to (#636566). Align the copy towards the right side
of the active drawing area, leaving
the same 14 px space gap.
Step 3
Create the top section of the guillotine by drawing an 80 x 12 px rectangle (#989E98) with a 4 px outline (#2A2F35) which we will
group (Control-G) and then use to
create a copy (Control-C > Control-B)
that we will align to the side section of the lower body, changing the color of
the fill shape to #636566.
Step 4
Grab the Rectangle Tool (M) and
draw a 6 x 96 px shape which we will
color using #989E98, and then give it a 4
px thick outline (#2A2F35) using the Strokemethod. Group (Control-G) and
position both shapes between the top and bottom sections of the guillotine,
at a distance of 20 px from the left
edge of the active drawing area.
Step 5
Give the leg that we’ve just created some depth by grabbing a copy
of it (Control-C > Control-B)
which we will align to its right side, changing the color of the fill shape to#3C4549 and then
adding a 4 px thick line segment (#2A2F35) on
top, making sure to select and group (Control-G)
them afterwards.
Step 6
Add the second leg using a copy (Control-C> Control-F) of the one that we’ve just created and positioning it towards the right at a distance of 18 pxfrom the edge of the active drawing area.
Step 7
Start working on the section that would normally hold the head of the
victim, otherwise known as the lunette, by creating a 56 x 28 px rectangle which we will color using #636566. Adjust the
shape by removing a 16 x 16 px circle
from its center, and then add a 4 px
thick outline (#2A2F35), centering it in the lower section of the legs.
Step 8
Add some depth to the lunette’s hole by creating an 18 x 20 px rectangle (#3C4549) (1) and
adding a 16 x 16 px circle which we
will use to create a cutout from its right side (2). Once you’ve made the
adjustments, give the resulting shape a 4
px outline (#2A2F35) (3) and then position both of them underneath the
lunette (right click > Arrange >
Send to Back).
Step 9
Grab the Pen Tool (P) and
draw two line segments connecting the hole to the sides of the lunette using a 4 px thick Stroke (#2A2F35). Once you’re done, select all of the lunette’s
composing shapes and group them using the Control-Gkeyboard shortcut.
Step 10
Create the blade
by drawing a 52 x 22 px rectangle (#C4B8B8)
which we will adjust by selecting and then pushing its bottom-right anchor
point towards the top by 8 px (right click > Transform > Move >
Vertical > -8).
Give the resulting shape a 4 px outline
(#3C4549) and then group (Control-G)
and position them both in the upper section of the guillotine.
Step 11
Add the little rope (#2A2F35) acting as the release handle by drawing it
using either the Rectangle Tool (M) or
the Pen Tool (P). Then group (Control-G) and position its composing
shapes towards the right side of the blade.
Step 12
Next, create the
little rat by using an 8 x 4 px rounded
rectangle (#2A2F35) with a 1 px Corner
Radius for the body, which we will adjust by setting the Radius of its top-left corner to 2 px. Add the head using a 4 x 4 px circle (#2A2F35), which we will
adjust by selecting its right Anchor
Point using the Direct Selection
Tool (A) and pushing it towards the right by 2 px.
Add the little ear using a 2 x 2
px circle (#2A2F35) and then draw the tail using the Pen Tool (P), grouping all of its shapes together (Control-G).
Step 13
Take your time and add the dripping blood using #DD5228 as your fill
color, giving the shapes a 2 px thick
outline (#2A2F35).
Step 14
Finish off the
icon by adding the little detail lines as we did with all the other icons,
using a 2 px thick Stroke (#2A2F35) with a Round Cap.
Then, once you’re done, select all of the icon’s composing shapes and group them using the Control-G keyboard shortcut.
The End
There you have it: a clean and straightforward tutorial on how to create an awesome looking Halloween themed icon pack. I hope you’ve managed to follow each and every step and most importantly learned a new trick along the way.
