Rss feed icon design, part 3: reflection effect

Here is a quick step by step about how to do this so trendy reflection effect. From my point of view, even if I really like this effect I think designers overuse it. All “web 2.0″ website have reflection effect everywhere and it tend to be a bit to much. Don’t use it just to use it but because you need it!

So here we go. I use a black background on this blog so I’ll have to tweak a little bit the icon we had, to get a black background. First I invert the colour (ctrl+i or cmd+i).

screenshot 8, invert colors

Alright, the white become black, but the orange become blue. No worries, go in Image>ajustment>hue/saturation. Drag the hue cursor to the very left, you should get your orange color back. When you’ve got the color sorted, duplicate your layer (ctrl+j or cmd+j), press ctrl+t or cmd+t and right click on it. Choose ‘flip vertical’ from the menu and drag the layer down where you want your reflection.

screenshot 8, reflection

Now is the real trick. Add a layer mask on your layer (layer>layer mask>reval all). Pick the gradient tool and select the second mode (one color gradient). Draw the gradient on your mask to fade the end of the reflection layer. Change also the opacity to make it more ‘real’.

That should do.

screenshot 10, final

Leave a reply