How to Create a Set of Barber Tools in Adobe Illustrator

In today’s tutorial, we’re going to take an in-depth look at the process of creating a set of barber-themed tools and accessories using the most basic shapes and tools that you can find in Adobe Illustrator.

As always, don’t forget that you can always expand your pack by heading over to GraphicRiver where you can find a great selection of barber-themed vector icons.

That being said, grab a fresh cup of coffee and let's dive straight into it!

1. How to Set Up a New Project File

Assuming you already have Illustrator up and running in the background, bring it up and let’s create a New Document (File > New or Control-N) which we will set up 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)
• Preview Mode: Default

2. How to Set Up a Custom Grid

Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little Grid so that we can have full control over our shapes.

Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:

• 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 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

With the new document created, it would be a good idea to structure our project using a couple of 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: cutting tools
• layer 3: shaving care
• layer 4: clipping tools
• layer 5: shaving tools

4. How to Create the Reference Grids

Thereference 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 128 x 128 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 128 x 128 px orange (#F15A24) square, which will help define the overall size of our icons.

Step 2

Add a smaller 120 x 120 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-Gkeyboard shortcut, center aligning them to the underlying Artboard afterwards. Create the remaining grids using three copies (Control-C > Control-F three times) with horizontal gaps of 40 px, locking the current layer before moving on to the next section.

5. How to Create the Cutting Tools Icon

Assuming you’ve finished creating the little reference grids, move on up to the next layer (that would be the second one) and let’s kick off the project by creating our first icon.

Step 1

Create the background using a 120 x 120 px circle, which we will color using #B2E7EA and then center align to the first active drawing area as seen in the reference image.

Step 2

Start working on the scissors by creating its blades section using a 16 x 72 px rounded rectangle with an 8 px Corner Radius, which we will color using #D3D6EF, and then position onto the background, at a distance of 40 px from its left edge and 2 px from its top one.

Step 3

Add the left highlight using two copies (Control-C) of the shape that we’ve just created, which we will paste in front (Control-F twice), making sure to push the topmost one to the right by 4 px using the Move tool (right click > Transform > Move> Horizontal > 4 px).

Step 4

Once you have the copies in place, select them both and then use Pathfinder’s Minus Front Shape Mode in order to cut out the top one from the one underneath, making sure to change the resulting shape’s color to white (#FFFFFF).

Step 5

Give the current section an outline using the Stroke method, by creating a copy of it (Control-C), which we will paste in front (Control-F) and then adjust by first changing its color to #41485B. Flip the copy’s Fill with its Stroke(Shift-X), setting the resulting outline’s Weight to 4 px, making sure to select and group all three shapes together afterwards using the Control-G keyboard shortcut.

Step 6

Create the blades’ lower section using an 8 x 56 px rectangle, which we will color using #969CBC and then align to the underlying fill shape’s top left corner using the Align panel.

Step 7

Adjust the shape that we’ve just created by setting the Radius of its top-left corner to 8 px from within the Transform panel’s Rectangle Properties.

Step 8

As we did with the previous section, give the current one a highlight (#FFFFFF) followed by a 4 px thick outline (#41485B) with a Round Join, making sure to group all its composing shapes together using the Control-G keyboard shortcut.

Step 9

Create the little adjusting screw using a 4 x 4 px circle, which we will color using #41485B and then center align to the blades’ bottom section, at a distance of just 4 px.

Step 10

Add the horizontal highlight using a 4 px wide 2 px thick Stroke line (#FFFFFF) with a Round Cap, which we will position between the bottom section’s lower end and the screw that we created in the previous step. Once you’re done, select and group (Control-G) all of the shapes that we have so far, before moving on to the next step.

Step 11

For the next step, we’re going to turn on Pixel Preview mode (Alt-Control-Y) and draw the left shank (#D3D6EF) using the Pen Tool (P) starting from the center of the screw and going all the way down. Use the reference image as your main guide, and once you’re done, turn off Pixel Preview mode (Alt-Control-Y) and move on to the next step.

Step 12

Give the shape that we’ve just created a highlight (#FFFFFF) followed by a 4 px thick outline (#41485B) with a Round Join, selecting and grouping all three shapes together afterwards using the Control-G keyboard shortcut.

Step 13

Create the right shank section using a copy (Control-C) of the one that we’ve just finished working on, which we will paste in front (Control-F) and then adjust by selecting the fill shape using the Direct Selection Tool (A) and changing its color to #969CBC. Remove the current highlight and then add a new one onto the left side of the shank as seen in the reference image.

Step 14

Select the two shanks that we’ve just created, and then position them underneath the larger blades section by right clicking > Arrange > Send Backward.

Step 15

Start working on the left handle by creating its outer section using a 20 x 24 px ellipse, which we will color using #D3D6EF, and then position at a distance of 24 px from the active drawing area’s left edge and 2 px from its bottom one.

Step 16

Create another 10 x 12 px rectangle (#D3D6EF), which we will align to the handle's bottom-right corner, uniting the two into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 17

Select the resulting shape’s bottom-right corner using the Direct Selection Tool (A) and then adjust it by setting its Radius to 4 px from within the Live Corners input box.

Step 18

Continue adjusting the handle by cutting out an 8 x 12 px ellipse (highlighted with red) from its center using Pathfinder’s Minus Front Shape Mode.

Step 19

Give the resulting shape the usual left-facing highlights (#FFFFFF) followed by a 4 px thick outline (#41485B) with a Round Join.

Step 20

Finish off the left handle by adding the inner facing bumper segment using a 6 x 4 px rectangle (#41485B), which we will adjust by setting the Radius of its right corners to 2 px. Position the resulting shape onto the right side of the handle's outline, selecting and grouping all its composing shapes together afterwards using the Control-G keyboard shortcut.

Step 21

Create the right handle of the scissors using a 20 x 24 px ellipse (#969CBC) from which we will cut out a smaller 8 x 12 px one. Take your time, and once you’re done, position the resulting shape 2 px from the left handle's bumper and 2 px from the active drawing area’s bottom edge.

Step 22

Give the resulting shape its highlights (#FFFFFF) and 4 px thick outline (#41485B), moving on to the next step once you’re done.

Step 23

Create the finger rest segment using an 8 x 16 px ellipse with a 4 px thick Stroke (#41485B), which we will adjust by first selecting its top and right anchor points using the Direct Selection Tool (A) and then removing them by pressing Delete. Position the resulting shape on the right side of the handle's outline, making sure to set its Cap to Round. Since we’re pretty much done working on the scissors, select and group (Control-G) all of the current section’s composing shapes together, doing the same for the entire tool afterwards.

Step 24

Start working on the hair comb by creating its handle section using an 8 x 54 px rectangle (#E28D76), which we will position at a distance of 24 px from the active drawing area’s right edge and 2 px from its bottom one.

Step 25

Create the comb’s upper body using a 26 x 62 px rectangle (#E28D76), which we will position on top of the handle, uniting the two into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 26

Adjust the resulting shape by cutting out a 16 x 50 px rectangle (highlighted with red) from its upper body using Pathfinder’s Minus Front Shape Mode.

Step 27

Continue adjusting the shape by selecting its outer facing corners using the Direct Selection Tool (A) and then setting their Radius to 4 px using the Live Corners input box. 

Step 28

Give the comb its highlights (#FFFFFF) and 4 px thick outline (#41485B) with a Round Join, adding the small outline extension segments using two 4 x 4 px rectangles (#41485B) with a 2 px right-corner Radius. Once you’re done, select and group all the composing shapes together using the Control-G keyboard shortcut.

Step 29

Add the comb's teeth using fifteen 20 x 2 px rounded rectangles (#41485B) with a 1 px Corner Radius vertically stacked 1 px from one another, which we will group (Control-G) and then position as seen in the reference image. Take your time, and once you’re done, select and group all its composing sections together using the Control-G keyboard shortcut.

Step 30

Finish off the icon by individually isolating some of the tools’ outlines, which we will then adjust by opening up their paths, making sure to set their Cap to Round from within the Stroke panel. Take your time, and once you’re done, select and group (Control-G) all of the icon’s composing shapes together before moving on to the next one.

6. How to Create the Shaving Care Icon

Assuming you’ve finished working on the first icon, lock its layer and then move on up to the next one (that would be the third one) where we’ll start working on our second set of barber tools.

Step 1

Start by creating the background using a 120 x 120 px circle, which we will color using #F4C7A2 and then center align to the second active drawing area.

Step 2

Create the gel bottle’s cap using a 28 x 16 px rectangle, which we will color using #E2AF79 and then position at a distance of 26 px from the active drawing area’s left edge and 2 px from its bottom one.

Step 3

As we did with all the other sections, give the cap that we’ve just created a highlight (#FFFFFF) followed by a 4 px thick outline (#41485B) with a Round Join.

Step 4

Add the horizontal divider line using a 28 x 2 px rectangle, which we will color using #41485B and then center align to the cap’s fill shape, at a distance of 4 px from its top edge.

Step 5

Add the little thumb insertion using a 12 x 6 px rectangle (#41485B), which we will adjust by setting the Radius of its top corners to 2 px and its bottom ones to 4 px. Once you’re done, position the resulting shape onto the previously created shape as seen in the reference image.

Step 6

Add the vertical horizontal highlights using a 2 x 2 px circle (#FFFFFF) at a horizontal distance of 2 px from a 6 px wide 2 px thick Stroke line (#FFFFFF), which we will group (Control-G) and then center align to the cap’s fill shape. Once you’re done, select and group (Control-G) all of the current section’s composing shapes before moving on to the next step.

Step 7

Start working on the bottle’s main body by creating a 28 x 88 px rectangle, which we will color using #87C0C6 and then position on top of the cap’s outline, as seen in the reference image.

Step 8

Adjust the shape that we’ve just created by individually selecting its top anchor points using the Direct Selection Tool (A), which we will then push to the outside by 8 px using the Move tool (right click > Transform > Move > Horizontal > +/- 8 px depending on which side you start with).

Step 9

Create the main body’s upper section using a 44 x 4 px rectangle (#87C0C6), which we will position on top of the shape that we’ve just adjusted, uniting the two into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 10

Give the resulting shape a left-facing highlight (#FFFFFF) followed by a 4 px thick outline (#41485B) with a Round Join. 

Step 11

Add the horizontal divider line using a 28 px wide 2 px thick Stroke line (#FFFFFF), which we will center align to the bottle’s main body, positioning it at a distance of 2 px from its bottom edge.

Step 12

Create the center detail frame using an 18 x 40 px rectangle with a 4 px thick Stroke line (#41485B) with a Round Corner, which we will position at a distance of 18 px from the larger body’s top edge.

Step 13

Add the two dummy text lines using a 2 x 28 px rectangle (#41485B) at a horizontal distance of 2 px from a slightly shorter 2 x 20 px one (#41485B), which we will group (Control-G) and then center align to the previously created frame. Once you have the shapes in place, select them and the frame and group (Control-G) those together as well.

Step 14

Give the current section its horizontal highlights using a 16 px wide 2 px thick Stroke line (#FFFFFF) with a Round Cap at a horizontal distance of 2 px from a smaller 2 px wide one (#FFFFFF). Group (Control-G) the two highlights together and then position them at a distance of 2 px from the larger body’s top edge. Once you’re done, select and group (Control-G) all of the current section’s composing shapes together before moving on to the next step.

Step 15

Finish off the bottle by adding its top section using a 44 x 8 px rectangle, which we will color using #D3D6EF and then position on top of the larger body.

Step 16

Give the shape that we’ve just created a left-facing highlight (#FFFFFF) followed by a 4 px thick outline (#41485B) with a Round Join. Once you’re done, select and group (Control-G) all three shapes together, doing the same for the entire bottle afterwards.

Step 17

Start working on the little razor blade by creating a 28 x 28 px square, which we will color using #D3D6EF and then position onto the right side of the bottle, at a distance of 18 px from the active drawing area’s right edge and 8 px from its top one.

Step 18

Create the blade’s top and bottom sections using two 12 x 6 px rectangles (#D3D6EF) which we will position above and below the larger square, uniting all three of them into a single larger shape afterwards using Pathfinder’s Unite Shape Mode.

Step 19

Adjust the resulting shape by setting the Radius of its inner facing corners to 4 px from within the Live Corners input box.

Step 20

As we did with all the other objects, give the current section a set of left-facing highlights (#FFFFFF) followed by a 4 px thick outline (#41485B) with a Round Join.

Step 21

Add the vertical dividers using two 28 px tall 2 px thick Stroke lines (#41485B), which we will individually position at a distance of 2 px from the razor’s outer edges.

Step 22

Start working on the blade’s insertion, by creating a 2 x 16 px rectangle (#41485B), which we will center align to its larger body.

Step 23

Add the top and bottom end sections using two 8 x 2 px rectangles (#41485B), selecting and uniting all three shapes into a single larger object afterwards using Pathfinder’s Unite Shape Mode.

Step 24

Take a couple of moments to adjust the resulting shape by setting the Radius of its inner-facing corners to 2 px with the help of the Live Corners input box.

Step 25

Create the insertion’s center section using a 6 x 8 px ellipse, which we will color using #41485B and then position to its center, making sure to select and group the two together afterwards using the Control-G keyboard shortcut.

Step 26

Finish off the blade by adding the horizontal highlights using two 4 px wide 2 px thick Stroke lines (#FFFFFF) with a Round Cap, which we will position as seen in the reference image.

Step 27

Start working on the little neck duster by creating the main shape for its stand section using a 24 x 8 px rounded rectangle (#E28D76) with a 4 px Corner Radius, which we will position at a distance of 20 px from the active drawing area’s right edge and 2 px from its bottom one.

Step 28

Give the shape that we’ve just created a highlight (#FFFFFF) followed by a 4 px thick outline (#41485B), selecting and grouping all three shapes together afterwards using the Control-G keyboard shortcut.

Step 29

Start working on the duster’s main body by creating a 24 x 24 px circle (#E28D76), which we will position on top of the previous section as seen in the reference image.

Step 30

Remove the circle’s top half, and then turn on Pixel Preview Mode(Alt-Control-Y) and use the Pen Tool (P) to draw its upper body using the reference image as a guide. Once you’re done, turn off Pixel Preview Mode(Alt-Control-Y) and move on to the next step.

Step 31

As we did with all the other sections, give the resulting shape a left-facing highlight (#FFFFFF) followed by the usual 4 px thick outline (#41485B).

Step 32

Draw the duster’s wooden texture using four 2 px thick Stroke lines (#41485B) with a Round Cap which we will position similar to the ones from the reference image, grouping them afterwards using the Control-G keyboard shortcut.

Step 33

Since we want the lines to remain constrained to the surface of the duster’s main body, we’ll have to mask them using a copy (Control-C) of the larger underlying fill shape, which we will paste in front (Control-F). Then, simply select the shapes that we want to mask and then copy and right click > Make Clipping Mask. Once you’re done, select and group all of the current section’s composing shapes together using the Control-G keyboard shortcut.

Step 34

Add the duster’s neck section using a 20 x 6 px rounded rectangle (#E28D76) with a 3 px Corner Radius, which we will position on top of the larger body.

Step 35

Give the shape a highlight (#FFFFFF) and a 4 px thick outline (#41485B), selecting and grouping all three shapes together afterwards using the Control-G keyboard shortcut.

Step 36

Start working on the duster’s head by creating a 28 x 24 px ellipse, which we will color using #E2AF79 and then position above its section, at a distance of just 4 px.

Step 37

Adjust the shape that we’ve just created by removing its bottom half and then drawing its lower body using the reference image as your main guide. 

Step 38

Give the shape that we’ve just created a left-facing highlight (#FFFFFF) followed by a 4 px thick outline (#41485B).

Step 39

Add the horizontal divider line using a 16 px wide 2 px thick Stroke line (#41485B), which we will center align to the duster’s head, positioning it at a distance of 2 px from its bottom edge.

Step 40

Finish off the duster by adding the two horizontal highlights (#FFFFFF), selecting and grouping all its composing shapes together afterwards using the Control-G keyboard shortcut.

Step 41

Finish off the icon by individually isolating and opening up some of the tools’ outlines as we did for the previous one. Take your time, and once you’re done, select and group (Control-G) all its composing sections before moving on to the next one.

7. How to Create the Clipping Tools Icon

Assuming you’ve finished working on the second icon, lock its layer and then move on up to the next one (that would be the fourth one), where we’ll start working on the next set of tools.

Step 1

Create the background using a 120 x 120 px circle, which we will color using #B2E7EA and then center align to the third active drawing area.

Step 2

Start working on the first clipper comb by creating a 14 x 4 px rectangle, which we will color using #969CBC and the position at a distance of 24 px from the active drawing area’s left edge, and 2 px from its bottom one.

Step 3

Add the comb’s upper body using a 38 x 16 px rectangle (#969CBC), which we will adjust by setting the Radius of its bottom corners to 8 px. Position the resulting shape on top of the smaller rectangle, uniting the two into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 4

Give the larger body a highlight (#FFFFFF) followed by the usual 4 px thick outline (#41485B), moving on to the next step once you’re done.

Step 5

Add the insertion segment using a 22 x 4 px rounded rectangle (#41485B) with a 2 px Corner Radius, which we will center align to the larger body, positioning it at a distance of 6 px from its top edge.

Step 6

Create the horizontal highlight using a 4 px wide 2 px thick Stroke line (#FFFFFF), which we will position between the insertion that we’ve just created and the comb’s bottom edge. Once you’re done, don’t forget to select and group (Control-G) all of the current section’s composing shapes together.

Step 7

Add the comb’s outer bridges using two 4 x 24 px rounded rectangles (#41485B) with a 2 px Corner Radius, which we will position on the sides of its main body.

Step 8

Finish off the comb by adding its teeth using eight 2 x 28 px rounded rectangles (#41485B) with a 1 px Corner Radius, at a horizontal distance of 2 px from one another, grouping (Control-G) and then positioning them as seen in the reference image. Take your time, and once you’re done, select and group all of its composing shapes together using the Control-G keyboard shortcut.

Step 9

Create the second comb using a copy (Control-C > Control-F) of the one that we’ve just finished working on, which we will position above the original, at a distance of just 4 px.

Step 10

Start adjusting the comb by shortening its outer bridges and teeth, by selecting their top anchor points and then pushing them to the bottom by 8 px using the Move tool (right click > Transform > Move > Vertical > 8 px).

Step 11

Double click twice on the comb to isolate it, and then replace its center insertion with a smaller 14 x 4 px rounded rectangle (#41485B) with a 2 px Corner Radius. Take your time, and once you’re done, press Escape in order to exit isolation mode.

Step 12

Create the third, smaller comb, using a copy (Control-C > Control-F) of the one that we’ve just finished working on, which we will position above it, at a distance of just 4 px.

Step 13

Using a similar process to that applied on the second comb, adjust the height of the current one until it fits inside the surface of the underlying active drawing area. Take your time, and once you’re done, move on to the next step.

Step 14

Start working on the clipper by creating the little ring section using a 16 x 20 px ellipse with a 4 px thick Stroke (#41485B), which we will align to the active drawing area’s bottom edge, positioning it at a distance of 24 px from its right one.

Step 15

Create the device’s bottom body using a 36 x 88 px ellipse, which we will color using #E28D76, and then position at a distance of 16 px from the active drawing area’s right edge, and 22 px from its top one.

Step 16

Adjust the ellipse that we’ve just created by removing its upper half and then turning on Pixel Preview Mode (Alt-Control-Y) and drawing its upper body using the Pen Tool (P). 

Step 17

Give the resulting shape the usual left-facing highlight (#FFFFFF) followed by a 4 px thick outline (#41485B) with a Round Join, selecting and grouping (Control-G) all three shapes together afterwards.

Step 18

Start working on the device’s grip section by creating a 20 x 32 px ellipse, which we will color using #E2AF79, and then center align to its larger body, positioning it at a distance of 18 px from its top edge.

Step 19

Adjust the shape that we’ve just created by positioning a 20 x 24 px rectangle (#E2AF79) on top of its upper half, selecting and uniting the two into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 20

Continue adjusting the current section, by setting the Radius of its top corners to 4 px, giving the resulting shape a highlight and a 4 px thick outline (#41485B).

Step 21

Add the horizontal grip lines using nine 20 x 2 px rectangles (#41485B) vertically stacked at a distance of 2 px from one another, which we will group (Control-G) and then center align to the grip section. Once you have the lines in place, mask them using a copy (Control-C) of the underlying fill shape, which we will paste in front (Control-F) and then right click > Make Clipping Mask.

Step 22

Create the top trapezoidal insertion using a 16 x 6 px rectangle (#41485B), which we will adjust by individually selecting and pushing its top anchor points to the inside by 4 px using the Move tool (right click > Transform > Move > +/- 4 px depending on which side you start with). Position the resulting shape on top of the grip section, selecting and grouping all its composing shapes together using the Control-G keyboard shortcut.

Step 23

Add the little screws using three 4 x 4 px circles (#41485B), which we will position onto the clipper’s body as seen in the reference image.

Step 24

Take a couple of moments and add the horizontal highlights using an arched 2 px thick Stroke line (#FFFFFF) followed by a 2 x 2 px circle (#FFFFFF), which we will position below the device’s grip section. Once you have the two in place, select them and all of the current section’s composing shapes and group them together using the Control-G keyboard shortcut.

Step 25

Start working on the length adjuster by creating its main body using a 6 x 32 px rectangle (#969CBC) which we will adjust by setting the Radius of its bottom corners to 3 px. Position the resulting shape onto the left side of the clipper, at a distance of 6 px from its top edge.

Step 26

Give the adjuster a left-facing highlight (#FFFFFF) and 4 px thick outline (#41485B), followed by a 6 px wide 4 px thick Stroke line (#41485B), which we will position at a distance of 2 px from its top edge. Once you have all the shapes in place, select and group (Control-G) them together before moving on to the next step.

Step 27

Create the on/off button using a 4 x 16 px rectangle (#41485B), on the right side of which we will add four ridge segments (#41485B). Group (Control-G) all five shapes together and then position them on the right side of the clipper, selecting and grouping (Control-G) all its current sections together as well.

Step 28

Start working on the clipper’s upper body by creating a 36 x 16 px rectangle (#D3D6EF), which we will adjust by setting the Radius of its top corners to 4 px, positioning the resulting shape as seen in the reference image.

Step 29

Give the upper body the usual left-facing highlight (#FFFFFF) followed by a 4 px thick outline (#41485B), and then move on to the next step.

Step 30

Add the top insertion using a 16 x 12 px ellipse (#969CBC), which we will adjust by removing its top half. Give the resulting shape a 4 px thick outline (#41485B), grouping (Control-G) and then center aligning the two to the current section’s upper edge.

Step 31

Add the little screws using two 4 x 4 px circles (#41485B), which we will position at a distance of 2 px from the current section’s bottom corners.

Step 32

Finish off the current section by adding the two horizontal highlights using an 8 px wide2 px thick Stroke line (#FFFFFF) at a horizontal distance of 2 px from a smaller 2 px wide one (#FFFFFF), which we will group (Control-G) and then center align at a distance of 2 px from the underlying shape’s bottom edge. Once you’re done, select and group (Control-G) all of the current section’s composing shapes before moving on to the next step.

Step 33

Start working on the blade’s lower body by creating a 28 x 6 px rectangle, which we will color using #969CBC and then position on top of the previous section.

Step 34

Give the shape that we’ve just created a highlight (#FFFFFF) followed by the usual 4 px thick outline (#41485B).

Step 35

Create the blade’s outer bridges using two 4 x 10 px rectangles (#41485B) which we will adjust by setting the Radius of its top corners to 2 px, positioning the resulting shapes as seen in the reference image.

Step 36

Add the little teeth using nine 2 x 8 px rounded rectangles (#41485B) with a 1 px Corner Radius, which we will horizontally stack 1 px from one another, grouping (Control-G) and then positioning them between the two bridge segments. Take your time, and once you’re done select and group (Control-G) all of the current section’s composing shapes, doing the same for the entire hair clipper afterwards.

Step 37

Finish off the icon by individually isolating and opening up some of the tools’ outlines as we did for the previous one. Take your time, and once you’re done, select and group (Control-G) all its composing sections before moving on to the next one.

8. How to Create the Shaving Tools Icon

We are now down to our fourth and last icon, so assuming you’ve positioned yourself onto the right layer (that would be the fifth one), zoom on its reference grid and let’s finish this.

Step 1

Start out by creating the background using a 120 x 120 px circle, which we will color using #F4C7A2 and then center align to the fourth active drawing area.

Step 2

Create the lower section of the razor’s handle using a 12 x 6 px rectangle, which we will color using #D3D6EF and then position at a distance of 34 px from the active drawing area’s left edge and 2 px from its bottom one.

Step 3

Create another 6 x 62 px rectangle, which we will color using #D3D6EF and then position onto the previous section, aligning it to its left edge.

Step 4

Add the blade’s head section using a 16 x 48 px rectangle (#D3D6EF) which we will position on top of the previous shape, selecting and uniting all three of them into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 5

Take a couple of moments and adjust the shape of the resulting shape by rounding out some of its corners using the Live Corners input box. Take your time, and once you’re done, move on to the next step.

Step 6

Give the shape that we’ve just adjusted a 4 px thick outline (#41485B) with a Round Join, selecting and grouping both shapes together afterwards using the Control-G keyboard shortcut.

Step 7

Add the razor’s blade using a 10 x 48 px rectangle (#969CBC), which we will adjust by setting the Radius of its bottom-right corner to 4 px, positioning the resulting shape as seen in the reference image.

Step 8

Give the blade its left-facing highlight (#FFFFFF) and 4 px thick outline (#41485B) with a Round Join, followed by a 48 px tall 2 px thick vertical divider (#41485B) positioned on the right side of the highlight. Take your time, and once you’re done, select and group all four shapes together using the Control-G keyboard shortcut.

Step 9

Create the wooden handle section using a 12 x 48 px rounded rectangle (#E28D76) with a 6 px Corner Radius, which we will position at a distance of 30 px from the active drawing area’s left edge and 12 px from its bottom one.

Step 10

Give the shape that we’ve just created a left-facing highlight (#FFFFFF), followed by a 4 px thick outline (#41485B), before moving on to the next step.

Step 11

Create the little screws using two 4 x 4 px circles (#41485B), which we will center align to the wooden handle’s body, positioning them at a distance of 4 px from its top and bottom edges.

Step 12

Take a couple of moments and draw the wooden texture using five 2 px thick Stroke lines (#41485B) with a Round Cap, which we will then group (Control-G) and mask. Once you’re done, select and group (Control-G) all of the handle’s composing shapes, doing the same for the entire razor before moving on to the next step.

Step 13

Start working on the tube’s cap, by creating a 16 x 12 px rectangle (#E2AF79), which we will adjust by individually selecting and pushing its bottom anchor points to the inside by 2 px using the Move tool (right click > Transform > Move > Horizontal > - 2 px). Once you’re done, position the resulting shape at a distance of 38 px from the active drawing area’s right edge and 2 px from its bottom one.

Step 14

Create the upper body of the cap using a 16 x 4 px rectangle (#E2AF79), which we will position on top of the shape that we’ve just adjusted, selecting and uniting the two into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 15

Give the cap a left-facing highlight (#FFFFFF) and a 4 px thick outline (#41485B) with a Round Cap, followed by three 16 px tall 2 px thick Stroke lines (#41485B) horizontally stacked 2 px from one another, which we will group (Control-G) and then center align to the larger underlying shape. Once you’re done, select and group (Control-G) all of the cap’s composing shapes before moving on to the next step.

Step 16

Create the smaller neck section using a 12 x 6 px rectangle, which we will color using #969CBC, and then position on top of the cap.

Step 17

Give the shape that we’ve just created a highlight and 4 px thick outline (#41485B), selecting and grouping all three shapes together afterwards using the Control-G keyboard shortcut.

Step 18

Start working on the tube’s lower body, by creating a 28 x 8 px rectangle (#D3D6EF), which we will adjust by setting the Radius of its bottom corners to 4 px, positioning the resulting shape on top of the neck section.

Step 19

Give the shape that we’ve just adjusted a left-facing highlight, followed by a 4 px thick outline (#41485B) with a Round Join, selecting and grouping (Control-G) all three shapes together before moving on to the next step.

Step 20

Create the tube’s main body using a 44 x 74 px rectangle (#87C0C6), which we will adjust by individually selecting and pushing its bottom anchor points to the inside by 8 px using the Move tool (right click > Transform > Move > Horizontal > +/- 8 px depending on which side you start with), positioning the resulting shape on top of the previous section.

Step 21

Add a 44 x 4 px rectangle (#87C0C6) on top of the shape that we’ve just adjusted, selecting and uniting the two into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 22

Give the resulting shape a left-facing highlight (#FFFFFF), followed by a 4 px thick outline (#41485B) with a Round Join, moving on to the next step once you’re done.

Step 23

As we did with the gel tube, take a couple of moments and add the center frame and dummy text lines, selecting and grouping (Control-G) the two details together once you’re done.

Step 24

Finish off the current section, by adding the horizontal highlights using a 14 px wide 2 px thick Stroke line (#FFFFFF) at a distance of 2 px from a smaller 4 px wide one (#FFFFFF), which we will group (Control-G) and then position as seen in the reference image. Once you’re done, select and group (Control-G) all of the current section’s composing shapes before moving on to the next step.

Step 25

Start working on the tube’s upper body by creating a 44 x 8 px rectangle, which we will color using #D3D6EF, and then position on top of the previous section.

Step 26

Give the shape that we’ve just created a left-facing highlight (#FFFFFF) followed by a 4 px thick outline (#41485B) with a Round Join, selecting and grouping all three shapes together afterwards using the Control-G keyboard shortcut.

Step 27

Finish off the icon, by individually isolating and opening up some of the tools’ outlines as we did for the previous one. Take your time, and once you’re done, select and group (Control-G) all its composing shapes before hitting that Save button.

It’s a Wrap!

There you have it, fellow hipsters: a step-by-step, in-depth tutorial on how to create your very own barber-themed icons using the most basic of shapes and tools. As always, I hope you’ve managed to keep up with each and every step and most importantly learned something new and useful along the way.