Posted on Sunday, 13th January 2008 by tutorials007
In this tutorial I will teach you how to make a stylish web 2.0 content box.
Perfect for your website design. We will use some layer styles, marquee tools…etc
1. Make a new document.
2.Use Rounded Rectangle Tool (U) with radius 10 to make a shape like on picture below.
Go to Layer -> Rasterize -> Shape to rasterize this shape.
3. Now, hold CTRL and click on shape layer to make a selection around the shape.
When you do that, grab Rectangular Marquee Tool (M), hold down ALT and make a selection like on picture below.
This is what you should have when you release mouse button.
4. Make a new layer and fill this selection with some color.
Allright, go to Layer -> Layer styles -> Inner Glow
Use white color.
Now, go to Gradient Overlay tab.
And last, go to Stroke tab
Now you got web 2.0 style!
5. Fill your first (shape) layer with white, add stroke style like in step 3.
This is what you should have now.
6. Now you can add some icons, shapes to title bar.
7. Now you can duplicate your title shape (the little shape), rotate it and place as a footer.
Use your imagination and add something to spice a little this box 
There are many different choices for online degree programs! A great option if you like design is the online graphic design degree. Most online universities off the program, you just have to find the one with a learning curve that works for your
education goals.
Posted in Photoshop Tutorials | Comments (18)
January 21st, 2008 at 2:09 pm
Hi dear friend!
Cool tutorial!
Thanks,
January 21st, 2008 at 6:09 pm
Hello to you reza.
Thanks for comment…
January 22nd, 2008 at 9:03 pm
Nicely done. Thanks!
January 22nd, 2008 at 10:04 pm
Hi Kort, thanks…
January 24th, 2008 at 6:03 am
hey i dont get the:
Go to Layer -> Rasterize -> Shape to rasterize this shape.
rasterize is not clickable
help please
January 24th, 2008 at 7:07 pm
hey alex,
You must go to Layer menu, then to Rasterize submenu and there you’ll find “Shape”. It must be clickable.
here a photo
http://www.ImageShack.us” />
January 28th, 2008 at 4:51 pm
Very nice tutorial.
February 2nd, 2008 at 10:20 am
Hi! I’m John Strass and i like your site!
Thank you!
February 2nd, 2008 at 4:58 pm
ow, and now I know. Thanks man!!
February 4th, 2008 at 10:27 pm
Thanks for tutorials. Think to give psd?
February 5th, 2008 at 4:32 am
Hey. I need some help on step 3…. I don’t understand it. I can’t make a selection by holding Ctrl. Help?
February 12th, 2008 at 12:56 pm
thanks
very useful ur turorials
April 23rd, 2008 at 3:58 am
great tut! i was wondering how did you put the diagonal lines through the content and the footer
April 26th, 2008 at 7:43 am
This is nicee, im thinking of putting this for my site. thanks for the tutorial
June 8th, 2008 at 8:19 pm
Excellent tut
Thanks
June 19th, 2008 at 1:46 pm
I too can’t make a selection using CTRL click after raterizing the shape (Step 3)
July 15th, 2008 at 10:54 pm
Hey, the gradient colours are not like you said in youre tut :S ;l
November 30th, 2008 at 9:45 pm
What part of this is indicative of the Web 2.0 style? Not trying to be smart but I honestly can’t figure it out. Very useful tutorial in any case.