How to Create Web 2.0 Reflections Like a Pro

Reflections are one of the bread and butter tools of a lot of Web 2.0 designers these days. You can see examples of it all over the web. It really does wonders for a simple graphic, and its really not that difficult to accomplish. For this tutorial I will be using Photoshop CS4, but since there is nothing too exotic going on here I think it should work well for earlier versions.

Lets start by creating a new file with dimensions of 500 x 300 with a white background layer.

You will need to use an image with a transparent background or clean the back ground up yourself. For this I will be using the Kryptonian shield, which you which you can download, and for ease of understanding, I would recommend doing so.

Paste the image into the new file you have just created and name the layer “Main”. Center the new layer horizontally and vertically with the background layer.

Create a copy of “Main” and name is “Reflection”.

With the “Reflection” layer selected click Edit > Transform > Flip Vertical.

In the layers pallet, drag the “Reflection” layer below the “Main” layer. Your layers pallet should look like this:

Now with the “Reflection” layer still selected, switch to the Move Tool (Keyboard Shortcut: v) and move it so that the top tip is now around five pixels or so below the the bottom tip of the “Main” layer.

Change the opacity of “Reflection” to 60%. This could vary depending on the image, but its usually a safe place to start.

Next double click on the “Reflection” layer. Click on Gradient Overlay to activate it and bring up the options panel. Click on “Gradient” to being up the Gradient Editor. Choose the second option in your presets pallet, which will be black fading into clear (unless you have another color set).

Change the gradient so that both of the bottom color sliders are set to #cccccc. Next move the left slider to to the right to the 70% position and the Opacity Midpoint (the upper diamond) to 95%. Click Ok twice so that we are back to our image. Your image should now have the “Refection” layer almost completely covered in off-white.

Create a new layer and name it “Bottom”. Drag the layer underneath the “Reflection” layer in your layers pallet. Switch to the Rectangular Marquee Tool (Keyboard Shortcut: m) and make a selection that covers the bottom half of the image. Change your foreground color to #f2f2f2 we used earlier in the gradient. Click Ok and then select the Paint Bucket tool (Keyboard Shortcut g). Fill the selected area with the Paint Bucket.

Now we are going to give some depth and pull it all together. Double click on the “Bottom” layer and select the “Gradient Overlay” tool. Again click on “Gradient” and select the color to clear preset and make sure the colors are set to #cccccc. Click Ok twice to return to the image.

Thats all there is to it! If you’d like, you can download the PSD for reference.