Pin Me

Adobe Illustrator CS3 Icons: Red Round World Wide Web Icon

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

In this tutorial, I am will show you how to create a red round world wide web icon in Adobe Illustrator. This button can be easily customized to blend in with your web site's theme.

  • slide 1 of 1

    Creating a WWW Icon

    Adobe Illustrator CS3 Icons-red round world wide web icon - finished This is a red round World Wide Web icon. The icon is created using a gradient and a world wide web symbol. This tutorial will show you how to create the red round world wide web icon. Go ahead and open your Adobe Illustrator CS3 program. Create a new document to work on.

    Drawing the Background

    We will start off by creating the background part of the icon. Go to your tool bar and grab the circle tool. The circle tool is embedded under the rectangle tool. Hold the Shift key down and draw a circle on your document. Draw the circle the size that you want the background of the icon to be.

    Applying the Gradient to the CircleAdobe Illustrator CS3 Icons-red round world wide web icon - gems and jewels gradient box 

    Now you will need to open the Gradients panel that we are going to use. Go to the top of your window and click Window > Swatch Libraries > Gradients > Gems and Jewels. When the gradient box opens you will need to look for the Ruby gradient. Click your circle to select it and then click the Ruby gradient to apply it.

    Opening and Adding the World Wide Web Icon

    Next, we will need to open the box with the World Wide Web icon. Go to the top of your window and click Window > Symbol Libraries > Web Icons. When the box opens, you will need to locate the World Wide Web icon. It should be the last icon in the box. Click the icon and drag it to the circle that you created. You may need to resize it. You can resize it by clicking it and dragging the corner.

    Editing the World Wide Web Symbol

    Now I will show you how to edit the world wide web symbol. Click the symbol to select it. Right click on it and click Break Link to Symbol. Now you can edit the symbol. In the top part of your window you will see the different options that you have for editing the symbol. I changed the symbol on my icon to white. Drop the second box down and select white for the stroke color. You can change the stroke size of the symbol if you want too.Adobe Illustrator CS3 Icons-red round world wide web icon - symbol properties 

    That’s how you create the Round Red World Wide Web Icon in Adobe Illustrator CS3. If you need to make adjustments to the icon, you can do so before exporting it. All of your options for the symbol are located at the top of your Adobe Illustrator window.