Pin Me

Adobe Illustrator CS3 Icons: Blue and Black Gradient Mail Icon

written by: Amanda Presley•edited by: Michele McDonough•updated: 11/2/2010

This simple mail icon is easy to create with the tools in Adobe Illustrator. Read on for the steps that will allow you to design your own mail icon in just a few minutes.

  • slide 1 of 1

    Making Mail Icons with Illustrator

    Adobe Illustrator CS3 Icons - blue and black mail icon - mail icon finished 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.

    Adobe Illustrator CS3 Icons - blue and black mail icon - gradient box 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 SymbolAdobe Illustrator CS3 Icons - blue and black mail icon - 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.