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 and Snap to Pixel options found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode (if you’re using an older version of the software).

Now, if you’re new to the whole “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. How to Set Up the Layers

Once we’ve set up our document, it would be a good idea to structure our project using several layers, 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 five layers, which we will rename as follows:

layer 1: reference grids

layer 2: first snowflake

layer 3: second snowflake

layer 4: third snowflake

layer 5: fourth snowflake

4. How to 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 once 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 64 x 64 px, which is a fairly large one.

Step 1

Start by locking all but the “reference grids” layer, and then grab the Rectangle Tool (M) and create a 64 x 64 px orange (#F15A24) square, which will help define the overall size of our icons.

Step 2

Add a smaller 56 x 56 px one (#FFFFFF) which we will position on top of the previous shape, since it will act as our active drawing area, thus giving us an all-around 4 px padding to work with.

Step 3

Select and group the two squares together using the Control-G keyboard shortcut, and then create the remaining grids using three copies (Control-C > Control-F three times) spaced 28 px horizontally from the original. Once you have all the reference grids, group (Control-G) and then center align them to the underlying Artboard, making sure to lock the current layer before moving on to the next one.

5. How to Create the First Snowflake Icon

Assuming you’ve successfully managed to create the little reference grids, move on to the next layer (that would be the second one), and let’s kick off the project by creating the first flake.

Step 1

Create the vertical section of the snowflake using a 52 px tall 4 px thick Stroke line with a Round Cap, which we will color using #7FD7E5 and then center align to the empty active drawing area.

Step 2

Switch over to Pixel Preview mode (Alt-Control-Y), and then draw the v-shaped crystal formation using a 4 px thick Stroke (#7FD7E5) with a Round Cap, which we will position as seen in the reference image.

Step 3

Create the bottom
detail using a copy (Control-C >
Control-F) of the one that we’ve just finished working on, which we will horizontally
reflect (right click > Transform >
Reflect > Horizontal) and then position on the opposite side of the
active drawing area. Once you’re done, select and group all three shapes
together using the Control-G
keyboard shortcut.

Step 4

Create the flake’s
vertical section using a copy (Control-C
> Control-F) of the one that we’ve just grouped, which we will rotate at
a 90º angle using the Rotate tool (right click > Transform > Rotate > 90º).

Step 5

Add the left diagonal
section using another copy (Control-C
> Control-F) of the vertical one, which we will rotate at a 45º angle (right click > Transform > Rotate > 45º), as seen in the
reference image.

Step 6

Make sure that the
rotated shapes are perfectly snapped to the Pixel Grid by switching over to Pixel Preview mode (Alt-Control-Y)
and then individually selecting and positioning them back onto the grid with
the help of the Direct Selection Tool
(A).

Step 7

Finish off the current
snowflake by creating the right diagonal section using a copy (Control-C > Control-F) of the one
that we’ve just finished
working on, which we will vertically reflect (right click > Transform > Reflect > Vertical). Once you’re
done, select and group (Control-G)
all of the strokes together before moving on to the next one.

6. How to Create the Second Snowflake Icon

Assuming you’ve finished working on the
first icon, move on to the next layer (that would be the third one), and let’s start
working on our second snowflake.

Step 1

Create the vertical
section using a 36 px tall 4 px thick Stroke line with a Round Cap,
which we will color using #7FD7E5 and then center align to the underlying
active drawing area.

Step 2

Add the top and bottom end sections using two 8 x 8 px circles with a 4 pxthick Stroke (#7FD7E5), which we
will position as seen in the reference image.

Step 3

Draw the two detail segments using a 4 px thick Stroke (#7FD7E5)
with a Round Cap, using the
reference image as your main guide. Take your time, and once you’re done, select
and group (Control-G) all of the
current shapes before moving on to the next step.

Step 4

Create the flake’s horizontal section using a copy (Control-C > Control-F) of the shapes
that we’ve just grouped, and then rotate them using a 90º angle (right click >
Transform > Rotate > 90º).

Step 5

Finish off the current icon by adding its diagonal sections using a copy
(Control-C) of the ones from the previous
snowflake, which we will paste (Control-F)
onto the current layer, making sure to align them as seen in the reference
image. Once you’re done, select and group (Control-G)
all of its composing shapes, before moving on to the next one.

7. How to Create the Third Snowflake Icon

By now you know the drill, so make sure
you’ve positioned yourself onto the next layer (that would be the fourth one),
and let’s jump straight into it.

Step 1

Start by creating the
center section of the snowflake using a 12
x 12 px circle with a 4 px thickStroke (#7FD7E5), which we will
position in the center of the third reference grid.

Step 2

Start working on the vertical section, by creating a 16 px tall 4 px thick Stroke
segment (#7FD7E5) with a Round Cap,
which we will position onto the circle’s top anchor point as seen in the
reference image.

Step 3

Turn on Pixel
Preview mode (Alt-Control-Y),
and then draw the top v-shaped segment, using a 4 px thick Stroke (#7FD7E5) with a Round Cap,
making sure to start from the vertical segment’s top anchor point and go all
the way up to the active drawing area’s top edge.

Step 4

Take a couple of moments and draw the remaining
segments, making sure to maintain a 4 px gap between their end anchor points, and 8 px between their center ones. Once you’re done, select and group
(Control-G) all four shapes together
using the Control-G keyboard
shortcut.

Step 5

Create the vertical section’s bottom segment using a copy of the shapes that we’ve just grouped, which we will horizontally
reflect (right click > Transform >
Reflect > Horizontal) and then position on the opposite edge of the
active drawing area.

Step 6

Finish off the snowflake by adding its
horizontal section using a copy (Control-C
> Control-F) of the vertical segments that we’ve just created, which we
will rotate at a 90º angle (right click > Transform > Rotate >
90º). Once you’re done, select and
group (Control-G) all the shapes
together, before moving on to the next icon.

8. How to Create the Fourth Snowflake Icon

We are now down to our fourth and last
icon, so make sure you position yourself onto the fifth layer, and let’s wrap
things up!

Step 1

Start by making a
copy (Control-C) of the snowflake
that we’ve just finished working on, which we will paste onto the current
layer and then ungroup (right click
> Ungroup), removing some of its details as seen in the reference image.

Step 2

Adjust the length of the vertical segment by
selecting its top anchor point with the help of the Direct Selection Tool (A) and then dragging it upwards until its
top end touches the active drawing area’s outer edge.

Step 3

Create a copy (Control-C > Control-F) of the v-shaped segment, and position them 4 px from one another, at a distance of 4 px
from the vertical segment’s top anchor point. Once you’re done, select and
group (Control-G) all three shapes
together, before moving on to the next step.

Step 4

Create the snowflake’s bottom segment using a
copy of the one that we’ve just finished working on, which we will horizontally
reflect (right click > Transform >
Reflect > Horizontal) and then position on the opposite edge of the
active drawing area.

Step 5

Add the horizontal section using a copy (Control-C > Control-F) of the two
vertical segments, which we will rotate by 90º (right click >
Transform > Rotate > 90º).

Step 6

Take a couple of moments, and draw the top-left
diamond shape using a 4 px thick Stroke (#7FD7E5) with a Round Join, which we will position 10 px from the active
drawing area’s top-left corner.

Step 7

Finish off the snowflake, and with it the
project itself, by adding the remaining diamonds using three copies (Control-C > Control-F three times)
which we will horizontally and/or vertically reflect (right click > Transform > Reflect > Vertical and/or Horizontal) and then position as seen
in the reference image.

Take your time, and once you’re done, select and group
(Control-G) all of the icon’s
composing shapes together before hitting the save button.

Great Work!

There you have it, fellow snowflake lovers, a nice and easy tutorial on how
to create your very own icon set, using nothing more than a few strokes
and geometric shapes.

As always, I hope you had fun and managed to
learn something new and useful during the process.