Learn How to Create a Blue and Black Gradient Mail Icon with Adobe Illustrator

2008-10-30

Page content

Making Mail Icons with Illustrator

This is a blue gradient icon with a mail symbol on it. This icon is very easy to create. In this tutorial I am going to show you how to create the blue and black gradient mail icon. The icon is created using the round rectangle tool, gradients, and web symbols. I will take you through each step of creating this icon. First, you will need to open Adobe Illustrator CS3 and create a new document to work on.

Drawing the Rectangle

We will start off by drawing the rectangle part of the icon. Grab your rounded rectangle from the toolbar on the left. The rounded rectangle is beneath the rectangle. You will need to click the rectangle and hold it until the menu expands, then click the rounded rectangle. Draw the rectangle on your document. Draw it the size that you want the icon to be. If you need to resize it later, you can do so by using the transform tool.

Applying the Gradient to the Icon Background

Next, we will apply the gradient to the icon background. You will need to open the gradient box, so go to the top of your window and click Window > Swatch Libraries > Gradients > Sky. When the Sky Gradient box opens, look for the Sky 8 gradient. This should be the 8th gradient in the box. Click the rectangle to select it, then click the Sky 8 gradient to apply it. You will need to double click the Stroke Color Box in the toolbar and change the color to black.

Creating the Mail Symbol

Next, we will create the mail symbol. The symbol is already created for you, you will have to make the adjustments. Go to the top of your window and click Window > Symbol Libraries > Web Icons. When the box opens, look for the mail icon. The name of the icon is Contact. Grab the icon with your mouse and drag it to the icon background.

Right click on the mail icon and click Break Link to Symbol. Go to the top of your window and change the stroke size to two. If that is too bulky for you, feel free to adjust it. You may need it thicker than that. It all depends on what size icon you are creating.

Make any adjustments that you may need to the icon. Then you can save the icon and export it. If you want to adjust the size of the mail icon, select both the icon and the background. Then click the transform tool and adjust the size of the icon.

This post is part of the series: Adobe Illustrator CS3 Icons

This series will show you how to create different icons in Adobe Illustrator CS3.