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 500x300 pixels and name it anything you like. I named mine "logo".
Set the foreground color to #00ccff.
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.
Duplicate the layer with the text.
Move the copied layer down a little bit so that you can see both layers.
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.
Expand "Paint Bucket Tool" and click on "Gradient Tool".
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.
Create a new layer above all the existing layers.
Expand "Rectangular Marquee Tool" and click on "Elliptical Marquee Tool".
Make a selection of an ellipse like below on the new layer.
Set the foreground color to white.
And fill the ellipse selection using Paint Bucket Tool.
You will get something like this.
Change the Opacity of the new layer (the one with an ellipse) to 20%.
Crop the document nicely using Crop Tool and save it for web.
And tadah!
I used Adobe Photoshop CS4
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]
This was really helpful, thanks. You might want to change “eclipse” to “ellipse.”
Thanks for your correction, Nancy.
A great tutorial, will most probably use it in the beta test of my website new layout.
Might want to take the tutorial darn images don’t work.
Nice tut. I found this tutorial to be very helpful for photoshop reflection http://eztutorial.co.uk/tutorials/photoshop/reflection/reflection.html
I have that web 2.0 graphics set, great set BTW.