Favorites
Comments
Share
0 Projects

Since school is just around the corner, I thought it would be a nice idea to put together a little back to school icon tutorial, where we’ll learn how to create three different icons using nothing more than the basic shapes and tools that you probably already work with on a daily basis. That being said, grab a fresh batch of that morning coffee and let’s get started!



1. How to Set Up a New Document

As we do with all of our projects, we’ll start by setting up a New Document (File > New or Control-N) which we will adjust 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 (72 ppi)

We’re going to be creating the icons using a Pixel Perfect Workflow, so I highly recommend you take a moment and read this in depth tutorial (http://www.freepik.com/blog/how-to-create-pixel-perfect-icons/) that will get you up to speed in no time.

2. How to Set Up the Layers

Once I have my new document, I like to separate my assets using a couple of different layers, since this way I can streamline my workflow by focusing on one item at a time, which allows me to keep track of each and every shape at all time.

So, open up the Layers panel, and let’s create a total of four layers which we will name as follows:

• layer 1 > reference grids

• layer 2 > bag

• layer 3 > notebook

• layer 4 > books

The way we’re going to be using these layers within our workflow is pretty easy. We’ll want to lock all except the one that we will be working on, so that we won’t move or misplace some of the shapes by accident. Then, once we’re done with the current icon, we can then lock its layer and move on up to the next one.

3. How to Create the Reference Grids

As soon as we’ve layered our project file, we can start creating the reference grids, which will help us create our icons by focusing on consistency and size.

Step 1

Grab the Rectangle Tool (M) and create a 128 x 128 px square, which we will color using #F15A24, and then position it to the center of the Artboard using the Align panel’s Horizontal and Vertical Align Center options.

Step 2

Create another smaller 120 x 120 px square, which will act as the active drawing area, thus giving us an all-around 4 px padding. Color the shape using white (#FFFFFF) and then group the squares (Control-G) and create two more side copies (Control-C > Control-F two times), distancing them at 40 px from the original.

Once you’re done creating and positioning the reference grids, you can lock their layer, and then move on up to the next one, where we’ll start working on our first icon.


4. How to Create the Bag Icon

Assuming you’ve positioned yourself onto the next layer (that would be the second one), let’s kick off the project by creating the first icon, which is the classy school bag.

Step 1

Start by creating the circular background using a 120 x 120 px circle, which we will color using #FFCF6E, and then center align to the underlying active drawing area as seen in the reference image.

Step 2

Add the foreground line using a 92 px wide 4 px thick Stroke line with a Round Cap, which we will color using #2B3249, and then center align to the larger circle, positioning it at a distance of 34 px from its bottom edge.

Step 3

Start working on the little bag’s side section by creating a 10 x 42 px rectangle (#2B3249), which we will adjust by setting the Radius of its left corners to 4 px from within the Transform panel’s Rectangle Properties. Once you’re done, position the resulting shape at a distance of 26 px from the active drawing area’s left edge, and 42 px from its top one.

Step 4

Give the shape that we’ve just created 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 #2B3249 and then flipping its Fill with its Stroke (Shift-X). Set the resulting shape’s Weight to 4 px and its Corner to Round Join, making sure to select and group the two together afterwards using the Control-G keyboard shortcut.

Step 5

Create the bag’s front section using a 52 x 42 px rounded rectangle (#FFFFFF) with a 4 px Corner Radius and a 4 px thick outline (#2B3249), which we will group (Control-G) and then position on top of the previous section, at a distance 34 px from the active drawing area’s right edge and 40 px from its top one.

Step 6

Add the bag’s upper folding section using a 52 x 20 px rounded rectangle (#FFFFFF) with a 4 px Corner Radius which we will adjust by setting its bottom ones to 8 px from within the Transform panel’s Rectangle Properties. Give the resulting shape a 4 px thick outline (#2B3249), grouping (Control-G) and then center aligning the two to the front section’s top edge.

Step 7

Grab the Pen Tool (P) and draw the two diagonal detail lines using a 4 px thick Stroke with the color set to #2B3249. Take your time and once you’re done select both the lines and the bag’s folding section and group them together using the Control-G keyboard shortcut.

Step 8

Add the front section’s locking belt using an 8 x 16 px rounded rectangle with a 4 px Corner Radius and a 4 px thick Stroke (#2B3249), which we will position to the center of the folding section’s bottom edge.

Step 9

Add the buttons using two 4 x 4 px circles (#2B3249), which we will align to the top and bottom of the previously created shape. Once you have the shapes in place, select both them and the belt and group (Control-G) them together before moving on to the next step.

Step 10

Create the two dummy text lines using a 8 x 2 px rectangle (#2B3249) vertically stacked at a distance of 2 px from another slightly wider 12 x 2 px one (#2B3249), grouping (Control-G) and then positioning them at a distance of 4 px from the front section’s bottom-left corner. Once you’re done, select and group all of the front section’s composing shapes together using the Control-G keyboard shortcut.

Step 11

Finish off the bag by adding the top handle which we will create using a 16 x 6 px rectangle with a 4 px thick Stroke (#2B3249), which we will adjust by setting the Radius of its top corners to 4 px. Position the resulting shape on top of the bag’s front folding section, selecting and grouping (Control-G) all its composing shapes together afterward.

Step 12

Start working on the little calculator by creating its side section using a 2 x 26 px rectangle (#2B3249) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position onto the foreground, at a distance of 42 px from the active drawing area’s right edge.

Step 13

Add the device’s front section using an 18 x 26 px rectangle (#FFFFFF) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position onto the right side of the previously created shape, at a distance of 24 px from the active drawing area’s right edge.

Step 14

Create the little screen using a 10 x 6 px rectangle (#2B3249), which we will center align to the larger front section, positioning it at a distance of 2 px from its top edge.

Step 15

Add the screen’s little detail using a 2 x 2 px square (#FFFFFF), which we will position at a distance of 2 px from its right edge, making sure to select and group (Control-G) the two together afterward.

Step 16

Create the device’s little buttons using thre rows of three 2 x 2 px squares (#2B3249) horizontally distanced at 2 px from one another, which we will vertically stack at a distance of 2 px. Take your time, and once you’re done, select and group (Control-G) all the buttons together, doing the same for all of the calculator’s composing sections.

Also, since we’re pretty much done working on the icon, you can select them and the foreground and group (Control-G) those together as well.

Step 17

Add the finishing touches to the icon’s background by creating a 36 x 36 px circle with a 4 px thick Stroke (#FFFFFF), followed by a smaller 24 x 24 px one (#FFFFFF), which we will group (Control-G) and then position as seen in the reference image.

Step 18

Finish off the icon, by selecting both the circles and the background and then sending them to the back of all the other objects by right clicking > Arrange > Send to Back. Once you’re done, select and group (Control-G) all of its composing shapes together, before moving on to the next one.

5. How to Create the Notebook Icon

Assuming you’ve successfully finished working on the first icon, lock its layer and then move on to the next one (that would be the third one), where we will focus on creating the little notebook.

Step 1

As we did with the previous icon, start by creating the background using a 120 x 120 px circle, which we will color using #FFCF6E and then center align to the second active drawing area.

Step 2

Add the foreground line using a 92 px wide 4 px thick Stroke line with a Round Cap, which we will color using #2B3249, and then center align to the larger circle, positioning it at a distance of 34 px from its bottom edge.

Step 3

Create the front section of the notebook’s bottom body using a 52 x 6 px rectangle (#FFFFFF), which we will adjust by setting the Radius of its right corners to 3 px from within the Transform panel’s Rectangle Properties. Give the resulting shape a 4 px thick outline (#2B3249), grouping (Control-G) and then positioning the two onto the foreground, at a distance of 20 px from the active drawing area’s right edge.

Step 4

Add the device’s side section using a 28 x 6 px rounded rectangle (#2B3249) with a 3 px Corner Radius and a 4 px thick outline (#2B3249), which we will group (Control-G) and then position onto foreground, at a distance of 20 px from the active drawing area’s left edge.

Step 5

Create the little USB ports using two 4 x 2 px rounded rectangles (#FFFFFF) with a 1 px Corner Radius, which we will horizontally distance at 2 px from one another, grouping (Control-G) and then positioning them onto the side section, at a distance of 8 px from its left edge.

Step 6

Add the audio port using a 2 x 2 px circle (#FFFFFF), which we will position at a distance of 4 px from the previously created shapes’ right side. Take your time, and 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

Move a few pixels upwards and start working on the device’s upper body by creating its side section using an 8 x 42 px rectangle (#2B3249), which we will adjust by setting the Radius of its left corners to 4 px. Give the resulting shape a 4 px thick outline (#2B3249), grouping (Control-G) and then positioning the two on top of the lower body, making sure to align them to its left edge.

Step 8

Add the front section using a 56 x 42 px rounded rectangle with a 4 px Corner Radius and a 4 px thick outline (#2B3249), which we will position on top of the device’s lower body, at a distance of 38 px from the active drawing area’s right edge.

Step 9

Create the actual screen using a 44 x 30 px rectangle, which we will color using #2B3249 and then center align to the shapes that we’ve just created.

Step 10

Take a couple of moments and add the text columns, using two groups of five 16 x 2 px rectangles (#FFFFFF) vertically stacked at 2 px from one another, on top of which we will add a smaller 12 x 2 px one (#FFFFFF), positioning them as seen in the reference image.

Step 11

Create the webcam using a 2 x 2 px circle, which we will color using #2B3249 and then center align to the front section’s top bezel. Once you’re done, select and group (Control-G) all of the current section’s composing shapes together, doing the same for the entire notebook afterwards.

Step 12

Add the final touches to the icon’s background, by creating a 24 x 24 px circle with a 4 px thick Stroke (#FFFFFF) followed by another slightly bigger 36 x 36 px one (#FFFFFF), which we will position as seen in the reference image.

Step 13

Finish off the icon, by selecting the two circles and the background, and then sending them to the back of all the other shapes by right clicking > Arrange > Send to Back. Once you’re done, make sure to select and group (Control-G) all of the shapes together before moving on to the third and last one.

6. How to Create the Books Icon

We are now down to our third and last icon, so without wasting anymore time make sure you’re on the right layer (that would be the fourth one) and let’s finish this!

Step 1

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

Step 2

As we did with all the previous icons add the foreground line using a 92 px wide 4 px thick Stroke line with a Round Cap, which we will color using #2B3249, and then center align to the larger circle, positioning it at a distance of 34 px from its bottom edge.

Step 3

Create the standing book’s front section using a 34 x 48 px rectangle (#FFFFFF) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position onto the foreground line, at a distance of 28 px from the active drawing area’s right edge.

Step 4

Add the cover’s inner section using an 18 x 32 px rectangle (#2B3249), which we will center align to the previously created shapes.

Step 5

Create the inner frame line using a 24 x 38 px rectangle with a 2 px thick Stroke (#2B3249), which we will center align to the front section’s larger rectangles.

Step 6

Add the top dummy text lines using two 10 x 2 px rectangles (#FFFFFF) vertically stacked at 2 px from one another, which we will group (Control-G) and then center align to the cover’s inner section, at a distance of 6 px from its top edge.

Step 7

Create the bottom text line using a 4 x 2 px rectangle (#FFFFFF), which we will position onto the inner section’s bottom-right corner, making sure to leave a 4 px gap around it. Once you’re done, select and group all of the front section’s composing shapes together using the Control-G keyboard shortcut.

Step 8

Add the book’s side section using an 8 x 48 px rectangle (#2B3249) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position onto the left side of the front section.

Step 9

Create the side section’s bottom text lines using two 2 x 4 px rectangles (#FFFFFF), vertically stacked at a distance of 2 px from one another, which we will group (Control-G) and then position at a distance of 6 px from its bottom edge.

Step 10

Add the taller text line using a 2 x 26 px rectangle (#FFFFFF), which we will position at a distance of 4 px from the previously created shapes. Once you’re done, select and group all of the side section’s composing shapes together using the Control-G keyboard shortcut.

Step 11

Create the little bookmark’s main body using an 8 x 8 px square, which we will color using #2B3249, and then position onto the right side of its front section, at a distance of 8 px from its top edge.

Step 12

Adjust the shape of the bookmark by adding a new anchor point to the center of its right edge using the Add Anchor Point Tool (+), which we will select using the Direct Selection Tool (A) and then push to the inside by a distance of 4 px using the Move tool (right click > Transform > Move > Horizontal > -4 px). Once you’re done, select and group (Control-G) all of the book’s composing sections before moving on to the next step.

Step 13

Start working on the bottom horizontal book by creating its front section using an 18 x 16 px rectangle (#FFFFFF) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position onto the left side of the standing book as seen in the reference image.

Step 14

Add the front section’s circular detail using a 24 x 8 px ellipse (#2B3249), which we will adjust by selecting its right anchor point tool using the Direct Selection Tool (A), and then removing it by pressing Delete. Close the resulting shape’s path using the Control-J keyboard shortcut, center aligning it to the larger underlying rectangle’s right edge, making sure to select and group all of them together using the Control-G keyboard shortcut.

Step 15

Create the book’s side section using a 6 x 16 px rectangle (#2B3249) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position onto the left side of the previously created section. Once you’re done, don’t forget to select and group (Control-G) all of the book’s composing shapes before moving on to the next step.

Step 16

Start working on the top horizontal book by creating its front section using a 10 x 16 px rectangle (#FFFFFF) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position as seen in the reference image.

Step 17

Add the rectangular detail using a 4 x 4 px square, which we will color using #2B3249 and then center align to the front section’s right edge, making sure to select and group them together afterward using the Control-G keyboard shortcut.

Step 18

Create the book’s side section using a 6 x 16 px rectangle (#2B3249) with a 4 px thick outline (#2B3249), which we will group (Control-G) and then position onto the left side of the previously created shapes. Since we’re pretty much done working on the books, don’t forget to select and group (Control-G) all of the current one’s composing sections together, doing the same for all three of them afterwards.

Step 19

As we did with all the other icons, take a couple of moments and add the final touches to the current one’s background, by creating a 24 x 24 px circle with a 4 px thick Stroke (#FFFFFF) followed by another slightly bigger 36 x 36 px one (#FFFFFF), which we will position as seen in the reference image.

Step 20

Finish off the icon and with it the project itself, by selecting the two circles and the background, and then sending them to the back of all the other shapes by right clicking > Arrange > Send to Back. Once you’re done, make sure to select and group (Control-G) all of the shapes together before hitting that save button.

Saved by the Bell!

There you have it folks, a quick step-by-step tutorial on how to create your very own back to school icons, using nothing more than the basic geometric shapes and tools that you probably already work with on a daily basis. As always I hope you had fun creating the items, and most importantly learned something new and useful during the process.

Now you can show the world what you have learned.

Add a new project

Help us to improve tutpad

What's your opinion of this tutorial?

american-express behance calendar check cloud comment cross disabled down download dribbble envelope error exclamation facebook file filter folder globe google+ heart heart home inbox info instagram vimeo interogation laptop left linkedin lock logout marker master-card minus prev notification pause paypal pencil phone pinterest play forward plus prev refresh resize right save search settings share star stop stumbleupon support tablet tag thumb-down thumb-up time trash twitter unlock up upload url user visa warning youtube zoom-in zoom-out fire menu-burger eye paper-plane shopping-cart subtitles icon photo vector mockup video flame copyright volume list fullscreen stats earnings receipt bug replay beginner intermediate advanced English clip suitcase French Spanish Italian Brazilian happy neutral-happy neutral neutral-sad sad premium spinner cookie credit-card align-left align-center align-right justify bold underline italic typography link right-quotations list-editor