The summer break is over, and it’s back to school time! Did you know that the school year starts at different times in different countries around the world? In my childhood, the Ukrainian school year began on 1 September. In Germany, where my daughter used to attend school, it started in the middle of September. In the USA, where we live now, school begins near the end of August.
Today, I'd like to invite you to draw a few school supplies by using basic shapes in Adobe Illustrator. We will take simple forms—like the rectangle, ellipse, and triangle—apply Warp effects, and use the Offset Path. By the end of this tutorial, you will know how to cut shapes using the Minus Front or Intersect button on the Pathfinder panel, and make your school supplies look three-dimensional! Let’s get started!
If you don't feel strong enough to finish the whole tutorial today, you can find many icons over on Envato Market, including several different education themed icon packs.
1. Create the Pencil
Step 1
After opening your Adobe Illustrator, create a new document with 850 x 850 px Width and Height. In order to be able to precisely move objects, we need to enable the Smart Guides. So let’s go to View > Smart Guides (Control-U). We will start by drawing the pencil—make three rectangles that are attached to each other by using the Rectangle Tool (M). Delete the stroke color and set the fill colors shown in the image below. The rectangle in the middle will have a slightly lighter color. Then select all three rectangles and go to Effect > Warp > Bulge. In the new window, adjust the following options:
Step 2
Using the Ellipse Tool (L), draw a yellow ellipse. Place it in the back—while the ellipse is selected, use the combination: Control-X, Control-B.
Step 3
Add a light brown triangle by pressing the Polygon Tool. After you click on the artboard, a new dialogue window will pop up. Enter 3 Sides and any Radius. You can adjust the size of the triangle. Make a copy in front (Control-C, Control-F) and then make it narrower. Be sure to place both triangles behind the yellow rectangles (use the Control-X, Control-B combination).
Step 4
Let's make the pencil tip, the lead. Make a copy of the larger triangle
in front (Control-C, Control-F). Set it to a dark gray color. Using the
Ellipse Tool (L), create the ellipse which overlaps the gray triangle,
as shown in the image below. Select this ellipse and the gray triangle;
press Minus Front button on the Pathfinder(Window > Pathfinder) panel. You will get the tip of
the pencil.
Now let’s give some volume to the tip to make it more realistic. Make a copy of the newly created tip in the front, twice. Stretch down the last copy. Select one of the copies of the tip (you have two, remember?) and the copy which you stretched down. Press Intersect in Pathfinder(Window > Pathfinder). Make the resulting shape lighter.
2. Create the Highlighter
Step 1
Pick the Rectangle Tool (M) and make a red rectangle. Select the bottom left anchor point using the Direct Selection Tool (A) and press theRight Arrow on your keyboard a few times.
Using a similar technique, move the bottom right anchor point to the left. Remember to count how many times you pressed these arrow buttons so your shape will look symmetrical. Using the Ellipse Tool (L), add two ellipses on the top and bottom of the rectangle. Select all three objects and unite them by using the Unite button on the Pathfinder panel.
Step 2
Make a copy of the created shape in front, stretch it vertically and
shrink it horizontally just a tad. On the image below, this
copy is shown with a black stroke, but you don’t need to change the
color. Make another copy of the original shape in front. Now you should
have three copies: two originals and one stretched. Select one of the
originals and the stretched one. Hit the Intersect button on the
Pathfinder panel. Change the color of the newly
created shape to a lighter color.
Now repeat these actions to create another lighter shape inside. Make a copy of the top shape in front, stretch it vertically, and shrink it horizontally. Make another copy of the lighter shape in front, select both shapes, and press the Intersect button in Pathfinder. Choose an even lighter color for the topmost shape.
Step 3
Let’s create the upper part of the highlighter. Draw two ellipses that
overlap each other as in the image below. Keep both of them selected and
press Unite in Pathfinder. You will get one shape. Take the Delete
Anchor Point Tool (-) and click on these internal left and right anchor
points to make them disappear.
Next, we need to make a kind of
divider (image 2). Draw two gray ellipses that almost overlap each other.
If you take a close look at the pink stroke (which of course you don't
need to make), you will see how the ellipses need to be placed. ClickMinus Front in Pathfinder.
Lastly, place 2 over 1. That's it. You should have a cylinder-like shape, which will also be used in the next steps.
Place this part on the base of the highlighter. If your shape is too small, make it bigger, or vice versa. You have the Smart Guides, so it shouldn’t be so hard.
Step 4
Create a copy of this cylinder-like shape, make it smaller, and place it on top of the larger one. To highlight the border of these two shapes, add the gray divider from the previous steps. A slight stretching of this divider will probably be necessary.
Step 5
Place the two black rectangles as in the image below. Just select the
bottom one, and go to Effect > Warp > Bulge. In the new window,
enter the options shown. You will probably need to adjust the size
of the upper rectangle.
Add a black ellipse on top of the smaller rectangle and, while keeping all three shapes selected, hit the Unite button on the Pathfinder panel.
Step 6
For the final detail of our highlighter (the part with which you highlight), make a red rectangle. Select the top right anchor point using the Direct Selection Tool (A) and move it down, as shown in the image below. Draw a dark red ellipse and place it on top of the deformed rectangle. Copy the deformed rectangle in front and select this shape and the ellipse, and then hit the Intersect button on the Pathfinder panel. Make a copy of the “semi-circle” shape in the back (Control-C, Control-B), and stretch it down a little. Change the color of this shape to pink.
Step 7
Once everything is placed together, your highlighter should now look like this:
3. Create the Backpack
Step 1
Shall we create a cute backpack now? Let’s start by forming the base of the backpack first. Hit the Rounded Rectangle Tool and draw a rounded rectangle similar to the shape shown below. While keeping it selected, go to Effect > Warp > Bulge. In the new dialogue window, adjust the options as you see in the image below.
Step 2
Add another smaller, lighter rounded rectangle on top. Create another copy of it in the back (Control-C, Control-B), shift this copy down a bit, and make it darker.
Step 3
To create a small handle for the backpack, make a circle (use the Ellipse
Tool (L) while holding down the Shift key), with just the stroke color,
without the fill color. On the Stroke panel, increase the stroke weight
to have a similar shape as in the image below. Select the circle and expand it: Object > Expand Appearance. We need to expand
because later if you need to make the backpack smaller or bigger, it
will change its size proportionally.
To add shoulder straps, first make a rounded rectangle and slightly tilt it to the left. To make a second reflected rounded rectangle, select the original one, right-click > Transform > Reflect, choose Vertical, Angle 90 degrees, and press Copy. Move the created copy of this shape to the right side using the Right Arrow button on your keyboard. Do not forget to put the backpack's handle and both shoulder straps behind the body of the backpack. To do this, select them and hit Control-X, Control-B.
Step 4
To add pockets, make a long, rounded, light blue rectangle with a narrow yellow rectangle on top of it. Select both of these rectangles and send them to the back of the image (Control-X, Control-B).
Step 5
Let’s add a zipper to the backpack. Draw an ellipse filled with a yellow color. Choose the Direct Selection Tool (A) and select the right and left anchor points. Slide them down. Create a circle over it, select both shapes, and press the Minus Front button on the Pathfinder panel.
Step 6
To make the front pocket, draw another rounded rectangle. To make a yellow border for this pocket, select it and go to Object > Path > Offset Path. Set the parameters Offset: 3 px, Joins: Miter; Miter limit: 4. The offset value is approximate, and it depends on the size of your original shape. To use the same yellow color as we did for the zipper, select the border, and then select the Eyedropper Tool (I) and click on the yellow zipper. The color of the selected object will change to the one which you clicked with the Eyedropper Tool.
Place the zipper on the front pocket.
Step 7
To create the clasp, first create a rounded rectangle. Then add a tiny
dark blue circle. Move down this circle while holding the Shift and Alt
keys together. You will see that you just made a copy. Press Control-D
once and you will get a third copy.
To make a belt buckle, create a rounded rectangle with yellow stroke and no fill color. Make a heavy stroke, by adjusting on the Stroke panel. Do not forget to expand this rounded rectangle: select it and hit Object > Expand, OK.
To add
the belt prong (you’ll meet some strange words you probably didn’t
expect to encounter!), create another ellipse (yellow fill color, no stroke color). Choose the Direct
Selection Tool (A), select the right and left anchor points, and slide
them up.
Group the whole clasp (right-click > Group).
Step 8
Place the clasp on the left side of the bag. Hit the Alt and Shift keys and move this clasp to the right with your mouse. This way, you’ll create a second copy of the belt, which will be horizontally aligned. Your bag is ready for school.
4. Create the Blackboard
Step 1
And of course, we will now create a blackboard—the place where some of the school nightmares begin.
Let’s start with a brown rectangle (Rectangle Tool (M)). To make the black rectangle inside the brown one, we will take the following steps: keeping the brown rectangle selected, go to Object > Path > Offset Path and enter Offset -8 px; Joins- Miter; Miter limit 4. Change the color of the created rectangle to dark gray. Now again, select the dark gray rectangle and go to Object > Path > Offset Path and enter Offset -3 px; Joins- Miter; Miter limit 4. Give light gray color to this new rectangle inside.
To add some volume to the image, we will make another rectangle (I know—we’re creating a whole bunch of rectangles today...), slightly bigger and lighter than the brown one. Select the brown rectangle, go to Object > Path > Offset Path and set the parameters: Offset 2 px; Joins- Miter; Miter limit 4. Make it lighter.
Step 2
Let’s add the shelf where you can place the chalk. Create another brown rectangle and attach it below the blackboard. Make a copy of it in the back. Move the back copy slightly up and change the color to light brown.
Step 3
Now we will add a dark brown rectangle on top of the board, centered, and another one with the same color, on the bottom left. The rectangle on the bottom will represent the leg of the blackboard. For a slight modification, we will select the bottom anchor points of this rectangle with the Direct Selection Tool (A) and slide it slightly to the left. To make another leg, select the left leg, right-click > Transform > Reflect, choose Vertical, Angle 90 degrees, and press Copy. Move the created copy of the leg to the right.
Step 4
To finalize the image, we will add chalk—with a white rectangle. Be sure to have it placed behind the light brown rectangle from the shelf. We are done with the blackboard.
5. Create the Backgrounds
Step 1
Don’t give up—we’re almost there! Let’s draw one light gray square of 850 x 850 px Width and Height, and a darker circle on the top-left corner of the image. To make a copy of this circle horizontally aligned, hold down the Alt and Shift buttons and move this circle to the right. Next, select these two circles and, while holding down the Alt and Shift keys, move them down. You should end up with four darker circles, all symmetrically aligned.
Step 2
Now, this is the easiest step of today’s tutorial. Simply place the created objects inside the circles. To easily move them around, group each object separately (right-click > Group).
Today's Class Is Over!
If you are still in school, I hope that this school year will be smooth and enjoyable for you. If you are a parent, have lots of patience and be proud of your children. If you are not related to school in any way, have fun running down memory lane while drawing these supplies.
