If you’ve seen the web in the past couple of years you may have noticed that everything suddenly became all glossy and bubbly.  You may have even heard the buzz word for this style, Web 2.0.  Its good to know how to create these glossy images.  They are appealing to the eye and can be quite fulfilling for a designer once finished.

Begin by opening Photoshop and creating a new file. Its always best to create your images at the largest size you think you’ll ever need. For this icon we’ll use 400px by 400px.

Select your ellipse tool and draw a large circle. Hold the shift key to constrain the proportions of the circle. The color doesn’t really matter yet as we will use gradient overlay for color later.

Now select your custom shape tool. From the menu at the top select a star shape. Draw your star in the center of your circle like so. Ive used a different color just for illustration purposes. We will color this later using a gradient overlay as well.

Now we will begin adding color to the image. Double click on the circle layer in the layers pallete. You should click not on the layer icon itself but near the text of the layer. This will bring up layer style. Select gradient overlay and create a nice gradient for the circle. I usually choose to use a 2 color gradient which moves a dark shade to a lighter shade of the same color. I chose a blue color but you can use what ever you wish to use.

Do the same for the star using a different color gradient. I chose to use a red color. You should now have something that looks like this.

Now that the basic icon is created, we will add the nice glossy touch that gives it that web 2.0 feel. This will require us to rasterize some layers that we will create. We will also be altering the opacity and blending mode of these layers.

Duplicate the circle layer and clear the layer style. Change the color to white. Finally, rasterize this layer by right clicking and selecting rasterize layer.

Now duplicate the original circle layer once more. Resize it to be a little larger than the original circle. Then position the layer like this.

We will use this larger circle to make a selection which will allow us to create a glossy highlight.

Ctrl-Click on the large circle to make a selection. Then select the rasterized white circle layer. Hit delete to delete the majority of the white layer leaving only a white highlight. You can now discard the large circle. Your image should now look something like the following.

We will now adjust the opacity and blending mode of the highlight layer. In the top of the layers palette youll see the blending mode which is by default set to normal. Set this to overlay. Opacity is located directly next to the blending mode. I set mine to 32%. We should now have something like this.

Hit Ctrl-D to deselect everything.

Now we want add a little gloss to the star. We will do this the same way we created the gloss for the circle. Create a white circle that covers the top third of the star. Rasterize this layer. Ctrl-click the star layer. Hit Ctrl-Shift-I to invert the selection. Make sure the new white circle layer is highlighted and press delete. This should leave a white gloss on the star. Set the blending mode to overlay and bring the opacity down to about 25% using the process from above. Now you should have something like this.

Lastly, I added a drop shadow and an inner glow to the star with the default settings. The final image should look something like this.

discuss this topic to forum