The Glossy TEXT web2.0 style

4 09 2006

GOOD NEWS! WE MOVED TO A NEW DOMAIN- Go view this same post at:
PhotoshopCandy.com

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:
Finished product

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:

The process

Still doesnt do it for you ? Here is the PSD : go pick it to bits..

You can go get it here TUTORIAL PSDS

 

..




Actions

Information

68 responses

4 09 2006
aaron

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

6 09 2006
Grapplica

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.

6 09 2006
aaron

Thanks alot Grapplica , …enjoy – keep me on your favorites – there are layers of goodies to come.

22 09 2006
stu

whats that font?

23 09 2006
Tesauro Comunicación

PhotoshopIT Blog

Via Intenta se ofrece un enlace a PhotoshopIT, un blog acerca de Photoshop, con buenos tutoriales y archivos PSD de los mismos.
Un buen recurso para los amantes del photoshop, sobre todo para los que comienzan.

24 09 2006
aaron

I dont understand spanish – can someone translate that for me?

24 09 2006
aaron

Font: Unicorn

3 10 2006
dalia

this is so cool, thanks guys. I think i can use it in my baby photography.

3 10 2006
Chanel

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.

12 10 2006
Rachael

Ah, so that’s how you do it. I always wondered.

Think it would work it photoshop 5.5?

17 10 2006
adriatica

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!

1 11 2006
Irene

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

3 12 2006
Court

Kewl =]]

10 01 2007
Sala

Thanx man!! i was looking for a well explained tutorial to do somthing like this. Great work

15 01 2007
The Glossy TEXT web2.0 style « photoshopit

[...] post by sr_web_designer_SEO and software by Elliott [...]

23 02 2007
Saad

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 !

8 03 2007
Marco

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.

9 03 2007
Web 2.0 Tutorials Round-Up | Smashing Magazine

[...] 32. The Glossy TEXT web2.0 style [...]

13 03 2007
Nikki Rose Ty

What font are you using for “glossy”?

16 03 2007
dewrim
23 03 2007
8 04 2007
Degrade Kullanımı ve Zengin Yüzeyler

[...] Metinlere parlak yüzey uygulama [...]

18 04 2007
Fabian

Great!. Thanks.

21 04 2007
22 04 2007
» Blog Archive » Recopilacion de Tutoriales photoshop para web 2.0

[...] The Glossy TEXT web2.0 style por photoshopit [...]

29 05 2007
Artykuły

… somehow it’s became little bit boring … each one website start looking the same.
Have anybody got ideas for 3.0 :-) ?

30 05 2007
Web 2.0 Tutorials | Tekjuice.com

[...] 32. The Glossy TEXT web2.0 style [...]

28 06 2007
UizL » Blog Archive » Tutorial WEB 2.0

[...] The Glossy TEXT web2.0 style por photoshopit [...]

26 07 2007
Tutoriaux web 2.0

[...] photoshopit [...]

27 07 2007
Web2 tool » Web2.0 tutorial grafica

[...] The Glossy TEXT web2.0 style [...]

19 08 2007
Degrade Kullanımı ve Zengin Yüzeyler - alonon.net

[...] Metinlere parlak yüzey uygulama [...]

28 08 2007
cpolrie

Thanks man! :D ,really helped me out :)

31 08 2007
Web 2.0 objects: glossy, badges, tabs.

[...] The Glossy TEXT web 2.0 style [...]

26 09 2007
RS

Thanks! Great tutorial – used it loads…

Is there a tutorial of how to make that stripy background? I love it :P

28 09 2007
2 10 2007
Matt

3. The “gloss” Layer should be the one which is currently active (blue)
Go to the “SELECT>>MODIFY>CONTRACT enter 1 or 2 pixles.

What does (blue) refer to? How can I tell or choose which layer is currently active? With either or both layers selected, “Modify” is greyed out, so I’m completely stumped.

15 10 2007
Recopilación variada de recursos Web | BetaElite

[...] Glossy Text Web 2.0 [...]

19 10 2007
Web 2.0 Tutorials Round-Up | Ayiva

[...] 32. The Glossy TEXT web2.0 style [...]

21 10 2007
23 10 2007
Degrade Kullanımı ve Zengin Yüzeyler | Rasim Coşkun | Web Tasarım | Web Design

[...] Metinlere parlak yüzey uygulama [...]

12 11 2007
Web 2.0 Tutorials Round-Up - Article Save

[...] 32. The Glossy TEXT web2.0 style [...]

3 12 2007
Recopilacion de Tutoriales photoshop para web 2.0 | [Pragmatic Blog]

[...] The Glossy TEXT web2.0 style por photoshopit [...]

13 12 2007
Photoshop Files

The text effect looks nice, would you like to add it to photoshopfiles.com ?

23 12 2007
egypt web design

Thanks! cool style

28 01 2008
Web 2.0 Tutorials | Pxdev.com

[...] 32. The Glossy TEXT web2.0 style [...]

14 02 2008
madie

its hard to get the white texture thingy

15 02 2008
links for 2008-02-15 « Yet another blog

[...] The Glossy TEXT web2.0 style (tags: web2.0 tutorial design) [...]

16 02 2008
Clean Tm » Blog Archive » Web 2.0 Tutorials Round-Up

[...] 32. The Glossy TEXT web2.0 style [...]

20 02 2008
George Marcell

It is good for people to help others and this is a fine example of what someone will do to help.

12 03 2008
designer

great! tnx for tutorila

15 03 2008
Johnny Stickers

Hey, just found this blog when I typed “gloss text”. I know you posted this a couple of years back but it sure helped me out!! Been trying to figure this gloss text stuff for a while now. :-) Thanks tons!

10 04 2008
Gazetepost » adobe photoshop uygulamaları

[...] pimp my ride logolar ve yazı karakterleri (burada ve burada internetteki önemli sitelerin logoları var) krom yazı efekti yansıma efekti parlayan zemin 3d yazı parlak yazı [...]

11 04 2008
3 05 2008
2008 | Yerles.com » Adobe Photoshop Uygulamaları

[...] parlak yazı   [...]

5 05 2008
play black jack for fun black jack play play black jack for money

call fax loan no no payday…

For application card credit online uk black jack play…

8 05 2008
Weekly top quality Photoshop tutorials #3 | Photoshop Tutorials

[...] The Glossy TEXT web2.0 style [...]

25 05 2008
18 08 2008
20 08 2008
Web 2.0 Nedir Ne Deildir - Webmaster Forumu - Webmaster Zone

[...] Metinlere parlak yzey uygulama [...]

9 12 2008
Unblock Websites

awesome tutorial. thanks

4 01 2009
Dalia Drulia

thanks for sharing

5 01 2009
Web 2.0 Webdesign-Tutorials

[...] 31. The Glossy TEXT web2.0 style [...]

12 01 2009
marsbars

i cant get passed the step were you select both layers to make the gloss. my text layer cant select and the modify option is not highlighted. please help.

17 02 2009
bbizbor

Поставте антиспам

28 03 2009
Lertextep

Походил, почитал… как же здесь у вас интресно всетаки, почти как простоквашенно))

1 04 2009
Handygames

Hallo, thanks for this fantastic tutorial, I will use it for one of my websites.

15 05 2009
Web 2.0 Text Effects :Design Dazzling

[...] The Glossy TEXT web2.0 style [...]

19 05 2009
50 Web 2.0 goodies. | Web Templates, SEO, Web Design Tutorials, Tips, Guides - DT Blog

[...] 27. The Glossy TEXT web2.0 style [...]

Leave a comment