Photoshop “Glass Text” Tutorial
Posted in Photoshop, Web Design by Khaled on December 25th, 2006
As I have announced it before, I am going to be posting Photoshop tutorials on this blog. Some tutorials are old others are new and will be posted for the first time. So stay tuned!
Today I am going to start off with quite a simple tutorial that will show you how to achieve a glassy text effect .
This tutorial was made using Photoshop CS2 but can be achieved using older Photoshop versions. You can now add a cool effect to your text easily. Of course, and as usual, your feedback is more than welcome.
First of all I’ve created a new blank document That is 400×150, Then I have selected the text tool, I’ve set the font to “Gill Sans Ultra Bold”, the size to 60pt and the color to #d41385 (yeah that’s pink!!). Then I’ve typed in my text. Read on
Here’s my text:
After that, duplicate the text layer (ctrl+j or cmd+j), select the original text layer that is listed under the new duplicated layer in the layers window, set its opacity to 75%.
Now select the top text layer (the duplicated one) right click and choose rasterize type.
Select the elliptical marquee tool, make a selection of the top part of your text like shown below:
Hit the delete key to clear the selected area of the rasterized text. Here’s the result:
Hit ctrl+D (or cmd+D) to deselect. Double click on the original text layer, the layer style window will pop up. Select “outer glow” and put in these settings:
- Blend Mode: Normal
- Opacity: 100%
- Color: #d41385
- Noise: 0%
- Technique: Softer
- Spread: 70%
- Size: 5px
Now select “Stroke” and select white (#FFFFFF) as color, (leave size: 3px):
Click OK and look at the result:
Now you’re done, you customize your text, add more effects change the color etc…
Next time I will tell you how the achieve the reflection effect! so stay tuned: Update now it is ready, the reflection tutorial is here so go and check it 
patta says:
I’m Thai student.
Your blog is very useful for me. Thanks
January 1st, 2007 at 2:04 pm
Master says:
I happy to know this Patta!
January 1st, 2007 at 5:47 pm
alex says:
Wow! Lovely Effect, this is great for blogs and friend sites etc. Cheers, great tutorial, really easy to follow.
January 1st, 2007 at 11:40 pm
Jasmine says:
how do u get the elliptical marquee tool. where do u go
January 2nd, 2007 at 2:14 am
Anton says:
Real nice!!
January 2nd, 2007 at 12:31 pm
Jalpari says:
nice trick
January 2nd, 2007 at 5:06 pm
Efe says:
Thx!
January 2nd, 2007 at 5:17 pm
see_whisper says:
cool effect..Thanks!
January 2nd, 2007 at 7:16 pm
Ali says:
This is really nice tutorial i like it when u are gonna teach us reflection ?
January 3rd, 2007 at 6:45 am
Ines says:
Nice tutorial!! Thank you.
January 3rd, 2007 at 11:28 am
Master says:
@Jasmine
Hey Jasmine, click on the marquee tol and and hold on for few seconds a tab will pop up with different marquee options
you can read this tutorial for more about the marquee tools 
http://www.arraich.com/ref/aatool_marquees6.htm
I hope this helps you!
January 3rd, 2007 at 7:45 pm
Master says:
Thanks guys
Happy you’ve liked the tutorial! stay tuned for the upcoming ones 
January 3rd, 2007 at 7:47 pm
Temur says:
The friken text doesnt get ennlarged!! it stayes sooo small!! Ok when i make a new document then i select text and make a box that i will type in, but the text size cannot be changed! stays soo tiny! HELP!
January 4th, 2007 at 12:43 am
Fuser says:
Really cool design
Thanks for the tutorial
Fuser
January 5th, 2007 at 3:56 am
Master says:
Temur, I am not really understanding your problem! just type in the text and choose it size: select the text tool (T) click once on the workspace, write the text, set the size you want from the character palette… that’s it!
January 7th, 2007 at 6:05 pm
Timo Kuys says:
Yea thanks:D its a nice photo;)
timo_kuys@hotmail.com
ps. does a body have a problem about photoshop or something you can add me on msn
good luck
January 9th, 2007 at 2:08 pm
Vincent says:
It really useful to me, really thanks your sharing!!!cheer up!!!
January 10th, 2007 at 10:55 am
uhm says:
forgot the mirroring part?
January 11th, 2007 at 5:36 am
Master says:
@Uhm:
No! it is coming soon
January 11th, 2007 at 5:49 pm
pink says:
Very nice trick
January 11th, 2007 at 10:50 pm
Alex says:
Man you’re great.Keep going !!!
January 16th, 2007 at 10:46 pm
Master says:
Thanks Alex
January 17th, 2007 at 2:53 pm
No Relation» Blog Archive » Photoshop “Reflection effect” tutorial says:
[…] 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. […]
January 17th, 2007 at 8:09 pm
María José says:
Gracias!!!
Me ha gustado mucho este efecto…
January 18th, 2007 at 1:52 pm
Master says:
De nada Marìa
January 18th, 2007 at 6:20 pm
Mina says:
Simplemente increible!
Gracias x compartir tu talento =)
January 21st, 2007 at 4:53 am
Master says:
me gusta compartirlo Mina!
January 21st, 2007 at 9:38 pm
library-cafe.com says:
Hi,
Thanks for great post. Please visit my site http://library-cafe.com for great tutorials.
February 4th, 2007 at 9:54 am
darcy says:
hey this is a GREAT site.
bat a bad thing is that, i have 2.0 can i download CS2 for free.
if i can do you know where?
thank you very much.
February 27th, 2007 at 7:13 am
Master says:
Hey Darcy!
Thanks, you can only download a free trial of Photoshop CS2 from Adobe.com
February 27th, 2007 at 1:22 pm
morganusvitus says:
The site looks great ! Thanks for all your help ( past, present and future !)
April 5th, 2007 at 3:15 pm
Master says:
Thanks Morgan, you’re most welcome
April 5th, 2007 at 11:09 pm
Nünemann Softwareentwicklung » Links zu Photoshop says:
[…] http://kyscorp.com/blog/2006/12/25/photoshop-tutorial-series-glass-text/ […]
May 7th, 2007 at 10:02 am
QuiPly » Blog Archiv » Photoshop Tutorials says:
[…] Typisches Web2.0 Logo […]
May 9th, 2007 at 5:37 pm
Creating a Web 2.0 Logo! » Manfred`s Diary says:
[…] After learning this post and this post I managed to create my custom Web 2.0 Logo! Watch below! I am still not happy with the colors but in generel this is a big step forward! All the previous logos I tried looked really poor! If you want to read more about Web 2.0 Design also have a look here. […]
May 14th, 2007 at 8:48 pm
nightwind says:
thank u!
best wish from china!
June 7th, 2007 at 5:33 am
sandip roy says:
glass effect
June 27th, 2007 at 10:55 am
UizL » Blog Archive » Tutorial WEB 2.0 says:
[…] Photoshop “Glass Text” Tutorial por No Relation […]
June 28th, 2007 at 3:02 pm
Tutoriales para el diseño orientado al 2.0 | Kabytes says:
[…] Kyscorp.com: Este tutorial esta muy bueno, ideal para dar una imagen en donde el logo esta compuesto unicamente de letras, puedes obtener: […]
July 3rd, 2007 at 5:21 pm
Tutoriales para el diseño orientado al 2.0 « Cosas sencillas says:
[…] Kyscorp.com: Este tutorial esta muy bueno, ideal para dar una imagen en donde el logo esta compuesto unicamente de letras. […]
July 4th, 2007 at 7:11 am
¿Como diseñar al estilo web 2.0? « says:
[…] Kyscorp.com: Este tutorial esta muy bueno, ideal para dar una imagen en donde el logo esta compuesto unicamente de letras. […]
July 4th, 2007 at 4:19 pm
PHP Helper says:
wow.Great tutorials
thanks for your share.
July 26th, 2007 at 11:21 am
Viktor says:
really good tutorial , im gonna make me now a new glass logo
September 26th, 2007 at 12:49 pm
mix says:
best good 我想我会做啦,,think you 哥们
October 5th, 2007 at 6:20 am
Tutoriales, VideoTutoriales, Utilidades, Artículos y ayudas para crear una web 2.0 « Ubuntero novato & algo mas says:
[…] Photoshop “Glass Text” Tutorial por No Relation […]
November 1st, 2007 at 7:25 pm
MyDesign.com.ar says:
good and simple. Thanks
January 9th, 2008 at 5:15 pm
Jimm says:
Very interest, thanks..
February 8th, 2008 at 10:02 am
Recursos y Tutoriales » Blog Archive » Diseñar a lo Web 2.0, la lista definitiva says:
[…] Photoshop “Glass Text” Tutorial por No Relation […]
March 4th, 2008 at 3:39 pm
sujeet kumar says:
really good tutorial , im gonna make me now a new glass logo
April 19th, 2008 at 4:26 am
online shopping says:
It always amazes me, as you look at tutorials like this step-by-step, that it is often a lot more simpler to do things than you originally think. And, when you see it build up, you think to yourself “of course, that makes perfect sense.” Usually, the simpler, the more effective the effect actually is. Reminds me of a video I watched once when a guy made all these effects in photoshop through simply drawing them. When you look at it, it makes perfect sense.
July 5th, 2008 at 10:55 am