Handy Web 2.0 Icons In Photoshop

In Interface by Fabio

When we are working on a Web design project, we quite often need icons to show commands like add, delete, or edit. With the Web 2.0 trend, the use of badges and subtle 3D has become very popular. In this tutorial, I will show you how to create a really easy and very nice 3D effect to be used in either buttons and icons or elements that need some depth.

Step 1

Create a new document and select the Ellipse Tool (U). It doesn't matter what color you use because it will be replaced later with the Layer Styles.

Step 2

Double-click the ellipse layer to open the Layer Style dialog box. Then select the Gradient Overlay and use a blue and a lighter shade of blue for the gradient colors. For the style use Radial. Next add a Bevel and Emboss as shown below.

Tip: move the radial gradient more to the top of the circle. To do that with the Layer Style dialog box still open, make sure that you are on the Gradient Overlay section, and click and hold the button and start to move the gradient.

Step 3

Duplicate the circle layer and resize it to make it slightly smaller, like the image below.

Step 4

Double-click the new layer to open the Layer Styles dialog box. Deselect all previous effects (Bevel and Emboss and Gradient Overlay). Now select Stroke and for the Fill Type select Gradient. For the colors select white for both ends of the gradient and change the opacity to 0% for the beginning and 100% to the end.

Step 5

Select the Horizontal Type Tool (T) and create a text layer. Make sure that this layer is at the top. Now open the Layer Styles box and change the Color Overlay to white, and select Inner Shadow and use the settings shown below.

Step 6

Group the three layers and call it "Blue Circle".

Step 7

Select the Polygon Tool (U) and change some settings as shown below to create a Star Badge. Duplicate the layer and resize it like we did in step 3.

Instead of applying those layer styles to the layer, just copy the style from the previous icon we created and paste it to our new layer. To do that, select the layer you want to copy the layer style of, right-click on the mouse (Macs: Option-Click) and choose Copy Layer Style. Next select the layer you want to add the style to and right-click again and choose Paste Layer Styles.

The only thing you will have to change will be the gradient colors under the Gradient Overlay.

Conclusion

This is one of the easiest ways to create a cool 3D style button. You can eve change some settings like the stroke's gradient color and create different 3D styles.

If you enjoyed this post, your vote is always highly appreciated!! Delicious StumbleUpon Float Reddit Mixx

Comments

Add a Comment

Note: We use Gravatars on PSDTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!

Trackbacks

Leave a Trackback