How to Create a Retro High-School Icon Pack in Adobe Illustrator

In this tutorial we’re going to take a journey back in time and create some high-school-related objects from the 50s. During the process we will see how easy it is to use some of Illustrator’s basic shapes along with the Offset Path tool to create some great looking assets.

If you want to add your own icons to this pack, but you don’t know where to start, you can find inspiration by taking a look at Envato Market where you can find tons of good packs by searching using “high school” as keywords.

That being said, open up Illustrator and let’s get started.

1. Set Up the Document

Assuming you already have Illustrator up and running, let’s quickly go through the process of setting up our document.

First, go to File > New or press the Control-N keyboard shortcut, and adjust the different options as follows:

• Number of Artboards: 1
• Width: 800 px
• Height: 600 px
• Units: Pixels

And from the Advanced tab:

• Color Mode: RGB
• Raster Effects: Screen (72 ppi)
• Align New Objects to Pixel Grid: checked

2. Set Up the Layers

Once we’ve created the document, we have to prep it by creating a set of individual layers for each of our icons. By doing so, not only will we foolproof our workflow, but we'll also make things a lot more straightforward, since we can build one asset at a time without worrying that we might move or edit another one by mistake.

So, assuming you know how to use the Layers panel, open it up and create seven layers, naming them as follows:

1. grids
2. backpack
3. notebook
4. writing tools
5. pennant
6. stopwatch
7. football

3. Adjust the Grid

Since Illustrator allows the use of Grids, you should know that it gives you the option to snap your design to its Grid / Pixel Grid. That means that your shapes will look super crisp as long as you use the Snap to Grid / Snap to Pixel options found under the View top menu.

Because there are different situations that require different Grid settings, sometimes you might find yourself in the position where you need to adjust the settings that come prepackaged with Illustrator.

I personally have gone with the lowest and at the same time the most accurate values, since this allows for better control over my designs.

To change these settings, you have to go to Edit > Preferences > Guides & Grid. There you will be greeted by a little popup, which will allow you to adjust the following:

• Gridline every: 1 px
• Subdivisions: 1

Once you’ve adjusted these settings, all you need to do in order to make everything pixel crisp is enable the Snap to Grid option located under the Viewmenu.

Quick tip: you should know that the Snap to Grid option will transform into Snap to Pixel every time you enter the Pixel Preview Mode, but that’s totally fine, as most of the time you will be going back and forward into this display mode.

Now, if you’re used to moving things around with the help of your keyboard’s directional arrow keys, you might want to change the Keyboard Increment to something more pixel accurate (1 px) to get it as precise as possible. You can do this by going to Edit > Preferences > General > Keyboard Increment.

If your version of Adobe Illustrator has the value set to pt (points), just go to Units and change the General and Stroke values to Pixels and you’re good to go.

If you want to learn more about the Grid, and how you can use it to create pixel-perfect artwork, you can take a look here:

• Understanding Adobe Illustrator’s Grid System
• How to Create Pixel Perfect Artwork Using Adobe Illustrator

4. Set Up the Base Grids

Usually when you start working on any new icon, there are a couple of things that you should take into consideration, one of those being the Base Grids.

By definition, a Base Grid is a precisely delimited reference surface that is constructed and used in order to guide you through the process of creating your icon pack’s assets. The size of the Grid is subjective for each and every project, which means that sometimes you might need to create smaller icons, while other times you might find yourself in the position of needing to use larger ones.

Usually the shape of the Base Grid is a perfect square, since it allows for a better planning and structuring of your shapes and lines compared to a circle, giving you full control over the pixel count.

