Remember – reading and doing is the best way to learn…anyways…Today I will be talking about and even giving some tips about the “way too famous” Glossy text EFFECT – something like this:
over used on web2.0 logos…but how can it not be – it is just so NICE! – I am sure you have all seen it out there – I also know that there are many more than one way to do this effect – that is one of the countless awesome things about photoshop. “To each his own”.
NOw here is how this will work.
I will give detailed explanations – along with one image of the whole process – and if that still dont work you are free to take the psd -and use it however you like.
Begin: CTRL N – to open new doc.
choose your document size and click OK.
anyone who is using a mac it is COMMAND instead of CTRL.
Here goes:
1. using the Type tool – write out the text that you want to glossify .
Keep in mind that most of these text effects are very bad for running text but rather for titles, logos, headlines etc.. The Best fonts for this effect are the more THICKER fonts …trying to put this effect on a slim font doesnt always look as cool as we want…although it is all possible.
2. SHIFT +CTRL + N to add new layer – name it whatever you like – I call it gloss.
while the “gloss” layer is selected. Hold down on CTRL and click on the layer which your TEXT is located on (you should be clicking directly over the T icon on the text layer)
3. The “gloss” Layer should be the one which is currently active (blue)
Go to the “SELECT>>MODIFY>CONTRACT enter 1 or 2 pixles.
Now go get the eliptical marquee tool.
While holding down on alt+shift drag a horizontal oval over the top area of your selected text (apprx 1/3 of the top of your text should be selected)
now grab the gradient tool (from fill to transparent) make the fill color a light shade of the color of yo text , in my case it is a pinkish white. Now from the top of the text drag down halfway and voila…
you can add more shines of white while keeping that top area selected – whatever looks better -just play around with it.
Here was the process in image form:
Download The Free PSD Here
Enjoy!
Hey thanks. Very helpful. Nice with some down-to-earth tutorials.
Thank you so much for sharing your great talent dude, this I really a great help to all aspiring web and graphic designers. Keep it up and share more nice ideas. Your cool dude.
That was the best tutorial I’ve ever viewed and applied. It instantly did the trick and helped me achieve what I needed with the text. I am designing graphics for an iphone app but wasn’t sure how to do the glossy affect. Thank you so much!
.-= Holly Mann´s last blog ..Tax Filing Tips & Deductions for Internet Marketers =-.
Straight forward and useful. Thanks for the walk thru.
.-= Ryan @ Planting Dollars´s last blog ..The Part Time Job Search =-.
Thx for useful technique
Holding down on the shift-alt with the marquee tool brings up an eyedropper, not an ellipse. How do I deal with that?
thanks a lot. it’s simple, easy to follow and got the result i wanted. keep it up. gonna bookmark this page
Cool
http://www.tuvinh.com
Interesting facts.I have bookmarked this site. stephanazs
Wow!
That’s awesome!
Awesome items!! Give us the full lowdown along with loads of pictures when you get back.
Hi webmaster!
Hi webmaster!
I found a great way to complement your technique for a really shiny look, even though the tutorial is from last year.
when you’re satisfied with your project make sure you still have all layers and take any pic of your choice with lots of stuff going on. Make it the top layer and ctrl on the T of the text layer, then go select>inverse. press delete, and then it should fit onto the text. then, use the Difference filter to get a metallic reflection look.
HOW did you make the bold outline at the end?
Wonderful!
… somehow it’s became little bit boring … each one website start looking the same.
Have anybody got ideas for 3.0 🙂 ?
Great!. Thanks.
MSN dewrim@interia.eu
What font are you using for “glossy”?
He said: PhotoshopIT Blog
Via Intenta is ofering a partnership to PhotoshopIT, a blog about Photoshop, with a lot of good tutorials and PSD files of them. It’s a great ressource to the photoshop lovers, principaly to the newcommers.
…
this is great, i always try to do it, i only do it with white fill to transparent gradient, but now with this awesome tutorial i got to know how to make this effect 🙂 thanks a bunch !
Thanx man!! i was looking for a well explained tutorial to do somthing like this. Great work
Kewl =]]
Love your tutorials! yeap, I added your page to my favorites. Keep up the good work! Gracias!
**to ad to what Chanel said- Via Intenta is a similar website that offers similar tutorials all written in Spanish language 🙂
http://www.webintenta.com
Thank you so much, you got me out of a frustrating bind, I’ve been working on a logo for 3 weeks now, but this looked right first time. Relief!
Ah, so that’s how you do it. I always wondered.
Think it would work it photoshop 5.5?
Great TUTORIAL. I learned a TON!! Here you go all translated from the post above.
Via Intenta offers a connection to PhotoshopIT, blog about Photoshop, with good tutorials and archives PSD of such. A good resource for the lovers of photoshop, mainly for which they begin.
this is so cool, thanks guys. I think i can use it in my baby photography.
Font: Unicorn
I dont understand spanish – can someone translate that for me?
whats that font?
Thanks alot Grapplica , …enjoy – keep me on your favorites – there are layers of goodies to come.
Hiya,
whoosh man that Tut really thaught me something. I really like this blog, keep up the fun *thumbs up with a big fat smile**
Btw check out our site, it’s more pixelish and illustrator (or handcraft) but maybe you’ll like.
In general I will be posting nice screenshots for every step of the way with very clear instructions…. – this one was done in a hurry…..I am sorry – forgive me, I am very excited to get this blog moving. so I did this very quickly. anyways I gotta run…CTRL+S, CTRL+W, CTRL+Q