May 8th, 2007 by admin 10,215 Views
In this Photoshop tutorial I will explain how you can make a good looking reflective font that you can use in your Web 2.0 style logo. The result will be a basic reflective font effect for a Web 2.0 Design logo.
First of all create a new image with white background ( File –> New). In this tutorial I created a 400px wide and 200px high one, but you can do it with every size.
Fill the background with a color of your choice
select the Rectangular Marquee Tool from your toolbar or simply press “M” on your keyboard to select it
make a selection like in the screenshot and press the “New Layer” button in the “Layer Window” (if the layer window is not open, you can do this by selecting “Window –> Layers” or by pressing F7)
fill the selection (the new layer) with white color (you can do this with the “Paint Bucket Tool”.This tool can be selected from the toolbar or by pressing “G” on your keyboard)
double click with the left mouse button on the new layer, in the layers window and in “Blending Options” choose “Blend Mode –> Overlay” and set “Opacity” to 40%.
Now select the “Horizontal Type Tool” from your toolbar (or press “T” on your keyboard) and write the name of your website in the upper half of the image (I chose “font color –> white” “font size –> 72pt” “font style –> Baskerville Old Face” from the “Character window”)
- if the “Character Window is not open, you can do this by selecting “Window –> Character.
With the text layer still active, select the “Rectangular Marquee Tool” and make a selection like in the screenshot
Now select “Edit –> Copy” (or press CTRL+C)
“Edit –> Paste” (or press CTRL+V)
“Edit –> Transform –> Flip Vertical”
place the new layer a few pixels under the text layer
After you placed the new layer a few pixels under the text layer, double click with left mouse button on it to open the layer properties
select “Gradient Overlay” and click once on the “Gradient color bar”
Now select color like in the screenshot (”End Color” should be your background’s color and “Start color” your font’s color)
The result is a basic Web 2.0 style reflective effect
Now, by adding some othe effects, you will be able to create logos like this 
Posted in Photoshop Tutorials | 6 Comments
If you enjoyed this article, consider subscribing to the Full RSS
Related Articles
Create custom shapes from images - Photoshop tutorialWeb 2.0 Feed icon design - Photoshop tutorialStumbleupon removed my blog from it’s BUZZ !Use Technorati Charts to target a Small Niche and get Huge Traffic - Blogging TipsThe reason I wrote a short post with the title “What is RSS?”
RSS feed
| Trackback URI
Great Tutorial! I passed through another blog having an article about web 2.0 logo. Its worth to read it. Here is the url
http://www.logoblog.org/wordpress/a-guide-to-web-20-logos/s
I’m glad to hear that you like it Nichole
The link you posted gives me an “error 404 - not found”
[…] While I was looking for information to do a nice naruto font, I came across this photoshop tutorial, How to make a Web 2.0 Logo. […]
Thanks for this, it was exactly what I was looking for.
Instead of doing the whole gradient thing with the text, sometimes I just use an eraser with a larger brush and hold the shift key down to keep it straight.. Much faster for me..
[…] Linkrain […]