How to Make a Reflective Logo Effect

This is a brief tutorial on how to create a reflective or shiny logo effect. This has been a design trend that has been appearing more and more throughout Web 2.0 sites. *With this tutorial I am assuming you know some of the basics of Photoshop, like how to feather a selection or merge layers.

Whats all this Web 2.0 stuff? Web 2.0 is a loose term describing the new generation of the Internet that emphasize online collaboration and sharing among users. How all the logos started getting “shiny”, I have no idea. Maybe it is because of all the new shiny floors that now seem to be the standard on Web 2.0 sites. But it has now become ubiquitous so maybe most of you don’t need this tutorial, or perhaps you even wrote a better one

Let’s start:

I am using Photoshop CS and opened a new document about 420 x 240 pixel dimension and at 72 DPI. If this was a logo for a client the resolution would be much higher, in the 150-300 DPI range.

I used the font Gill Sans MT to create the “Web 2.0″ text.

Then I used a cool green color, and a shade of that green to color the text and break up the 2 elements. I also created 2 oval shapes by using the shape tool in the toolbar. I set the opacity of these shapes to about 10% and merged them onto one layer. This subtle shape over the text adds a little illusion of depth and makes it seem less flat.

The next step is to merge all the layers together, the text and the oval shapes, and duplicate that layer. So we have our logo, Web 2.0, and duplicate layer. Lets flip the duplicate layer vertically and move it underneath the original so that it is almost touching the bottom of the text and looks like a mirror image.

Finally to create the subtle shine I select the circle marque tool from the toolbar and create an oval the width of the document and place it just below the bottom flipped logo layer. I set a feather radius for the selection to about 33, and hit delete twice. Then set the opacity of this layer to about 20-40%. I like to tweak this bottom part a bit by scaling it a tad vertically without using the constrain proportions, I feel it adds a bit of extra illusion that can enhance the feel.