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).

Quicktip:

By adding a layer mask to a layer you have the possibility to fade out parts of a layer completely or partially. When the layer mask is selected in the layer palette you can simply paint with the Brush or Pencil Tool on the canvas or you can use the Gradient and Fill Tool.Wherever you apply black the corresponding layer will fade out completely, different grays will fade it out partially (as if you reduce the opacity just on the specific part of the layer) and white will leave things as they are. It is a powerful feature of Photoshop that allows you to use only parts of a layer without the need to delete something with the eraser.

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

Lets get started…1. The first thing we want to do is create a new document with the dimensions of 1020×1180.2. Starting from the top, we want to begin with our header. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.3. Keeping it black would just be boring, so the next step is to add some blending options. To do so, go to your layer in the layers palette and right click it and choose Blending Options from the drop down menu. Insert the following:4. For our navigation, we want to give it a “bubbly” look at the bottom. To achieve this, there are a few different ways of doing it, and the way I am going to show you is very simple. Using your Elliptical Marquee Tool, make a circle simple to the following and fill it with #000000.5. Now what we need to do is duplicate this layer by selecting your layer in the layers palette and hitting CTRL+J (Command+J). Place your duplicated layer in a similar way as the following:6. Merge your layers and keep repeating this process until you get something that looks like this going across your header:7. Using your Rectangle Marquee, make a rectangle similar to the following and fill it with #000000 on its own layer.8. Merge your “bubbles” layer, and your newly created rectangle layer together and then lower your layers opacity to about 80% and insert the following blending options onto your layer.9. For the logo I used the font Chunk , and for the musical icon, I downloaded the Mono Icon Set. Keep this set handy as we will use it in other parts of this tutorial. I then applied the following blending options to both the icon layer, and my text layer:It will look something like this:10. Our links will be fairly basic on the right side of our header. Using a font similar to helvetica, go ahead and add some white text to represent our links. For our active link text, I used the color #1F282F. I then used the Rounded Rectangle Tool with a radius of 5px to create a box behind my link with the following blending options:11. Your header should look something like this:12. Next we want to create the color glow that will be behind our screenshot preview in our featured area. Create a new group in your layers palette (Command+G), and label it “Color Glow”. Then Command+Click your blue background layers thumbnail preview in your layers palette to make it an active selection. With your new group selected in the layers palette, go ahead and chose the layer mask icon at the bottom of your Layers Palette. This will make it so nothing will be visible in our content area of the site.13. Next use a soft brush to add some bright colors in a similar way to the following, each on their own layer. Then lower the opacity of each layer until you like your results. This is what I came up with:14. I wanted to add a little starburst effect as well that will radiate behind our screenshots, so I downloaded this rising sun brush pack and added a starburst effect.15. Take a screenshot of your favorite music streaming site (I chose last.fm for this tutorial), and place your screenshots in a similar fashion.16. All that is left for this is to add a little shadow underneath our screenshots. Use your Elliptical Marquee with a bit of a feather, and fill a selection similar to the following with #000000 and then lower the opacity to a point you like.17. The last thing I did was to add a “Play” icon that I made using my Elliptical Marquee with a black fill, and my Polygonal Lasso Tool with a white fill. Lower the opacity on it and the left side of our featured area will look something like this when we are complete. We will then be able to move onto the right side.18. Using your Text Tool, add some text in a similar way to the following. Our heading is #1E282F, while our body text is #FFFFFF.19. With your Pen Tool, make a path similar to the following under your heading:20. We want to add a stroke to our path. Chose your Brush from your Tools Palette and make sure your foreground is set to #1E282F, with about a 2px soft brush active. Make sure you are on a new layer, and then select your path from the Paths Palette, and then choose the Stroke Icon at the bottom to add a stroke to your path.21. On your strokes layer, insert the following blending options:22. The last thing we need to do for our featured box is to add our “Sign up now” button, and our “Find out More” button. To do this we want to use our Rounded Rectangle With a Radius of about 20px.23. Add the following blending options to your layer:24. Using your Text Tool, add some text in a similar way to the following. I then added an icon from the Iconic Icon Pack.25. On your icons layer, added the following blending options to give it a nice green gradient.26. Then follow the same steps to create a “Find out more” button. The only thing that changes is that our icon will use a different gradient. I used the same gradient as our blue background, except it is reversed. Your header will look like this when it is finished.27. Our content area is up next. With your Rectangle Marquee, make a selection similar to the following and fill it with #FFFFFF.28. Insert the following blending options onto its layer.29. Starting with the left side of our content area, we are going to make the “Start Listening” box. So pull out your Rounded Rectangle Tool from your Tools Palette and set the radius to 10px.30. On this newly created layer, we then want to add the following blending options:31. To make the the heading of our box, we want to Command+Click (CTRL+CLICK) the thumbnail in our layers palette of our rounded rectangle layer to select it. On a new layer, fill your selection with #000000. Using your Rectangle Marquee Tool, select most of the box that will house content and choose Edit>Clear. It will look something like the following:32. Insert the following blending options onto your newly created layer:33. All that is left for the heading is to add some text to describe the content box. I chose to add a little icon on the right to add a “open new window” type option.34. Once you add some content into the box, you can have something that looks like the following:35. The right side of our content area houses a “featured Artist” box, and “What members say” box. These boxes are fairly basic. Using the Rounded Rectangle with a radius of 10px is how I created the container, and the back of the heading. Use the same gradient you used in step #32 for the background of your box, and then use the same gradient you used for your active link in step #10. Add some content and your content area will look like this:36. All that is left is the footer and then we will be done! Using your Rectangle Marquee Tool again, make a rectangle similar to the following and fill it with #1F282F.37. Now insert the following blending options onto its layer:38. All that is left is to add some icons and text and your footer will be complete. All icons are from the Iconic Icon pack we downloaded previously. When it’s all said and done, your final template should look like the following: