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

56 responses to “The Glossy TEXT web2.0 style”

4 09 2006
aaron (20:59:47) :

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 (07:16:38) :

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 (10:04:25) :

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

22 09 2006
stu (01:44:32) :

whats that font?

23 09 2006
Tesauro Comunicación (00:29:08) :

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 (18:43:47) :

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

24 09 2006
aaron (18:46:13) :

Font: Unicorn

3 10 2006
dalia (04:05:11) :

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

3 10 2006
Chanel (19:51:52) :

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 (11:43:30) :

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

Think it would work it photoshop 5.5?

17 10 2006
adriatica (14:20:24) :

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 (15:56:20) :

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 (02:12:11) :

Kewl =]]

10 01 2007
Sala (21:05:27) :

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 (05:22:07) :

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

23 02 2007
Saad (07:46:44) :

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 (22:05:26) :

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 (16:42:32) :

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

13 03 2007
Nikki Rose Ty (15:30:47) :

What font are you using for “glossy”?

16 03 2007
dewrim (22:37:01) :
23 03 2007
8 04 2007
Degrade Kullanımı ve Zengin Yüzeyler (15:22:35) :

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

18 04 2007
Fabian (07:49:54) :

Great!. Thanks.

21 04 2007
22 04 2007
» Blog Archive » Recopilacion de Tutoriales photoshop para web 2.0 (19:12:30) :

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

29 05 2007
Artykuły (09:30:23) :

… 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 (03:05:18) :

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

28 06 2007
UizL » Blog Archive » Tutorial WEB 2.0 (15:02:38) :

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

26 07 2007
Tutoriaux web 2.0 (13:56:59) :

[...] photoshopit [...]

27 07 2007
Web2 tool » Web2.0 tutorial grafica (20:11:38) :

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

19 08 2007
Degrade Kullanımı ve Zengin Yüzeyler - alonon.net (09:54:58) :

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

28 08 2007
cpolrie (20:32:02) :

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

31 08 2007
Web 2.0 objects: glossy, badges, tabs. (23:21:59) :

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

26 09 2007
RS (20:06:47) :

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 (01:09:32) :

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 (05:56:21) :

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

19 10 2007
Web 2.0 Tutorials Round-Up | Ayiva (07:23:07) :

[...] 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 (08:11:06) :

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

12 11 2007
Web 2.0 Tutorials Round-Up - Article Save (20:52:02) :

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

3 12 2007
Recopilacion de Tutoriales photoshop para web 2.0 | [Pragmatic Blog] (20:26:07) :

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

13 12 2007
Photoshop Files (02:59:17) :

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

23 12 2007
egypt web design (17:11:40) :

Thanks! cool style

28 01 2008
Web 2.0 Tutorials | Pxdev.com (23:31:35) :

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

14 02 2008
madie (01:44:56) :

its hard to get the white texture thingy

15 02 2008
links for 2008-02-15 « Yet another blog (10:19:27) :

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

16 02 2008
Clean Tm » Blog Archive » Web 2.0 Tutorials Round-Up (05:46:30) :

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

20 02 2008
George Marcell (13:34:01) :

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 (11:34:21) :

great! tnx for tutorila

15 03 2008
Johnny Stickers (02:00:22) :

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ı (05:39:33) :

[...] 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
Photoshopチュートリアル テキストエフェクトいっぱい | DesignWalker (06:21:25) :

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

3 05 2008
2008 | Yerles.com » Adobe Photoshop Uygulamaları (22:11:52) :

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

5 05 2008
play black jack for fun black jack play play black jack for money (05:53:05) :

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 (13:54:29) :

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

Leave a comment

You can use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>