In our case, we’re going to keep things simple and create six 96 x 96 px squares (#CCCCCC) using the Rectangle Tool (M) which will define the size of our icons, and add a smaller 92 x 92 px one (#E6E6E6) to each of them which will act as our active drawing area, thus giving us an all-around 2 px padding.

Group each of the two Grids using Control-G, and then position them 60 px from one another, creating two rows of three Grids.

As soon as you have all the Base Grids in place, you can lock their layer so that you won’t accidentally move them, and then we can start working on the first icon.

5. Create the Backpack

First, make sure that you’re on the correct layer, and then lock all the other ones, and zoom in on the first Base Grid so that you have a better view of what you are going to be building.

Step 1

We will start by creating the backpack’s main body, onto which we will start adding all the other details, one at a time.

First, grab the Rounded Rectangle Tool and create a 64 x 80 px shape with a 6 px Corner Radius, which we will color using #6D645E and then position over theBase Grid so that it’s horizontally center aligned to the smaller inner square, leaving a gap of 4 px between it and the square’s bottom side.

Now, since we want everything to be as precise and sharp as possible, I recommend that you turn on Pixel Preview mode (View> Pixel Preview or Alt-Control-Y). This way you’ll be able to see the underlying pixel grid, which will give you full control over the positioning of your shapes.

Step 2

At this point some of you might be wondering why we left that 4 px gap between the bottom section of our shape and the Base Grid itself.

Well, if you’re new to Line Icons, then you should probably know that there are two different methods that you can use in order to create them: offset paths andstroke lines.

I won’t go over them right now, since I already have a written piece that explains pretty much everything that you need to know.

What I will do is tell you that the entire tutorial will rely on using the Offset Path tool in order to create the outlines for each icon, and since each outline will have a 4 px weight, you can now understand why we need to leave a gap with the same value towards the sides where the shapes would normally touch the Base Grids.

So let’s create the first outline for the backpack’s main shape.

First, select the shape we’ve just created and then go to Object > Path > Offset Path and set the Offset value to4 px, leaving all the other settings as they are.

As soon as you click on the OK button, you’ll see that Illustrator has created a larger copy of the shape, by adding 4 px to each side, and positioned it underneath.

Step 3

Every time you create an offset, it will always use the color of the shape that you used in order to make it. Since our outline has to stand out, we will have to change its color to something darker (#544F4B).

I recommend that once you have both your main fill shape and its outline, you group them using the Control-G keyboard shortcut, making it easier to access different parts of your design when you need to.

Step 4

Once we have the main body of our backpack, we can start working on the top section.

First, grab the Rounded Rectangle Tool and create a 68 x 38 px shape (#8C7970) with a 4 px Corner Radius and position it towards the top section of the backpack, leaving that 4 px gap between it and the Base Grid’s top side.

Step 5

Next, we need to slightly adjust the bottom corners of the shape by changing their roundness from 4 px to 12 px. To do this, simply select the bottom anchor points using the Direct Selection Tool (A) and then use the Live Corners tool to adjust their value.

Quick Tip: If you’re using an older version of Illustrator, you will have to recreate the shape by drawing two rounded rectangles, one with a 4 px Corner Radius and another one with a 12 px Radius, and then adjust and unite them.

Step 6

Once we have the top section, we need to add an outline to it as we did with the backpack’s main shape.

So, with the shape selected, go to Object > Path > Offset Path and give it an offset of 4 px. Don’t forget to change the outline’s color to #544F4B in order for it to stand out.

Step 7

Start working on the top handle by creating a 20 x 14 px rounded rectangle with a Corner Radius of 7 px. Then create another smaller 10 x 16 px one with a 5 px Corner Radius, position it just above the larger one, making sure to vertically and horizontal align them, and then use Pathfinder’s Minus Front option to create a cutout.

Color the resulting shape using #B29580 and then, using an overlapping rectangle, cut off its top half.

Finally position the handle towards the top section of the backpack, and give it a 4 px outline (#544F4B).

Step 8

Next, add the little stitch line by creating a 62 x 41 px rounded rectangle with a 9 px Corner Radius, which we will adjust by removing its top-centered anchor points. To do this, grab the Direct Selection Tool (A) and then drag and select the anchors and press Delete.

Then, simply flip the resulting shape’s fill color with its stroke by pressing Shift-X, and set the Stroke’s Weight to 2 px.

Fine tune the stitch line by setting its Cap to Round Cap and adding a Dashed Line effect to the stroke, using a 2 px dash and a gap of 4 px.

Step 9

Once you’ve added the stitch line, we can start working on the little strap that holds the lid.

First, grab the Rounded Rectangle Tool and create a 4 x 46 px shape with a 2 px Corner Radius (1).

Color the shape using #B29580 and then adjust it by removing its top-centered anchor points using the Direct Selection Tool (A) (2). Once you’ve removed them, don’t forget to use the Shift-J shortcut to close the path.

Then, give it a 4 px outline and add a 20 x 4 px rectangle (#544F4B) towards its top section (3).

Start adding some details by drawing seven 2 x 2 px circles (#544F4B) positioned 4 px from one another (4).

Finish off the strap by adding the buckle. First draw a 20 x 20 px square (#544F4B) (5) and then add another smaller 12 x 12 px one (#DDD2CA) over it (6).

Use an 8 x 8 px rectangle to create a cutout from the lighter colored square (7) and then finally add a 2 x 6 px rounded rectangle with a 2 px Corner Radius (8).

Step 10

Finally group all the strap’s elements together using the Control-G keyboard shortcut and position them over the backpack’s lid, somewhere towards its bottom section, so that in the end you’ll have a gap of 8 px between its outline and the bottom section of the backpack’s main shape.

Step 11

Next, add a small 8 x 2 px rectangle (#544F4B) and a slightly longer 12 x 2 px one (#544F4B) and position them towards the left side of the lid, leaving a gap of 2 px between them.

Once you have the top lid with all its details, you should group all its composing elements together (Control-G) since in the next step we will need to add a couple of details to the main section of the backpack.

Step 12

Since at this point we’re pretty much done with the basic composing elements of the backpack, we’ll start adding a bunch of details to its main body.

First, double click on the backpack’s body to enter Isolation mode (or right click > Isolate Selected Group) and then create a 64 x 2 px rectangle, which we will color using the same value used for the outline (#544F4B) and then position it towards the bottom side of the backpack, leaving a gap of 2 px between it and the main shape’s outline.

Step 13

Continue adding details by creating a couple of horizontal lines that will give the backpack a little more pop.

To do this, grab the Rectangle Tool (M) and create 20 shapes of 64 x 1 px size and #665C57 color, which we will position 1 pxfrom one another.

Group all the lines together (Control-G) and then position them towards the bottom section of the backpack, just above the previously created element, leaving a gap of 1 px between them.

Step 14

Finish off this icon by adding a little name patch towards its bottom right corner.

First create a 10 x 4 px rectangle, color it using #DDD2CA and then give it a 4 px outline (#544F4B). Group the two together (Control-G) and then simply position them leaving a gap of 2 px between them and the right side of the backpack’s outline.

Keep the same space gap between their bottom section and the horizontal divider that we created a couple of steps ago.

Then finally group all the icon’s elements together using the Control-G keyboard shortcut, and you’re good to move on to the next one.

6. Create the Notebook

Since we’re now done with the first icon, we can lock its layer and move on to the next one, which is the notebook.

Step 1

We’ll start by creating the main body of the icon, and then gradually add subtle details as we did with the backpack one.

First, grab the Rounded Rectangle Tool and create a 66 x 84 px shape (#DD7A7A) with a 4 px Corner Radius which we will adjust by selecting and removing its left-centered anchor points using the Direct Selection Tool (A). Once we’ve removed the anchors, we need to close the path by pressing Control-J.

Now we can give the shape an outline and position the two towards the center of the Base Grid.

Step 2

Next, we will add a darker section to the main body by creating a 6 x 84 px rectangle which we will color using #BC6161 and position towards the left side of the main shape that we created in the previous step.

Step 3

Using the Rectangle Tool (M), add a 4 x 84 px vertical divider (#544F4B) to the right section of the shape that we created a few moments ago.

Step 4

Get a little creative and add a couple of decorative detail lines to the notebook.

Step 5

Finish off this icon by adding the name tag, which we will create using the Rectangle Tool (M). First, draw a 28 x 14 px rectangle (#DDD2CA) and then give it a 4 px outline (#544F4B) by going to Object > Path > Offset Path and entering the specified value into the Offset field.

Add a bunch of decorative line segments, and then group all the tag’s elements together using the Control-G keyboard shortcut.

Finally don’t forget to select all the notebook’s composing sections and group them as well, so that they won’t get misplaced by accident.

7. Create the Writing Tools

As before, once you’ve finished the notebook icon, don’t forget to lock its layer and move on to the next one, so that you can keep a clear focus on what you’re currently working on.

Step 1

Before we start, I wanted to point out that this icon is a little bit different since it’s actually composed of three smaller objects, namely the pencil, the wooden ruler and the eraser.

We will start working on the ruler since it occupies the full height of theBase Grid, thus making it easier to position the rest of the icon’s composing parts.

So first grab the Rectangle Tool (M) and create a 22 x 84 px shape which we will color using a light brown (#A3876F) and then give the usual 4 px outline (#544F4B).

As you can see, the shapes are positioned slightly towards the left side of the Grid, but you don’t need to worry about this now, since once we have all three elements, we will center them to the center of the Base Grid.

Step 2

With the main shapes of the ruler in position, we can start adding details.

The first thing that we will need to add is the little white plastic section that was used back in the day. Select the Rectangle Tool (M) and create a 6 x 84 px shape (#DDD2CA) and position it over the brown section of the ruler, towards its left side.

Step 3

Once you’ve added the plastic segment, create and add a little 4 x 84 px divider to its right side, coloring it using #544F4B.

Step 4

At this point we can start adding the little measurement indicator lines to make it look like an actual ruler and not a bar of chocolate.

So, using the Rectangle Tool (M), create about thirteen 4 x 2 px line segments (#544F4B), and position them one under the other at a distance of 4 px between each piece. Then adjust the width of some of the segments to just 2 px,so that you have one longer segment, then three smaller ones, and then one longer one again.

Step 5

Using the Ellipse Tool (L), create a 4 x 4 px circle and position it over the brown section of the ruler, towards its bottom.

Step 6

Since we have all the necessary details to make this look like a ruler, we can start creating the wooden pattern.

First, select the Pen Tool (P), set the stroke color to that of the outline (#544F4B) leaving the fill blank, and then, using a 2 px Stroke Weight with a Round Cap, get creative and draw a couple of lines to make a nice little pattern.

Since we don’t want the lines to go outside the ruler’s outline, try to keep the anchor points confined to its surface.

Once you’re done, select all the wood lines, and group them together (Control-G) so that you won’t move them around by accident. Do the same for the ruler to make sure that none of its composing elements gets misplaced.

Step 7

Since we now have the ruler, we can start working on the pencil.

First, select the Rectangle Tool (M) and create a 4 x 56 px shape which we will color using a pale yellow (#DBC07B) and give a 4 px outline (#544F4B). Then, with both shapes selected, position them towards the left side of the ruler, leaving a gap of 4 px between the two.

Step 8

Once you have the main shapes of the pencil, work through the details, and start by adding the bottom eraser.

Using the Ellipse Tool (L), create a 4 x 4 px circle, which we will color using #E29F9F and then give a 4 pxoutline (#544F4B), making sure to position both towards the bottom of the pencil, underneath its main shapes.

Step 9

Next, use the Rectangle Tool (M) to create a 4 x 4 px shape, color it using #DDD2CA and position it towards the bottom section of the pencil’s body (the yellow shape).

Step 10

Add a couple of lines to the previously created shape to make it look like the metal case that holds the eraser.

Step 11

Once you’re done with the eraser’s casing, add a couple of details to the yellow section of the pencil to make it look more interesting.

Step 12

Finally, finish off the pencil by adding the little sharpened tip.

This time you’ll have to select the Pen Tool (P) and first create the outline, by drawing a little triangle (#544F4B), making sure to make its tip round.

Then, once you have the larger shape, you can create the fill section by drawing a little trapezoid (#CEC0B7).

Once you’re done, group the two (Control-G) and select all the pencil’s elements and do the same to them, so that you won’t misplace things by accident.

Step 13

Now that we have both the pencil and ruler, we need to start creating the little eraser.

First, using the Rectangle Tool (M), create a 12 x 22 px shape (#DDD2CA) and give it the usual 4 px outline.

As you can see, we need to position the two shapes onto the right side of the ruler, at the same 4 px distance, making sure to Vertical Center Align them to the main body of the ruler.

Step 14

Next, add a 12 x 22 px rectangle onto the eraser’s main shape, and position it towards the bottom, making sure to color it using #DD7A7A.

Step 15

Then add a 12 x 4 px horizontal divider towards the top side of the pink section, and a couple of detail lines to make it more interesting.

Once you’ve done that, simply group all the eraser’s elements together (Control-G) and then create another group using the pencil, ruler and eraser and center them to the Base Grid.

8. Create the Pennant

Assuming you’ve managed to create the writing tools icon, lock its layer, and then move on to the next one so that we can start working on the little pennant.

Step 1

Start by drawing the stick section, which we will create using a 4 x 84 px rectangle that we will color with #DDD2CA, and then give it a 4 px outline (#544F4B).

Don’t worry about the positioning of the two shapes, since you will center the icon once it’s finished.

Step 2

Create three little 4 x 2 px rectangles distanced vertically at 2 px from one another, and position them over the fill shape of the pennant, towards its bottom section.

Then, select all the stick’s shapes and group them using the Control-G keyboard shortcut.

Step 3

Start working on the pennant's banner by creating a right-pointing triangle using the Pen Tool (P). Color the shape using #DD7A7A and then give it a 4 px outline by going to Object > Path > Offset Path and entering 4 into the value field.

Once you have both shapes, position them towards the top section of the stick, making sure that its outline overlaps that of the banner.

Step 4

Start adding details to the banner by creating a row of 1 x 48 px rectangles positioned 1 pxfrom one another, that you will position over the pinkish triangle, and mask using it as a Clipping Mask.

To create the mask, simply make a copy (Control-C) of the banner’s right-pointing triangle, paste it (Control-F) over the detail lines, and then right click > Make Clipping Mask.

Step 5

Next, create a 34 x 24 px ellipse (#DBC07B) and put it inside the Clipping Mask that you’ve just created for the vertical lines. Then give it a 4 px outline (#544F4B) and add three little 2 x 2 px circles (#544F4B) to give it a little pop.

Finally, select all the pennant’s elements and group them together using the Control-G keyboard shortcut, and then make sure to center the icon to its Base Grid.

9. Create the Stopwatch

Before we start working on the stopwatch icon, make sure that you’ve locked the previous layer and positioned yourself onto the right one.

Step 1

Start defining the main shape of the stopwatch by creating a 60 x 60 px circle which we will color using a light brown (#A3876F) and then give a 4 px outline (#544F4B).

Then, with both shapes selected, position them towards the center of the icon’s Base Grid, making sure that the outline touches the bottom side of the smaller grid.

Step 2

Next, create the inner section of the stopwatch, by drawing a 44 x 44 px circle (#DDD2CA) and giving it a 4 px outline (#544F4B). Then position both shapes over the light brown body segment, making sure to center align them.

Step 3

Before we start working on the stopwatch indicator itself, let’s get a bit creative and add a nice wood texture to the brown circle, making sure to keep the lines constrained to the ring.

Use the same 2 px Stroke Weight as before with the Round Cap,and take your time since you want to get it right.

Once you’re done, group all the wood lines together (Control-G) since it will be easier to access and modify in case you need to at some point in the future.

Step 4

Start working on the indicator gauge, by adding the main reference time points, so the top, bottom, left and right center lines.

To do this, simply create a pair of 4 x 10 px rectangles (#544F4B), one positioned towards the top and one towards the bottom, and then create a copy (Control-C > Control-F) and rotate it so that the lines will now be laid out horizontally.

Once you have all four of them, don’t forget to group them (Control-G) so that they won’t go flying around.

Step 5

Now add four little 4 x 4 px circles (#544F4B) to each corner of the gauge, making sure to group them together (Control-G).

Step 6

Finish off the gauge by adding the indicator and a couple of circular shapes, giving the middle piece a little pop using #DD7A7A.

You don’t really have to follow the exact style of the reference piece that I’ve built, since it could be interesting to see what you can come up with, so that in the end you’ll give it a little personal flavor.

That being said, once you have all the pieces of the stopwatch’s main body, group them together (Control-G)so that you’ll have everything secured in place.

Step 7

With the watch gauge and main body finished, we can now move on and start working on the top ring that you would normally use to put a string around and secure it along your neck.

First, create a 10 x 4 px rectangle (#8C7970), give it a 4 px outline, and then with the two shapes grouped (Control-G), position them towards the top section of the watch, making sure that they’re positioned underneath it (right click> Arrange > Send to Back).

Step 8

Continue adding details to the stopwatch’s ring holder by creating an 8 x 8 px circle (#A3876F) with a 4 px outline (#544F4B), which you will group (Control-G) and position under the rectangle piece (right click > Arrange > Send to Back) that we created in the previous step, making sure that more than half of its bottom section gets hidden by the overlap.

Step 9

To finish off the icon, simply create a ring holder, whether it’s an actual ring or a more rectangular one like I have. Color the inner section using #DDD2CA and then as usual give it a nice 4 px outline (#544F4B).

Finally, select all the stopwatch’s elements and group them (Control-G) so that they won’t get misplaced.

10. Create the Football

We are finally down to our last but not least icon, the football. I know it has been a pretty long road, but hang in there since we’re just a couple of steps away from finishing this pack.

Step 1

Assuming you’re on the right layer, which is actually the last one, grab the Ellipse Tool (L) and create a 50 x 84 px shape that we will color using #8C7970 and then give a strong 4 px outline (#544F4B), making sure to center align the two to the icon’s Base Grid.

Step 2

Add some texture to the ball’s surface by creating 22 rows of 15 circles (size 4 x 4 px, color #6D645E), positioned 2 px from one another, and overlaying them on the icon.

To make it look more interesting, create a pattern where one row is pushed slightly more towards the right, which in the end will create a bunch of diagonal point lines.

Once you have them in place, don’t forget to select and group them (Control-G) since you’ll want them to be easily accessible if you decide that you need to edit them.

Step 3

As you can see, the texture is now in place, but it goes outside the football’s inner fill shape, which is something that we don’t want it to do.

So grab a copy of the light brown ellipse (Control-C) and then paste it (Control-F) over the texture itself so that we can use it to create a Clipping Mask by right clicking > Make Clipping Mask.

Step 4

Add a thick vertical divider by drawing a 4 x 88 px rectangle (#544F4B) and centering it over the football itself.

Step 5

Add the top and bottom colored sections of the ball by creating two 56 x 52 px ellipses (#DD7A7A) with 4 px thick outlines (#544F4B) and positioning them inside the texture’s clipping mask by selecting it and right click > Isolate Selected Clipping Masks.

Once you’re done, exit Isolation Mode by pressing Escape so that we can add the final touches to the icon.

Step 6

Finish off the icon by adding three golden (#DBC07B) 10 x 4 px rectangles with a 4 px outline (#544F4B) positioned 2 px from one another to the center of the football itself.

That Was It!

Thanks for sticking with me for the ride, since I know long reading sessions might make you feel tired, but don’t forget learning requires patience. And I’m hoping that after finishing this tutorial you’ve discovered some new tricks that you can use to further develop your own skills.

See you next time!