Photoshop “Reflection” tutorial
Posted in Photoshop, Web Design by Khaled on January 17th, 2007
So this is the second simple Photoshop tutorial I am posting in the new Photoshop tutorials series. As I’ve stated before, this is to show to achieve the reflection effect that was created at the end of the Photoshop “Glass Text” Tutorial. And yes! many of you were requesting it.
This tutorial was done using Adobe Photoshop CS2 but, of course, it can be achieved using older Photoshop versions. So we are going to start where we ended in the previous Photoshop “Glass Text” Tutorial. You are curious aren’t you ? Dig for it to find out
Last time we’ve ended up with the following graphic:
The PSD file has 2 text layers (a rasterized one -The copy- and a regular one). Select one of them, press ctrl (or cmd) and select the second one.
Hit ctrl+E (or cmd+E) to merge them together (another option is to select them then go to Layer > Merge layers).
Now you only have one rasterized text layer.
Hit ctrl+J (or cmd+J) to duplicate the layer. Select the top layer (if it is not already selected),then go to Edit > Flip vertical.
You will have something like the following graphic:
Move the flipped layer down until you have a tiny gap line between the two texts, something like this:
Now reorder your layers so that the flipped layer is listed under the original regular layer in the layers palette.
Select white color as foreground color:
Select the Gradient tool:
Select the second filling option (Foreground to transparent) :
Next step consists on selecting the flipped text layer (that is placed under the original text layer in the layers palette), then hold the shift key (in order to have a straight linear stroke) and make a stroke with the gradient tool from the bottom to the top like shown below:
This is what you will Obtain:
Make a second gradient stroke similar to the first one or may be one that ends just at the edge of the white background, it will really depend on what you want to achieve. I’ve made a similar stroke and this is what I had:
Now the reflection effect itself is done, you may try to tweak the setting and options used above to obtain a result that fits better your needs.
You can add a lens flare effect for instance, to do so select the original text layer, Go to filter > Render > Lens Flare…
Select the following settings or just tweak them to have a more adequate effect, move the lens spot with your mouse to put it on the top of the last letter (the P here):
Here’s the result:
Enjoy customizing your text further more: For instance you can always change the text’s color despite that you have rasterized the text type. To do so use the Hue/saturation option (Image > Adjustment > Hue/Saturation) or just hit ctrl+U (cmd+U). I will turn my text to a lime-ish green shade (Hue: 150 and Saturation: 15). Don’t forget to change the reflection’s layer color, use the same settings (Hue: 150 and Saturation: 15).
Here’s what I had:
I hope you have enjoyed this tiny tutorial! next time I will show how I’ve changed the color of the frog’s eye in my header! You guessed it right: I had so many questions about it! So don’t forget to come back soon and check the upcoming Photoshop tutorials 
Carpe Diem 
No Relation» Blog Archive » Photoshop “Glass Text” Tutorial says:
[…] tutorial is here so go and check it You can leave a response, or trackback from your own site. RSS 2.0 Have you read?:Photoshop “Reflection effect” tutorialPhotoshop TutorialsSeriesPhotoshop Smart Objects: are they that smart?Photoshop CS2 on MacBook Pro!My FireFox Add-onsExtreme digital painting!BreedSoftware: Beta launchOh! I look like some celebrities!Adobe kuler!!Software Programming Process […]
January 17th, 2007 at 8:25 pm
adam says:
A comment for the Leave a reply form. Change the input text color, because on a LCD it is hard to see the input fields(little contrast). Sorry for my english, i didnt learn english at school, just from the net
January 24th, 2007 at 11:32 am
Master says:
Hey Adam, I am on LCD and I am not having a lot of problems with it. anyway I am changing the whole design soon
January 25th, 2007 at 1:21 pm
Andrew says:
Adam is right. The contrast is low on many LCD screens. Mine happens to be a laptop screen and I have a contrast ration of 1000:1. Many LCDs (that don’t cost too much) have an even lower ratio than that. Your LCD may be great but it’s not the only kind. Although many would say that this is our problem and not care. A good web designer always keeps every possible visitor to his site in mind. So if you are going to redesign keep this in mind: while subtleties are great, make sure that important information and design aspects are highly visible and can be distinguished from like-colors and other similar objects. Other than that, your site is great! Good work. Though, I would lighten up on all the JavaScript Tool-Tips. At some point, enough is enough, lol.
January 25th, 2007 at 3:08 pm
Master says:
Sure thing Andrew
Thanks for your comment.
January 25th, 2007 at 4:47 pm
Stevielee Cairns says:
This is a fantastic tutorial and was very interesting, will it be ok to show my year 10 class this tutorial. We are on a graphics topic now in ICT and this would be great.
Please let me know
Stevielee Cairns
Senacre-New Line Learning Maidstone England
January 26th, 2007 at 8:35 am
Master says:
Hey Stevielee,
Of course!! This is a honour for me
Help yourself, you can use any tutorial here.
January 26th, 2007 at 12:57 pm
MaMaDoG says:
Good tut, but Anrrew is right, i have 19″ lcd too
January 31st, 2007 at 4:43 pm
Ardonjr says:
I’ve made a nice banner with some help of this tutotial. Want to thank you a lot..
Helped me out verry good!!
So its a great tutorial..
(check: http://www.heuvelmanmgt.nl yeah it a dutch site wich i made for some company)
The banner is made in photoshop and your tutorial!!
Thnx mate!
January 31st, 2007 at 7:01 pm
Master says:
Hey Ardon!
Happy this tutorial helped you!
February 1st, 2007 at 9:45 am
Backtown says:
hi
this is good tutorial,
thank you and
i wanna say TO YOU your Web site so good (coloring and desing so clear and good)
February 8th, 2007 at 12:18 am
Master says:
Thanks backtown
February 8th, 2007 at 8:37 am
Raiden says:
Awesome tutorial. Bookmarked
Thnx.
February 10th, 2007 at 5:52 pm
WBCA3 says:
I happened to find a quirk in this otherwise excellent tutorial (or the preceding one actually). I found that certain fonts goof up colors when you merge the rasterized layer and the other layer together. Other than that, everything is very dang nice. I will definately be back for these tutorials as well as others. Currently I am taking a web graphics class which is teaching Photoshop CS2 and this site was my choice of an outside project to submit for homework (which also means this site will be referenced for other students to check out).
Thanks much mate. I’m glad there’s people like you out in the world helping others along as i’m sure others have helped you along as well. 
The WB
February 26th, 2007 at 5:33 am
Master says:
Thanks WBCA3
it will work with bold, heavy and black fonts 
Yes it won’t work with all the fonts! that’s why I’ve specified the font
February 26th, 2007 at 9:57 pm
Mike says:
Hi, When I do the gradient, it does a fade of the colors I used in my text (purple and yellow), instead of the desired reflection effect…
any thoughts where I’m messing this up? Sorry, I’m still pretty new at this…thanks!
April 4th, 2007 at 3:03 am
Mac says:
Umm, yeah, great tut but im having trouble witht he gradient, it wont do the reflection thing to the text but it puts a large gradient over everything. Help?
April 5th, 2007 at 6:50 pm
Mac says:
umm yeah, im making mine as a .png witha transparent background, does that have anythign to do with it?
April 5th, 2007 at 6:52 pm
Master says:
Hey Mike!
Select the second filling option: Foreground (white) to transparent:
April 5th, 2007 at 10:22 pm
Master says:
Mac, Transparent PNG-24 won’t work on IE6! can you show me the result?
April 5th, 2007 at 11:31 pm
Mike says:
Hey Master,
I do have the foreground (white) to transaparent option selected for the gradient…just covers it up… thanks for the reply!
April 6th, 2007 at 12:19 am
Master says:
Mike, Can you show us the result?
April 6th, 2007 at 11:38 pm
ugur says:
Nice tutorial. I will use it
May 25th, 2007 at 10:02 am
Jillian says:
Hey Master!! wow I see why that’s your name - you && your tutorials are FABULOUS!!!!!! Thanks SOOOOOOOO much for making them because I am so thrilled with what I ended up with which is this:
http://img.photobucket.com/albums/v107/Cystalnature/jillianreflection.gif
I actually added one more step to mine which I thought was cool; I added a omni lighting effect a little above the letters (Filter > Render > Lighting Effects) for anyone who might be interested in trying it.
What I love about your tutorial is that its so cool and professional but so easy to do with your tut. because you explained it so well!! And with me, (I’m 13 years old) I HAVE to have things very clearly explained or else I will be totally lost. It’s so professional that college students are using it and its so easy a 13 year old can do it!!It was fantastic to have this tutorial!! THANKS SO MUCH I LOVE YOUR TUT.!!!
Love always,
Jillian J.
June 25th, 2007 at 9:54 am
Master says:
Thanks Jillian
June 29th, 2007 at 10:01 am
hiutopor says:
Hi all!
Very interesting information! Thanks!
G’night
September 18th, 2007 at 9:39 am
Shyam says:
Great Tutorials…
Thanks…
January 12th, 2008 at 4:25 pm
BODiLAN says:
I’m an ukrainian student.
Your blog is very useful for me. This tutorial is the best that I saw for Web 2.0 text effect.
P.S. - nice logo, I love frogs
January 19th, 2008 at 12:24 pm