« »
Feb 21
2011

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.

Reflections on the Apple website

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.
    Reflections in Photoshop - Step 1
  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”.
    Reflections in Photoshop - Step 2
  3. Select the layer by choosing the “selection tool” and right-click on the image. Choose “Free Transform”.
    Reflections in Photoshop - Step 3
  4. Right-click again and choose “Flip vertical”.
    Reflections in Photoshop - Step 4
  5. Move the reflection just below the original image.
    Reflections in Photoshop - Step 5
  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.
    Reflections in Photoshop - Step 6
  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.
    Reflections in Photoshop - Step 7

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.

Tags:

2 Responses to “Web 2.0 Tricks – Making Your Site Look Contemporary and Professional”

  1. idris says:

    great tutorial
    thank you for sharing

  2. Its is a great tutorial
    thanks man

Trackbacks

  1. Tweets that mention Web 2.0 Tricks – Making Your Site Look Contemporary and Professional « E-Nor Blog – Marketing Optimization and Google Analytics -- Topsy.com

Leave a Reply