Designing Web 2.0 – Part 2 (Reflections)

Use of reflections (applied to a logo).

Learn how to create a web 2.0 style reflection that can be applied to different web elements; a helpful guide to some useful photoshop techniques you can incorporate into your other designs.


More...No 2.0 site would be complete with out the subtle 3D effect of a reflection or two.
Taking our new logo, using the marquee tool make a selection around the whole logo.
Now make sure the background (all white layer) is NOT visible:

Press Cntrl-Shift-C (to copy all layers to the clipboard merged). And then press Cntrl-V (to past the selection to a new layer).

Press Cntrl-T (to free transform the new flat logo), then Right-Click and select ‘Flip Vertical’.

Apply the transformation (press the tick or press enter).

Now move the upside down logo to just below the right way up logo, so that the letters are just touching.

Getting there!

Now (making sure you are still on the upside layer) make a selection half way through the letters, make sure the selection is a little wider than the whole logo

Now press Cntrl-Alt-D (to feather the selection)

 

Use around 20 (but play about), select ‘OK’, and delete the area selected. You may need to delete it again (say three times) to get the desired effect.

Now at this point I find it helpful to make the background layer visible again. Now the reflection is looking good, all that is left to do it to lower the opacity as much as you think is necessary.

And you are done!

 

You can use this technique all over the place:

The Mac reflection needs a bit more work, but you get the idea!
To make the mac reflection look better you could increase the feathering to give a longer more subtle reflection, you could also reduce the opacity further. Something a little more advanced would be to free transform the reflection and pull in the lower two corners, this would give the illusion of perspective. Look out for another tutorial on advanced reflection techniques!

Leave a Reply