Design, Tutorials

web 2.0 reflection effect in Photoshop

This is a step by step tutorial with screenshots on how to create a reflection effect in Adobe Photoshop. Reflection effect has become very popular recently thanks to web 2.0 hype. Those shiny reflection effect can be seen everywhere especially on web 2.0 logos. At the end of this tutorial, you will be able to create a web 2.0 logo with a reflection effect using Adobe Photoshop.

Create a new Photoshop document of 500×300 pixels and name it anything you like. I named mine “logo”.
Screenshot

Set the foreground color to #00ccff.
Screenshot

Type any text you want in the document and set the font size to 48px and set the anti-aliasing method to Smooth. As for the font, you can use any font you like. I used VAG Rounded Std because it’s a web 2.0 font.
Screenshot


Duplicate the layer with the text.
Screenshot

Move the copied layer down a little bit so that you can see both layers.
Screenshot

Go to Edit -> Transform -> Flip Vertical. Make sure that the copied layer is still selected and add a new vector mask on that layer by clicking on “Add Vector Mask” button.
Screenshot

Expand “Paint Bucket Tool” and click on “Gradient Tool”.
Screenshot

Draw a gradient line in the document. Adjust accordingly to make sure you get what you are after. If you make a mistake, you can always undo by pressing Ctrl+Z together.
Screenshot

Create a new layer above all the existing layers.
Screenshot

Expand “Rectangular Marquee Tool” and click on “Elliptical Marquee Tool”.
Screenshot

Make a selection of an ellipse like below on the new layer.
Screenshot

Set the foreground color to white.
Screenshot

And fill the ellipse selection using Paint Bucket Tool.
Screenshot

You will get something like this.
Screenshot

Change the Opacity of the new layer (the one with an ellipse) to 20%.
Screenshot

Crop the document nicely using Crop Tool and save it for web.
Screenshot

And tadah!

esn studio

I used Adobe Photoshop CS4 to create the web 2.0 reflection effect. You can get one from Amazon at about $680.

If you don’t have Graphics software or time to do it, check out the Mega Web 2.0 Elements for premade badges, sliders, shiny marketing graphics (buy now, subscribe now, download, free trial, etc) and other commonly used web 2.0 graphics. All files are in fully layered PSDs.

[tags]adobe, photoshop, web 2.0, graphic, tutorial, design, reflection, logo[/tags]

6 thoughts on “web 2.0 reflection effect in Photoshop

Comments are closed.

Career Guide for Software Developers