Learner Tutorials

In this tutorial, we’ll explain how to create an eco-friendly paper icon with simple shapes and gradients. This tutorial is great for beginners to get started with icon design, as this is a fairly simple icon to create. Let’s dive in!

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Beginner
• Estimated Completion Time: 1 hour

 

Step 1

Open up a new document and select the Rectangle Tool (M). Create a rectangle. We don’t care yet about color and stroke.

Step 2

Select the Shear Tool. This tool can be found under the Transform Tool.

Step 3

Click on the bottom-right corner once with the Shear Tool and start moving the mouse cursor. You will see how the rectangle gets transformed. Try to achieve a similar shape as you see below.

Step 4

Create another rectangle and transform it as well with the Shear Tool, but this time in the other direction so it aligns perpendicular with the first shape.

Step 5

Select both shapes and fill them with a beige-brown and set the stroke to none.

Step 6

Select the Pen Tool (P) and add path points to the upper line of the rectangles. We’ll manipulate them slightly as shown. This is to to create a worn look on the top of the paper bag. If you need some practice with then Pen Tool, then review the tutorial Illustrator’s Pen Tool: The Comprehensive Guide, as we’ll be using the Pen Tool throughout this tutorial.

To do this, select the points with the Direct Selection Tool (A) and move the added points around. Start giving the shapes a tailored look and fill them with a brown to beige gradient. Place the gradient highlight towards the top.

Step 7

Add more anchor points if necessary.

Step 8

With the Pen Tool, create another shape that is placed on top of the left shape. Try to follow the shape, but keep it half the size. Fill it with a darker gradient. This will simulate a glued paper bag side.

Step 9

Create another shape similar to the one in the image for the right side and place it behind the front shape. Fill it again with a gradient, but try to place the gradient highlight towards the back.

Step 10

Add a small triangle to the left side on the bottom of the bag. Fill it with a darker color or gradient.

Step 11

Create an outer shape with the Pen Tool (P) around the paper bag. The shape is totally up to you. Just make sure that the shape overlaps with the other shapes.

Step 12

Create a copy of all shapes, then select them all and go to the Pathfinder Palette. There, select the Unite shape mode.

Step 13

This is what you should have after uniting all shapes. Just make sure that you still have all the other shapes. If not, undo (Command + Z).

Step 14

Take the united shape and place it behind all the other shapes. Make sure you delete the extra outline shape, since we don’t need it anymore.

Step 15

Create a black filled funky shape and place it under all shapes. This will be the shadow, which is falling towards the back, since we want to simulate that the light source comes form the front.

Step 16

Select the shadow shape. Then apply a Gaussian Blur effect of 10 pixels.

Step 17

Set the Transparency Opacity to 14%

Step 18

Let’s make the recycle icon next. Create a Polygon with the Rectangle Tool (M). Click once on the Artboard, and in the pop-up window, set the radius to 50pt and the sides to 3 . Then click OK. Fill the triangle with a brown color.

Step 19

With the triangle selected, go to Effect > Stylize > Round Corners and apply them.

Step 20

With the triangle selected, expand the appearance (Object > Expand Appearance). Now go to Object > Path > Offset Path and apply a 10pt offset as shown.

Continue Learning…

In this tutorial, you’ll learn how to create a fun, vector icon of a people symbol, frozen in an ice cube, from scratch. We’ll explore the usefulness of Adobe Illustrator’s 3D tools. The whole creation can be divided into two different parts. Part I: The ice cube, and Part II: The people icon. We’ll start with the ice cube in Part I. Then we’ll create the people icon and integrate them together in Part II. Let’s get started!

Final Image Preview

Below is the final image we will be working towards in this two part tutorial. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Illustrator CS3
• Difficulty: Intermediate
• Estimated Completion Time: 4-5 hours

Part I: The Ice Cube

Below is the image we’ll be working toward in Part I of this tutorial. We’ll be making an ice cube.

Step 1

There are lots of reference images of ice cubes. You can follow any reference for the basic shape. A cube has six sides: four sides, top and bottom. We will create those sides. I’ve drawn a shape, and will follow the drawing shown below.

Step 2

Now draw a rectangle for each side. So we need to make six rectangles to complete the cube shape. Draw the rectangles by following the image. Keep in mind that the layers should be arranged in proper order, which means the top shape remains on top, the bottom shape at the bottom and frontal sides appear in front of the back sides. Make the fill color None, for now we need only outlines.

Step 3

Hide the frontal faces (shapes) and show only the back side faces and bottom face.

Step 4

Now the primitive cube is ready. But the edges of the cube are hard and straight. To make it look like an ice cube, we have to break the edges. So, first select a shape, add anchor points to it and then make the shape curvy using the Convert Anchor Point Tool. Do not forget to blunt up all sharp corners of the shape. Finally, the sharp rectangle should look like an unevenly curved rounded edge rectangle.

Step 5

Do the same thing for the two remaining layers. Do not worry if the shapes overlap each other a little.

Step 6

Select one shape and fill it with a gradient. By default, it will appear as a black to white gradient.

Change gradient colors and make the gradient range from cyan to a lighter tint of that same color.

Step 7

Select the other layers and give them the same gradient. To do this, select a layer and then pick the gradient with the Eyedropper Tool from the previously colored layer.

Step 8

We need to align the gradients in such way that the center part appears darker than the outer part (towards the edges). For this, select a face of a cube (rectangle), take the Gradient Tool and drag it diagonally towards the center.

Step 9

Now we need to make the faces a bit transparent. Set the Opacity of the back sides to 60%. And for the bottom make it 80%.

Step 10

Switch on the top shape. And start repeating the Steps we did for the back and bottom faces to make that look uneven. While shaping up the top face just keep in mind that the edges of the top face should match the edges of back sides as much as possible.

Step 11

Pick and apply the same gradient as others. Drag the Eyedropper Tool to adjust the gradient to your choice. You may name the layers so that you don’t get confused, if you wish. Reduce the transparency of the layer to 50%.

Step 12

Now we don’t need the outline any more. Toggle outline colors to None.

Step 13

Select the back sides and the bottom layer together and make them a group (by pressing Command G). Name it as “back part.” You may lock that group as well; we do not need to modify it anymore.

Step 14

Since the basic properties of water or ice is transparency, we’ll have to keep the ice cube transparent so that anything we put inside it will be clearly visible. We cannot make the frontal sides the same as we did for back parts. Instead, we’ll make shines and reflections to indicate the existence of front faces. Switch on the visibility of the front side shapes. But they will be used as guides only. For your convenience in selection, you can group them and name them as well.

Step 15

Draw a Y shape, along the edges of the front faces. Make that uneven. Fill it with a white color and set it to no stroke. Reduce the transparency of this layer to 75%. This will look like a bright shine on the edges of the cube and serve the much needed purpose of bringing volume to the cube.

Step 16

Let’s make some more shines (technically it’s called specular highlights). These highlights can be of any shape. For realistic looks, refer to as many reference images as you like from the internet or elsewhere, and then you will get a clear visual idea of how ice reflects light and shines. Anyways, let’s continue. I’ve drawn more shapes on the top face of the cube. Remember not to keep any outline on the shapes.

Continue Learning…