Photo reflections in 5 steps
Many have referred to this as the “Apple reflection”, though in truth it had been used elsewhere before Apple made it their iconic look-and-feel both on their web site and through iTunes. The technique has caught on in much the same way as drop shadows did a couple of years ago, and transparency and rounded corners when the mystical and undefinable Web 2.0 was introduced. Now you’ll find mirror reflections all over the web, on logos and photos alike. If you’ve ever wondered how to create this effect, and want to get in on the action before it goes out of fashion, follow this step by step tutorial and learn the tricks of the trade.
What you’ll need (or rather, what we’ve used here - feel free to use equivalent alternatives if you prefer):
- Adobe Photoshop CS2
- A suitable photo or image
- 5 minutes
This tutorial uses only the basic tools that Photoshop comes with, no plugins or extensions, and you’ll probably be able to achieve the same results with any other good image manipulation program.
Step 1: The original image
To make the most of your reflection you’ll want to use an image with a clear, defining bottom edge; if you’re placing the image on a black background, having a dark bottom to the image will effectively cause it to blend into the background rather than stand up on top of it, and the reflection will be lost. If necessary, crop the image or adjust the brightness/contrast to ensure a good clean edge.
Step 2: Duplicate
Create a copy of the image and put it on a new layer. In Photoshop you can do this quickly and easily by dragging the layer icon down onto the New Layer button at the bottom of the window.
Step 3: Reflect and Scale
Since we want the reflection to sit underneath the original, you’ll need to extend the canvas to make room for it. As a general rule, aim to extend the canvas by about 30-50%.
Next, flip the reflection layer vertically and pull it down so that it’s sitting on the baseline of the canvas. It’ll overlap the original at this point, but don’t worry, we’ll come to that next.
Scale the reflection layer by selecting Free Transform from the Edit menu, grab the top middle handle and squash the image down so that it’s just below the baseline of the original image. This creates the effect that the reflection is on a surface that is at a slight angle, which generally seems to work more convincingly.
Step 4: Fade out
Create a transparency mask for the reflection layer. With the mask highlighted, select the gradient fill tool and fill from white to black, top to bottom, starting at the baseline of the original image and finishing halfway between there and the baseline of the canvas. Remember that white means fully visible and black means fully transparent. You should end up with your reflection fading out from top to bottom.
You might want to put another layer behind your image layers to show a background, just to make things clearer. You can easily change the background colour later. You will notice that the reflection is still too visible, so take the reflection layer’s transparency down to about 40-50%, or whatever your preference.
TIP: leave a little space between the bottom of the original image and the top of the reflection, as this will further suggest that the original image is floating above a shiny surface.
Step 5: Warp (Optional)
To give your image even more of a 3D feel, you’ll want to add some perspective into the mix. To do this you will have to link the original image and the reflection together, so that the warping is applied to both at the same time. Select both layers and choose Merge Layers from the Layer menu. Then select Perspective from the Edit -> Transform menu, grab one of the corners of the image and pull it down a little, as per your taste; the opposite corner will come in the same amount automatically (remember to double-click the image or press Return to actually perform the transformation). You will notice that the image will appear stretched horizontally at this point, so select the Free Transform tool again and pull one of the sides in to compensate.
All that is left to do then is crop the image and save either with or without the background layer, as per your needs (you can save as a 24-bit PNG image to preserve the cool transparency, but be aware that IE6 and below won’t know what to do with that). Have fun, experiment with it, and see what you can create! Just don’t overuse it…
Matthew