1. Create a new document (400*250). We’re going to create some text suitable for a web 2.0 design.
2. Fill the background with #FFFFFF using the paint bucket tool.
3. First of all you should type out a little bit of text like I did. I used black as my front color because we’re going to add a gradient overlay anyway. The font used in this tutorial is arial black (60px).
4. In this fourth step we’re going to adjust the blending options and add some effects. So go ahead and navigate to (layer - layer style - blending options). We’ll adjust the drop shadow settings, stroke settings and ofcourse the gradient overlay to create the 2.0 design effect.
5. In this last step we’re going to add the typical shine effect so use your rectangular marquee tool to select a box like shown below and fill it with white #ffffff on a new layer (layer - new layer).
6. Now lower the opacity of the previously created layer to 25% to end up with this web 2.0 design effect!
Please Login or Register to download the .psd file.
February 20th, 2008 at 23:41:12
Nice tutorial
February 23rd, 2008 at 21:52:56
good job. thanks
March 3rd, 2008 at 16:44:52
It could all be done in BO. No need to make another layer for filling it with white gradient!
March 5th, 2008 at 22:31:58
Really nice tuto about some of web 2.0
March 12th, 2008 at 15:17:54
Great tutorial, pretty easy effect to do.
But, I agree with Kryzcho… there is a couple of better ways to handle the white overlay layer… what if you need to put this on a colored background? Still, nice effect.
March 12th, 2008 at 15:43:33
Hmm that’s right… But you can find the color codes easily and just add a gradient overlay instead
March 13th, 2008 at 17:55:20
This was a very great tutorial and pretty easy effect to do. But, there is a couple of better ways to handle the white overlay layer. The whole time while I was doing the tutorial I questioned what if you need to put this on a colored background? But over all the whole tutorial was great.
March 15th, 2008 at 04:22:48
very cool tutorial, gonna use it and adapt it for a few of my graphics. Thanks!!
March 15th, 2008 at 19:07:37
It’s just as easy with an coloured background. Make the overlayer a normal layer (don’t know what “rastern” is called in english), select the text, invert the selection and delete everything from the white overlay but the overlay on the text.
March 16th, 2008 at 17:50:04
Really Hot and nice tutorial Keep chillin !!…
April 12th, 2008 at 16:52:13
I got a nicer outcome, instead of using the blue, I used the colors used in the “Fresh Gradient Banner” tutorial and it came out really nice
Thanks for the tutorial!
May 20th, 2008 at 12:34:09
This was a wonderful series of comments and the article is excellent. Shiny 2 is shinning now.
May 24th, 2008 at 19:20:19
Litte hard to understand.:P
September 3rd, 2008 at 06:44:23
Great this was a cool effect.
Thanks!!