Web Graphics: Making Web 2.0 Icons and Graphics Easy

Do you have a question about this topic? Click here right now!
Or check the bottom of this page when you are done reading this article.

Webpage graphics do not need to be complicated in their construction. Even web 2.0 graphics can be created with just a few layers and a few steps. The best part is that you can create visually appealing graphics (including web dividers) in a very short amount of time (with the right graphics software) that can be used to create more elaborate web page sets such as icon sets; you can even create a complete web template if you want. The following is one of many Photoshop photo effects tutorials describing how to create a glossy circular button in Photoshop that can be used for just about any icon you can think of. From there you can create a set of icons that perfectly match you needs.

Photoshop Tutorial - How to Create a Glossy Round Button

   Click on the Button for a Larger Preview

Step 1: Create Your Photoshop File.

Click on the following images for larger views of the steps.

1. Open a New Photoshop file by Selecting File > New.
2. In the New dialogue window, make sure the following settings are set:
   • Name = Glossy Round Button
   • Preset = Web
   • Size = 640 x 480
3. Click OK.

Step 2 Easy: Create the Bottom Circle.

Click on the following images for larger views of the steps.

1. Select your favorite color and the circle tool
2. Hold down the Shift key and click and drag the left mouse button until you get the circle to the size you want.
3. Open the Layers Panel, double click on the layer name and rename the Layer “Bottom Circle Web Graphic”
4. SAVE YOUR FILE

Step 3: Create the Radial Gradient for the Bottom Circle.

Click on the following images for larger views of the steps.

1. In the Layers Panel, right click on your newly created Bottom Circle layer and select Blending Options.
2. In the Blending Options dialogue box, click on the checkbox next to Gradient Overlay and also make sure the text "Gradient Overlay" is highlighted in blue. If not, click on the text "Gradient Overlay" (you should see the center area change to reflect you selection).
3. In the center area make sure the following settings are set:
   • Blend Mode = Normal
   • Opacity = 30%
   • Gradient = white to black and the Reverse box is checked (you can play around with these gradients if you like but, to get the exact affect we are looking for in this tutorial, you will want to stick with these settings)
   • Style = Radial and Align with Layer is checked
   • Scale = 100%.

Step 4 Easy: Create the Drop Shadow for the Bottom Circle.

Click on the following images for larger views of the steps.

1. In the Blending Options dialogue box, click on the checkbox next to Drop Shadow and also make sure the text "Drop Shadow" is highlighted in blue. If not, click on the text "Drop Shadow" (you should see the center area change to reflect you selection).
2. In the center area make sure the following settings are set:
   • Blend Mode = Multiply
   • Opacity = 100%
   • Distance = 0px
   • Spread = 0%
   • Size = 20px
   • Quality - leave as is
   • Layer Knocks Out Drop Shadow doesn't matter

Step 5: Create the Stroke for the Bottom Circle.

Click on the following images for larger views of the steps.

1. In the Blending Options dialogue box, click on the checkbox next to Stroke and also make sure the text "Stroke" is highlighted in blue. If not, click on the text "Stroke" (you should see the center area change to reflect you selection).
2. In the center area make sure the following settings are set:
   • Size = 5px
   • Color = white
3. Click OK.
4. SAVE YOUR FILE.

Step 6 Easy: Create the Button Icon.

Click on the following images for larger views of the steps.

1. Your Button Icon can be anything you want but in this case we used a "Play" arrow. Simply use the Custom Shape tool and select any shape and center it in the circle.
2. In the Layers Panel, double click on the layer name and name the Layer “Button Icon Web Graphic”
3. In the Layers Panel, right click on the Button Icon Web Graphic layer and select Blending Options.
4. In the Blending Options dialogue box, click on the box next to Drop Shadow and also make sure the text "Drop Shadow" is highlighted in blue. If not, click on the text "Drop Shadow" (you should see the center area change to reflect you selection).
5. In the center area make sure the following settings are set:
   • Distance = 0px
   • Spread = 0%
   • Size = 20px
6. Click OK.
7. SAVE YOUR FILE.

Step 7: Create the Top Shading Circle.

Click on the following images for larger views of the steps.

