Web 2.0 Tricks – Making Your Site Look Contemporary and Professional

Photoshop Tutorial: How to Make Reflections

“Reflections” are a cool, popular Web 2.0 trick that really makes your site look polished – literally. If you’re looking to have an online marketing presence, it’s important that your site looks as contemporary and as professional as possible – and subtle effects like this is what will achieve that image.

Last time you visited a car showroom, I’m sure you realized the floor buffed to a shine – to the point where you could see the cars’ reflections on the showroom floor. In fact, the cars probably were so clean, you could see yourself in them. “Reflections” indicate cleanliness, newness, professionalism and quality. Images, icons, and text on your favorite site designs (and even print/video designs) use this effect to have their brand give this feeling to their audience.

If you’re just beginning Photoshop, creating this effect is really simple:

1. Isolate the image you want to reflect in its own layer. In the example below, I have the “e-nor” logo image in its own layer.
   
2. Duplicate the layer by right-clicking on it and choosing that option. Rename the new layer to a meaningful name, such as “image reflection”.
   
3. Select the layer by choosing the “selection tool” and right-click on the image. Choose “Free Transform”.
   
4. Right-click again and choose “Flip vertical”.
   
5. Move the reflection just below the original image.
   
6. Add a layer mask to the reflection layer. Use the “gradient tool” to create a gradual fading mask. For the first gradient, reduce the opacity of the gradient tool to something in the middle, like 50%-75% so you get a light fade. Do that as many times till you get the right transparency.
   
7. To create a more realistic effect, increase the opacity of the gradient tool back to 100%, then create a layer mask gradient from the bottom of the image till about the middle of the image to fade out the bottom of the reflection.
   

Note: you want to make sure the reflection very subtle and really transparent. An opaque reflection usually looks like a cut, unfinished image and comes out to be gaudy more than anything else.