In this tutorial you’ll learn how to make this great looking web 2.0 text with reflection.
In just a few, easy steps you’ll come out with this great effect. This tutorial is written in Photoshop 7.0.1.
1. Make a new document. Use the proportions like on picture below.
2. Now, grab the Gradient tool (G).
Set your foreground color as #D69C01 and background color as #FBBC12
3. Now pull gradient from the top of image to the bottom. See the picture.
4. Now, choose the Horizontal Type tool (T) form your toolbar.
Write some text in the middle of image. I wrote Tutorials007.com
I used font Impact, size 30, anti-aliasing: Crisp.
5. Now we will add some web 2.0 layer styles to our text.
Go to Layer -> Layer Style -> Stroke.
Set the settings like in picture below.
Now, we have stroke around our text.
Our next step, the most important step of this tutorial, is to add gradient to our text.
So, go to Gradient Overlay tab.
Click on your Gradient tab.
This is gonna be a little tricky to explain but I’ll try.
Make five litle boxes under your gradient bar. See the picture.
Now, you can see I added five numbers below these boxes so I can explain to you this step a little bit easier.
Click on the first box. Now you should change you color and location. (see the picture)
As a color put #EC3C2C, as a location put 0.
Click your second box. Now for the color put #D72917 for location put 26.
Click your third box. Color: #F72A0C , Location: 50
Click your fourth box. Color: #F16F5C , Location: 51
Click your fifth box. Color: #FF5837 , Location: 100
Finally, hit the OK button. huh 
Now set the proportions like on picture below.
That’s it with Gradient.
6. Go to Inner Glow tab.
Set the proportions like on picture below.
Hit OK button and you’re finished with your web 2.0 text.
Our next step is to add reflection to this text.
7. Copy your text layer.
Go to Edit -> Transform -> Flip Vertical.
You should have something like this now.
Now, move your fliped layer below your normal layer. See the picture.
8. Hit Add Vector Mask button in your Layers window.
9. Grab the Gradient tool, and pull from up till down like on picture below.
Voila. There you go…that’s it.
Off course, you can use different colors, styles…
Here’s an example…
Sometime text documents can be tricky to convert. That’s why there’s great pdf to excel converter software available! Don’t waste you time trying to convert pdf to excel, just get the best pdf converter around and leave your document troubles behind.
January 8th, 2008 at 11:33 am
Thanks!
I did it once, but the second time. Its not going, just after I’ve duplicated the text, I cant add the gradient again.
When I try, it changes the gradient of the background.
January 8th, 2008 at 6:12 pm
After you finish adding layer styles to your font layer, then duplicate.
Then the duplicated text layer will have same layer style as original layer style.
January 16th, 2008 at 12:43 pm
At the end I am getting the following error:
“could not user gradient tool because the pixels in a tyle layer can not be edited without first rasterizing the layer”
What does it mean?
Thanks
January 16th, 2008 at 5:56 pm
Did you added vector mask to this layer like it says in the tutorial? Step 8.
January 19th, 2008 at 1:24 am
When I do the last step, the opacity just decreases instead of only half.
January 19th, 2008 at 6:10 am
This depends on how you pull last gradient. Try to pull it shorter.
January 20th, 2008 at 7:11 am
how do you copy text layer in step7
January 20th, 2008 at 9:38 am
Go to Layer -> Duplicate Layer…
or you can simply drag this layer to Add a new layer icon.
January 20th, 2008 at 10:05 am
thanks for the reply but step 8 is confusing i have photoshop extened cs3. the only option is layer>vector mask>reveal all
and when i click that it doesnt do anything could you please help?
thanks
January 20th, 2008 at 12:05 pm
You completed step 7?
If you are, click on your new text layer (Layer that you got when you copied your text layer.)
Then in layers window click Add Vector mask button.
January 20th, 2008 at 4:54 pm
Nice thanks!
January 25th, 2008 at 12:47 am
For CS, there’s something missing from Step 8 on?? I Add Vector Mask and select Reveal All. At that point, the Gradient Tool will not work, so it is necessary to Rasterize the text layer with the Vector Mask. Then, when I drag the Gradient Tool, with the Vector Mask layer selected, the entire layer gradiates.
February 14th, 2008 at 7:24 am
thank`s
February 20th, 2008 at 4:25 pm
Really great!
THX
March 9th, 2008 at 7:05 am
when you do it in photoshop cs… go to layer.. vector mask and press hide all then after go to layer, rasterize and do the step 9 from the tutorial
March 23rd, 2008 at 1:54 am
I’ve got an issue.
When I try to make a mask, it shows like this. (Check image below.)
It is all white, while yours is white/black.
An answer would be appreciated.
Thanks, Fallqvist!
March 23rd, 2008 at 1:56 am
Link to the screenshot. The html code didn’t work for somehow in my earlier post.
http://sleekupload.com/uploads/unnamed001.png
Thanks, once again.