1. In the Layers Panel, select the Bottom Circle Web Graphic layer and press Control + J (Command + J) to duplicate the layer.
2. In the Layers Panel, double click on the layer name and name the Layer “Top Shading Circle Web Graphic”
3. Move the Top Shading Circle Web Graphic layer above the Button Icon Web Graphic layer
4. Set the Opacity of the layer to 20%.
5. Right click on the Top Shading Circle Web Graphic layer and select Blending Options
6. Deselect the Drop Shadow
7. Deselect the Stroke.
8. Click OK.
9. SAVE YOUR FILE.

Step 8 Easy: Create the Top Highlight.

Click on the following images for larger views of the steps.

1. Select the newly created Top Shading Circle Web Graphic layer and press Control + J (Command + J) to duplicate the layer.
2. In the Layers Panel, double click on the layer name and name the Layer “Top Highlight Web Graphic”
3. Right click on the Top Highlight Web Graphic layer and select Clear Layer Style.
4. Double-click on the dark blue color swatch in the Top Highlight Web Graphic layer to open up the "Pick a solid color" dialogue box.
5. Select white
6. Set the Opacity of the layer to 10%
7. Grab the bottom of the circle and hold down the ALT key while clicking the left mouse button and dragging toward the center of the circle to create an oval shape. Once at the desired shape, let go of the mouse. You will need to adjust the sides, so grabs one side of the oval and hold down the ALT key while clicking the left mouse button. Keep doing this until you get the shape you want.
8. Move the oval to the top center of the circle.
9. SAVE YOUR FILE.

Step 9: Create the Bottom Highlight.

Click on the following images for larger views of the steps.

1. Select the newly created Top Highlight Web Graphic layer and press Control + J (Command + J) to duplicate the layer.
2. In the Layers Panel, double click on the layer name and name the Layer “Bottom Highlight Web Graphic”
3. Move the oval to the bottom of the circle.
4. Shrink the oval by selecting one of the corner transform controls and holding down Shift + ALT. Once shrunk to the right size, nudge the oval down to the right spot.
5. SAVE YOUR FILE
6. Discover even more secrets to creating web designs and even free web page templates.

Got A Predicament Or Tips About Web Graphics We Didn't Cover In This Article? Tell Us!

We think it�s great if you would ask any questions you simply may have or share any guidance and methods about web graphics that you may have.

Provide A Interesting Title Right Here!

Reveal Your Story, Ask A Question Or Provide Tips! [ ? ]

Close Help Entering your web graphics story, problem or tips is definitely simple to carry out. Just simply type! Your web graphics story, quandary or guidance will show up on a Net page exactly how you enter it below. You can actually wrap a word in square brackets to really make it appear bold. For instance [my web graphics story] would show as my web graphics story in the Online page containing your story. Strongly Suggested Techniques: 1. Please begin your title with the most important search term or search phrase and add something intriquing, notable and eye-catching. 2. Since the vast majority of folks scan Internet pages, incorporate your greatest thoughts, questions or assistance about web graphics within your initial paragraph. 3. Be certain to help the conversation about "web graphics" or your posting will not, in all likelihood, get published. Please don't bother just saying "great web graphics post!" It would just get deleted. 4. We highly recommend that your post be a minimum of 100 words and be related to "ecommerce website design" to receive the very best possibility of qualifying to be published. Obviously, you are able to make your posting longer but just realize that longer isn't always better. In fact, one of the most defining speeches of all-time, Lincoln's entire Gettysburg Address, is only 272 words and it changed the course of history. EXTRAORDINARY NOTICE: Each and every occasion you send in a top notch post (and it is authorized), you will wind up being inserted in our once a month raffle so that you can acquire a 33% price reduction off of any one of our services.

Upload 1-4 Pictures or Graphics (optional) [ ? ]

Close Help Do you have a picture to add? Great! Click the button and find it on your computer. Then select it.

Add a Picture/Graphic Caption (optional) 

Click here to upload more images (optional)

Add a Picture/Graphic Caption (optional) 

Add a Picture/Graphic Caption (optional) 

Add a Picture/Graphic Caption (optional) 

Author Information (optional)

To receive credit as the author, enter your information below.

Your Name	(first or full name)
Your Location	(ex. City, State, Country)

Submit Your Contribution

Check box to agree to these submission guidelines.

(You can preview and edit on the next page)

Return to Home from Web Graphics - Making Web 2.0 Graphics Easy