Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
This tutorial will demonstrate how to craft a delicious Chinese food icon set. This tutorial requires a generous command of Adobe Illustrator's tools. Let's dig into this yummy icon design tutorial, which includes numerous vector illustration techniques.
Final Image Preview
Below is the final design we will be working towards.
Start by drawing a rectangle using the Rectangle Tool (M). Move the bottom two points inward by selecting them with the Direct Selection Tool (A).
To quickly create the 3D qualities we'll use Illustrator's 3D Extrude feature. Go to Effect > 3D > Extrude & Bevel... Enter the numbers shown below to achieve a similar look. Depending on how exactly you drew your shape, the numbers below might need to be altered slightly. Click OK once the result looks good to you.
In order to work with the object you will need to expand and ungroup it first. Go to Object > Expand Appearance. Then go to Object > Ungroup. Continue to ungroup the object until you are able to select each individual shape that comprises the object. Give each side of the box a flat color that will be similar to the final color of the box.
This is a great time to think about where your light source will come from. I have decided that the light will come from the upper left side, so, the right side of the box has a darker color. Keep this concept in mind when working with other elements so everything is consistent.
To create the flaps and folds of the box, we'll simply draw the shapes we need using the Pen Tool (P). Draw a line down the center of the top of the box before you start making the other shapes. This will make it easier to make sure the flaps look symmetrical
Note: it will be easier if you lock the main box shape before you draw the other shapes on top of it. This will ensure you're not inadvertently clicking on shapes you don't intend to. To lock an object press Command + 2.
Draw the other flap now.
Draw the triangle flaps on the side.
Make a copy of the front of the box and keep it off to the side for use in a later step.
You can give the flaps on the top and side a quick linear gradient to help distinguish them from the other shapes. However, the most prominent surface will have more detail and rendering so we'll use the Gradient Mesh Tool (U) to give us the ability to create a more complex look.
When adding points with the gradient mesh tool it's important not to create too many unnecessary points. To streamline the amount of points you make follow the example below.
Click in the center first (1). Click above and to the left (2). Points 3 and 4 are automatically added as a result of click 2. Last, click in the bottom right where the two blue circles are and all the other points will automatically be placed. When possible, add points directly on the red lines to avoid creating several more points than necessary.
Use the Direct Selection Tool to select a row of points and give them a darker color. It may help keep your color consistent throughout the piece, if you drag new colors into the color palette as you make them. This way you're not guessing what color you used on a previous point.
Give the top of the box a gradient using the Gradient Mesh Tool as well. Since there are flaps overlapping part of the top you might need to adjust the points and handles (circled with a dotted line). Using the Direct Selection Tool, drag the points and handles around to get the gradient positioned in just the right spot. Moving the points and handles are an easy way to get the gradient to look as you want it to.
The side of the box can be shaded with a radial gradient.
Give each of the flaps a drop shadow by going to Effect > Stylize > Drop Shadow... Make sure to select a color that is close to the color of your box. For example, there are shades of green in my box so I selected a dark green for the shadow. This helps it blend a little better than using black.
This is what your box should look like right now.
Add some Asian-inspired text to your design. You can find cool and interesting fonts for free at dafont.com.
Use the same variables you used in Step 2 with the exception of adding an Extrude Depth. Keep this number at 0 and click OK.
To add color to your text go to Object > Expand Appearance. Then go to Object > Ungroup. Continually ungroup the object until you can no longer ungroup it. Now, you'll be able to give the text a vibrant gradient. Notice that my gradient transitions from a bright red to a slightly darker color.
Grab the shape that you put off to the side. We'll use this to make a reflection on the front of the box. Draw another shape that cuts across the box shape. Using the Pathfinder click Divide. Ungroup and delete the other shapes that you do not need.
Position the reflection over the box and text. Give it a dark green to white gradient and set it to Multiply in the Transparency palette.
Create a subtle highlight by blurring an oval shape by going to Effect > Blur > Gaussian Blur...
This is what your icon should look like right now.
To make the basic shape of the fortune cookie draw an ellipse using the Ellipse Tool (L).
Add two points on both sides of the bottom of the ellipse using the Add Anchor Point Tool (+).
Use the Direct Selection Tool to move the center point to the middle of the ellipse.
Once you rotate the ellipse you will want to condense it vertically. However, since the object was rotated you will not be able to proportionately condense it without first going to Object > Transform > Reset Bounding Box.
Now, condense the shape down slightly.
At this point you have the overall shape of the fortune cookie. You can now freehand draw the other elements to enhance and complete the cookie.
Add shading to the cookie by giving it mesh point using the Gradient Mesh Tool. Adding mesh points to objects that are more complex will tend to produce unexpected angles and curves. Again, adjust the points and handles using the Direct Selection Tool. Don't worry about making every single shading detail. You can use the gradient mesh for the base shading and continue to the next step to add more detailed shading.
An easy way to more precisely control the shading is to draw a basic shape on top of your object and blur it by going to Effect > Blur > Gaussian Blur... This technique works well for both highlights and shadows.
Add the message that sticks out of the fortune cookie by drawing a simple rectangle then distorting it by going to Object > Envelope Distort > Make with Warp...
Go to Object > Expand and press OK on the resulting dialog. Now you'll be able to give the shape a slight gradient and a drop shadow.
Place the fortune cookie where you like. Duplicate and reflect it by double clicking the Reflect Tool (O). Give both fortune cookies a drop shadow to complete this element.
The chop sticks can be made using the ellipse shape as a starting point.
Move the top point down, using the Direct Selection Tool, until it reaches the tip of the handle for the side points.
Drag a vertical guide onto the page in the center of the ellipse shape. Place a rectangle starting at the guide. Divide the shape using the Pathfinder and eliminate the unneeded pieces.
Use the Direct Selection Tool to raise the highlighted point up slightly, which will make the shape look more like a chop stick.
Go to Effect > 3D > Extrude & Bevel... Enter the variables below or modify them to suit your style if needed. Click OK when you are finished.
Give the chop stick a highlight by drawing a long thin white shape and blurring it by going to Effect > Blur > Gaussian Blur...
Copy and paste the chop stick and overlap them. Give the area that overlaps a shadow by manually drawing one using the Pen Tool (P).
No Chinese food is complete without a little grease! Create a natural looking grease stain by using the Pencil tool (N). Use the Pathfinder to get rid of any unnecessary leftover shapes. Set the mode to Multiply in the Transparency palette or adjust the stains' Opacity if you desire.
Create a shadow that extends off and to the bottom-right. Note that the shadow does not go past the dotted line as this would indicate that the light source is directly behind the icon, which it's not.
Draw in shadows for the chop sticks too.
You've just learned how to craft a Chinese food icon set. Dig in!