Hey, everyone! Less is more, right? In this tutorial you will learn how to create three food-related icons in a unique style, using simple shapes, shadows and halftones.
1. Create a Background
Let’s create a 600 x 300 px New Document. Using the Rectangle Tool (M), create a 600 x 300 px rectangle, color
#958496, click twice on the layer you just created and name it "background", and click on the lock icon to lock the layer.
2. Create the Tea Icon
Step 1
Using the Ellipse Tool (L), create a 130 x 130 px circle (fill color
#8EA5B2, stroke color #444444, 2 pt—please always use these stroke parameters in this tutorial). Hold Alt and drag the mouse to the right, to duplicate the circle. Press Control-D to transform again. You should have three identical circles.
Step 2
Create a 147x147 px circle (fill color
#EFEAE6). Using the Stroke panel, make all strokes rounded and Align Stroke to Outside.
Place the circle you just created in the middle of the first blue circle and, using the Direct Selection Tool (A), select the upper point and hit Backspace to delete it. Using the Align panel, with both shapes selected, click on the blue circle to make it active and click on Horizontal Align Center.
Using the Pen Tool (P), create a shape as shown in the picture below and drag it a little below the center.
Step 3
Create a circle, using the same stroke parameters, around 20 x 20 px and, using the Direct Selection Tool (A) as before, delete the right anchor point as shown in the pictures below.
Step 4
Let's create a shadow. Select the cup shape and use Alt to duplicate it next to the art board.
Now use the Pen Tool (P) to create a shadow shape as shown in the picture, and make it 5% black. Using the Pathfinder panel, click on Intersect to separate the shapes.
Now you have a shadow. Place it on our Tea icon.
Step 5
Let's create the tea bag. Select the Pen Tool (P) and draw a line about 20 px long starting from the cup's upper edge.
For the tea bag, create a 15 x 17 px rectangle shape (fill color
#EB9696, keep the stroke the same as everywhere else, and don't forget to Align Stroke To Outside).
Using the Add Anchor Point Tool (+), create three points on the bottom of the tea bag and with the Direct Selection Tool (A) click in the middle and drag it up a little.
Step 6
Create a shadow for the tea bag the same as for the cup, using a slightly darker shade for the shadow color.
Step 7
Using the Pen Tool (P), create two lines about 25 px long, place them as shown in the picture, and group them (Control-G). With the grouped lines and the blue circle selected, go to the Align panel and click on Horizontal Align Center and Vertical Distribute Center.
Follow the same process with the grouped lines for all three circles.
3. Create the Hamburger Icon
Step 1
Using the Ellipse Tool (L), create a 75 x 57 px circle (the same color and stroke as for the cup). Place it in the middle of the second blue circle—this will be our hamburger icon.
Take the Line Segment Tool (\) and create a line like this.
With the smaller circle and the line selected, open the Pathfinder panel.
Take the Direct Selection Tool (A) and delete every point under the line, including the line itself. Round the corners using the handles.
Step 2
Using the Rectangle Tool (M), create a 50 x 7 px rectangle (fill color
#EB9696, keep the stroke the same as everywhere else, and don't forget to Align Stroke to Outside). Make the corners round.
Step 3
Create a shadow the same way as for the tea bag, using the same fill color.
Step 4
Use the Pen Tool (P) to create a line about 50 px long. Go to Effects > Distort & Transform > Zig Zag.
Make the size 1 px, Ridges per segment 7, Points Smooth, and then selectPreview to see if you are happy with result and click OK.
Step 5
Using the Rectangle Tool (M), create a 50 x 8 px rectangle (the same color and stroke as for the cup).
Using the Direct Selection Tool (A), select the points and with the left and right arrows make it look like a trapezoid. Round the corners a little.
4. Create the Soup Icon
Step 1
Using the Ellipse Tool (L), create a 66 x 66 px ellipse using the same white color and stroke. Take the Direct Selection Tool (A) and delete the upper point.
Step 2
Using the Pen Tool (P) create a shape like this:
Fill it with the same red color as we used before.
Step 3
Create a shadow for the bowl the same way as for the tea bag, using the same fill color.
Ok, we are almost done!
5. Create a Halftone Shadow
Using the Ellipse Tool (M), create a 0.3 px circle (fill color
#2D2A2D) and just drag it into the Swatch panel. Click twice on your new swatch and click Done.
That's basically it! Create a circle and fill it with halftone pattern and place it behind your icons. As for the hamburger icon, Control-C / Control-F to copy and paste in front of the selected object, lose the stroke and fill in with halftone pattern. Go to the Transparency panel and, with both shapes selected, choose 40%.
That’s All for Now
That's it! Hope you learned how to create icons and halftone swatches and will be able to create something new on your own! See you in the next tutorial!
