Pin Me

Adobe Illustrator CS3 Icons: Back and Forward Sunset Icons

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

If you're looking for something a little different to use in your web page design, you may want to try these icons with a sunset theme. With Adobe Illustrator, these icons are easy to create, and this guide will walk you through the steps.

  • slide 1 of 1

    Steps for Creating the Icons

    Adobe Illustrator CS3 Icons - back and forward sunset icons - finished 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.