DesignLovr

Today you’ll learn how to reproduce a popular design effect in Photoshop: The Mirror Effect. This is the first out of a series of post that will teach Photoshop beginners how to apply various design effects to their designs.

But we have more than just a plain tutorial for you, we’ll also talk a little about the Mirror Effect and how and where to use it. Finally we also have a mini showcase of web sites that use the mirror effect.

The Tutorial

Step 1

Open a new document (you can choose the dimensions by yourself) and add the object or text of your choice in form of a new layer. I chose a styled-down version of the DesignLovr logo.

Step 2

Duplicate the layer (Ctrl+J) and flip the new layer by going to Edit>Transform>Flip Vertical.

Move the freshly flipped layer down until the bottom of the original layer and the top of the duplicated either touch or have only little space in between them (depending on which method you choose you get a slightly different Mirror Effect, just play a little around and see what you like).

Step 3

Now you have to add a layer mask to the duplicated layer by clicking on the little symbol at the bottom of the layer palette (see the red circle below). Select the Gradient Tool (Shift+G), choose black and white as colors in the Tool Option Window (it usually is placed directly above your canvas) and move the white stop to the left until a location of 50% is indicated (see screenshot below).

Now create the gradient by clicking on the lowest point of your duplicated layer (in my case it was the bottom of the D of DesignLovr) and pulling a straight line to the highest point (the end of the g in the example).

Step 4

The only thing left to do now is to lower the opacity of the duplicated layer in the Layers Palette (usually a value between 30% and 50% is good) and you’re done. Looks great, doesn’t it?

Final Result

In order to create an even stronger mirror impression you can also add a split gradient to the background as I did below.
You can achieve different results by playing with the distance between the two layers, the gradient you add to the layer mask and different opacity values.

I also prepared a version in which I used an icon (from the Smashing Retro Icon Set) instead of text, the process is the same.

Additional Info

The Mirror Effect had his big moment a few years ago during the Web2.0 boom. It was heavily (over)used on a great amount of web sites and is out of this reason a little bit frowned upon by many web designers nowadays. But that is no reason not to use this effect if it suits your design.

The mirror effect can help to give your design depth, realism and a polished, shiny look. As you will see in the showcase it is often (and should be) used very subtle and added rather to objects than text. It seems to be especially popular in the combination with iPhones (another, overused web trend).

Just do yourself and others the favor and use the effect only if it really fits rather than on your next grunge design.

The Showcase

The amount of web sites that use a mirror effect is much smaller than it was just a few years ago, but you can still find it on selected web sites.

In combination with a simple black or white background it adds an extra ounce of elegance (reminding one of shiny, polished surfaces) to a web site and can help to emphasize a product or object.

Enjoy!

960pixels

Cookmate

Filemaker

Maridaje Digital

Media Temple

MobileMySite

Newstream Design

Suki

Tanner + Tailor

VixML