How to Create a Reflective Website Image in Photoshop

Welcome to my blog, please feel free to subscribe to my RSS feed, join me on Twitter or leave a comment.

A while back, I wrote a simple tutorial for Photoshop on creating reflective text in Photoshop CS3, I’ve had a lot of people interested in it over the year and a couple have asked me how to apply this same technique to images, photos or even screen shots of their website.

The original image. (right-click to download)

Creating a reflective screen shot in Photoshop is pretty straight forward. First, you’ll need a great image. For that, I’m going to borrow an image from thefuturebuzz.com’s great finds on Flickr and use a Raindrop image by play4smee (most likely not his/her real name).

Now what we want to do first is open the image in Adobe Photoshop. If you don’t already have a copy, why not download a free trail from Adobe or take the time to win one from me? Now that you have your image open, let’s do some basic resizing to make sure we’re all working on the same page.

I’d like to use the Image > Image Resize … menu option to reset the width of the file to 400px and you’ll see the height should auto set 286px.

To create the reflective effect we need to do a few fancy steps to our Photoshop document which are actually pretty easy but sound complicated. 

First, we need to reset our color pallet to the defaults. We do this so that we’re working with a black and white foreground. To do this, simply press the D key. This will reset your pallet to the default values.

Two Layers

Next we need to copy the image to a new layer. There are a couple ways to do this but I’m lazy so lets selected the entire image (Control-A on a PC or Apple-A on a Mac) and the cut the image out with a Control-X or Apple-X command. Finally, paste using Control-V (if you can’t figure out the Mac command, you shouldn’t be reading any further). What you should be left with is two layers, the top most being an image of the leaf.

For the record (because I can already here some people shouting about alternative methods) you could have accomplished the same thing by dragging the Background to the page icon at the bottom of the layer menu and then deleting the content of the background … which would have done the same thing but confused a lot of new users. You could also have accomplished this using menus instead of shortcuts but what fun would that have been right?

Duplicate the Layer a second time so you end up with two Layers plus the white background.

Next, you’ll need to reset the size of the document using the Image > Canvas Size … menu option.

Canvas Size

First, we want to make sure that you’re going to increase the canvas at the bottom of the image so we darken the top center option in our “tic-tac-toe” board. 

Secondly, let’s switch the inches option to pixels, this will allow us to work in the same unit of measurement as we did when resizing the image. Not that it really matters because I would like you to increase the Height of the document to 400px (or 5.556 inches).

When you click OK you’ll be returned to your document which now has a large white sash across the bottom of it. This is where we are going create the reflection effect for our image.

To create the effect, make sure you’re on the top leaf photo in your Layer menu. If you can’t see your Layer menu you can activate it using the Windows > Layers menu item or by pressing F7. Sometimes when I lose the window I like to press F7 just to see it disappear and then reappear.

Reflective Leaves

Control-T will begin the Transformation process for your image, Photoshop will automatically find the image on the layer so there’s no need to select anything. At the very bottom of our image, in the very center is small square box. Right click this box to reveal the Flip Vertical option and click it, making your image flip upside down. Now press the Enter key to accept this change. For those of you who prefer menus you can do the same thing using the Edit > Transform > Flip Vertical option. 

Now that you’ve reached this point, you’ll want to select the Move tool (V) and drag your top layer so that it is at the bottom of your top layer. This will cause a reflective mirror image between the two layers which is very close to being completed.

Ideally we want to wrap this up by fading the bottom image to white and making it appear light enough that it could reasonably be a reflection in glass.

Final Layer Structure

To do this, we need to adjust the Opacity settings of the Layers and add a Layer Mask to the layer. Opacity is easy, in your Layer pallet simply change Opacity: 100% to Opacity: 50%. This will lighten the overall content of the layer, as you would see in a reflection. 

Next, add a Layer Mask using the third icon on the bottom of your Layers pallet and we’re ready to add the gradient to your image to complete the effect.

Before I continue I want to explain that a Layer Mask is used by Photoshop to knock out an area in an image, it’s literally a mask on your image so anything you don’t want to see you can simply use black paint brush to block out. We’re going to do something similar but with a gradient tool.

Selecting the Gradient Tool can be a bit of a pain, sometimes it’s hidden under the Paint Bucket tool in the Tool menu. First, let’s make sure you can see the Tools menu. If not, it’s under Windows > Tools. Now select the Gradient tool (G) or click the Paint Bucket and hold your button down until the Gradient tool appears and then select it.

With the Gradient Tool selected, drag a line (hold the Shift key to make it straight) from the top of your reflective edge (where the two images come together) to the bottom of your image. You can adjust the depth of reflection to meet your desired effect.