Adobe Illustrator CS3 Icon Creation Tutorial: Back and Forward Sunset Icons

Amanda Presley
Categories : Web development ,Internet
Tags : Internet web development topics beginners tutorials

Page content

Steps for Creating the Icons

In this tutorial I will show you how to create a back and a forward sunset icon. These icons have a back arrow on one and a forward arrow on the other one. There is a sunset type gradient applied to the icon. These icons were created using Adobe Illustrator CS3. Create a new document and we will get started. We will create the first icon and then duplicate the second icon.

Drawing the Background Part of the Icon

Select the rounded rectangle tool from the toolbar. Draw a square on your document. Draw the square the size that you want the icon to be. If you need to adjust the size of the square later, you can do so by using the transform tool.

Applying the Sunset to the Icon

Next, we will apply the sunset gradient to the icon. Go to the top of your window and click Window > Graphic Style Libraries > Buttons and Rollovers. Click the icon to select it and click the Red Coils Mouse Down style. Place your mouse over the styles to see the names of them.

Changing the Border Color of the Icon

Next, you will need to change the border color of the icon. Click the icon and double click the stroke color in the toolbar. Change the color of the stroke to # B73E09 and click OK to apply it. Change the stroke size to 2pt.

Adding the Arrow to the Icon

Now we will add the arrow to the icon. Go to the top of your window and click Window > Symbol Libraries > Arrows. When the arrows box opens, locate the Arrow 6. Click it and drag it to the icon. Rotate the icon to point left or right. It doesn’t matter which way. You may need to resize it. Next, you will need to right click on the arrow and click Break Link to Symbol. Click the arrow to select it and change the color fill to white and the stroke color to black.

Creating the Other Icon

Now you are ready to create the other icon. Hold down your Shift key and select both the arrow and the square. Press CTRL C on your keyboard and then press CTRL V. The new icon will pop up on your document. The only thing that you will need to do now is flip the arrow. Right click on the arrow and click Transform > Reflect > Vertical. Then click OK.

Your icons are now finished. You can make any adjustments needed before exporting the icons.

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.