Text Reflection
July 4th, 2007 in Designing, Tutorials, Web Graphic by kailoon
Today I am going to make a tutorial for the text reflection. Actually I think you may also use this technique in other design for the reflection purposes. Let’s start then. Open the PS for sure then open a new document and we need it in 400px X 200px with white background.
1
Create a new layer, rename as gradient_background, with gradient tool, set the foreground color to #999999 and the background color to white (#ffffff). Drag from the bottom to the top of the stage and you may get something like this:

2
Select the horizontal type tool and write something there and here I write LOONDESIGN. I use supersonic for this typing with white color.

3
Double click on the text layer to bring out the layer blending option and we need to set the stroke and gradient overlay option like below:

4
CRTL + J to duplicate the text layer then right click on the copy layer and select Rasterize. Right click again and select clear layer style. CTRL + T to bring out free transform option and right click on the stage and select flip vertical. Adjust the position and you will get something like this:

5
Select the rasterized layer again, press “Q” on your keyboard to use the Quick Mask Mode function. Select gradient tool, drag by holding shift like shown below. Press “Q” again and press Delete once. Set the layer opacity to 60%.

6
Create a new layer below all layers but above the gradient_background layer. Take Elliptical Marquee Tool and draw a circle as the image below shows.

7
Fill it with black color then go to Filter > Blur > Gaussian Blur 2. Now adjust the layer to get the desired effect and change the Opacity to 30%. And you are done!

Now you can tune or set the text effect via the layer blending option and the gradient_background color with gradient tool. have fun!
Thanks for sharing this wonderful information. I’ll check other post for more useful information and great ideas.
good post thanks for you very nice blog
I would like to be able to thank you for the efforts you have made in creating this article.
Cool….:-)
This subtle shadow between the actual text and its reflection, makes such a great difference. This is the first tutorial I’ve seen on the web including such a cool step. Keep up the good work! Thanks!
Great tutorial, tnx :)
i dont seem to get the step 5 correctly…wondering what is the problem…i couldnt get the reflection effect as in what you shown here~~pls help!!
By the way, thanks for the tutorial!~Love it…
How can do it?the text effect in css.. that’s what i’ve been looking for.. :(
Hi, it is “Q”. Sorry, after upgrade wordpress. The Character seems got problem to display. Thanks you. I fixed it already.
5.Select the rasterized layer again, press “Q†on your keyboard to use the Quick Mask Mode function. Select gradient tool, drag by holding shift like shown below. Press “Q” again and press Delete once. Set the layer opacity to 60%.
what is this? “Q�
my browser can’t display this….
thx
Hi Calvyn, Welcome to my blog :) You can try your own, it’s easy and simple :) good luck!
I also wan to make 1 logo for my self with ur tutorial
oh? graphic headache? can also, send me a via email :)
sure can!hehhe…
yea…got it…probably a simplest n common-use graphic tutorial…may i post some graphic headache to get ur expertise on hw to make it sometime? hehe…hey guy…u moved to ara damansara d?vry near my place…find out smtime for outing ya…
@> seraph: thanks :)
@> NI_LIMITS: wow, so early huh :) I am now in working in Kelana Jaya and stay in Ara Damansara, PJ.
Another excellent tutorial…
Where in Malaysia are you based…?
hehe…I experienced it before, I think it is the loading problem..anyway, thanks! :P
Eh, ok already…hohohohoho
Cool…. keep it up…another winner i predict… =p
And oh, your layout distorted man…. the footer misaligned to the comments textfield
=p