Design Oahu

Web design blog from the middle of the pacific.

Simple Reflection Photoshop Tutorial

There are a few different ways to create reflections for that “Web 2.0″ look, but I will show the way that works best for me.

1. Create a new window, or open your file. I used the AMEX Centurian Card image.

First Tutorial Image

2. Expand you canvas to give you a little more room. A little extra on the sides and double the height.

3. Copy the layer (CTRL + J), and enter transform mode (CTRL + T). Set the height to -100%. (Note: You must rasterize the layer before entering the transform mode.)
Second Tutorial Image

5. Enter Quick Mask Mode (Q). Select the Gradient Tool (G). Make sure the gradient is a black to white linear gradient. Click at the top of the copied layer and drag down somewhere towards the bottom of the copied image. Hold down the SHIFT key to make sure the gradient is straight.

Third Tutorial Image

6. Return to Standard Mode (Q). A selection will be available. Press Delete to have the lower portion deleted with a nice fade. Now lower the transparency to something around 40%.

7. Create a new layer below your other layers to create a nice background. I used a sky-blue to white linear gradient.

Final

8. Enjoy!

If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.

2 Comments

  1. Comment by Jeremy on November 24, 2006

    Added larger images, sorry for the thumbnails before!

  2. Comment by Chad on March 30, 2007

    very cool! Thanks for sharing

Leave a Comment