Creating Those Cool Reflections in Photoshop

 

Web 2.0 has a distinct look and feel. Part of that is a set of gradients and reflections. I’ve been doing reflections in Photoshop for quite awhile now, but I’m always looking for an easier way to accomplish that. I just ran across a site that has the most elegant way to create reflections. It’s a video tutorial, so I’ll try to wrap that up in text as best as possible.

reflection.png

Create a document with your text layer. Duplicate that layer and flip that vertically, pulling the duplicate layer down so it is a reflection under the first. To feather this second lower layer out to make this effect more impressive, use the Square Marquee utility, with a feathering setting of 10px, to select the bottom half of the second layer and then hit delete. This effectively removes most of the reflection, and you can now play with the opacity of that layer to fine tune the effect even more.

Overall, I’m very impressed with this approach and it makes it so much easier to accomplish this task.

Sebastian Sulinski Design

Comments (4) Leave a Comment
  1. paul June 18th, 2008 at 23:08 | #1

    You forgot the “f” in reflections. :)

    Quick tip: you may want to consider leaving the drop shadow off. If you think of the text as if it were in the real world, the reflection is visible because it’s sitting on top of a reflective “floor”, and the drop shadow is visible because it’s backed up against a “wall”. The two don’t always go together, especially if there’s no distinction between the wall and the floor in the surrounding color. Just my 2 cents.

  2. Matt June 18th, 2008 at 23:52 | #2

    Guess I should have done a better job at proofreading my own tutorial, haha.

    As well, thanks for the shadow tip. I pulled that text from the images used elsewhere on the site, which do have the drop shadow, but not a reflection. I thought it looked rather strange, but I couldnt quite put my finger on it still.

    Also, good to hear from you Paul. Its been awhile, hope all is well with you.

  3. usb October 2nd, 2008 at 13:30 | #3

    Great tutorial thanks. Here is drop shadow generator: http://www.dropshadowz.net

  4. Matt October 3rd, 2008 at 19:50 | #4

    Thanks for the link, there are some useful tools there!

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackbacks are closed.