Web 2.0! Web 2.0! Web 2.0! Glossy! Glossy! Glossy! Agh!

Yes there have been literally thousands of ‘Web 2.0′ glossy roll-overs, buttons, highlights, reflections and artificial 3D tutorials spawned over the past few years. So what? Here’s another! The reflection effect is widely used on the web today and is especially popular with logo design. I’ve made a consistent use of it on my Sans Design website (www.sansdesign.co.uk) and it still never gets old for me! It’s also surprisingly easy once you get to know it, plus it can be completely adapted for your own tastes.

I’ve started by creating a 400px x 300px canvas in Photoshop, of course this is completely irrelevant – use whatever size you wish. I’ve started by creating some text as part of a completely made-up logo, as so:


I’ve then decided to opt for a nice simple star, as picked from the custom shapes menu:

And I’ve made sure that the star falls on the same line as the text, although this isn’t essential – it will prove for a far more authentic reflection and will look tidier:

Now I’m happy with my initial logo, I’m going to duplicate the layers of that logo, which will then be manipulated to form the reflection. To duplicate these layers I simply select them both by clicking the first then CTRL + Clicking the other, then I drag them to the small ‘Create New Layer’ icon at the bottom.

I then need to flip these, so while both the duplicated layers are still selected – I go to:

Edit > Transform > Flip Vertical

This flips the layers upside down, then I just drag them below the first logo on the canvas, in place for the reflection, as so:

Now to crate what’s called a Gradient Mask – which will create the fading effect – I must first merge the duplicated layers (Ctrl + E when they’re both selected) then click the Add Vector Mask icon at the bottom of the layers panel.

Now for the fun part – by pressing the ‘Add Vector Mask’ icon you’ve created a special invisible layer above your reflection layer – as you can see in the layers panel – the reflection layer has a new white box appeared next to it – this is your vector mask. The idea behind this mask is that anything painted on in black will be masked or hidden, whereas anything painted white will remain visible. So if you create a gradient from black to white on the layer using the standard ‘Gradient‘ tool (found on the same tool icon as Fill) – you will create a gradient from transparent to opaque.

So while on the duplicate layer – with the vector mask box highlighted – if you create a black-white gradient over the image – you will see that it creates a transparency gradient. Now you can play with this in so many ways to create a gradient that suits your image, the background and your taste!

When you’re done – you can seal the layer mask by right-clicking on the vector mask window on the layer panel and select ‘Apply Layer Mask’ or just leave it so you can edit it further.

After a few more tweaks, here’s the finished product – it’s only simple but demonstrates the process well enough:

Any problems – let me know