Stylish web 2.0 content box
Posted on 13. Jan, 2008 by tutorials007 in Photoshop Tutorials 13,728 views
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.
18 Responses to “Stylish web 2.0 content box”
Leave a Reply
- 30+ Excellent PSD to HTML service providers
- Facebook Advertising coupons worth $225
- Create a functional website from PSD product
- Free PHP/MySQL cPanel hosting
- 320 Free Mini Pixel Icons
-
Vangoes: Thank you for offering such a well researched list...
-
JustenJusten: I'm currently looking for new hosts because 000web...
-
shuboi: "There might be a lot of options but nothing works...
-
Adebanjo: What should it be saved as? and how about getting ...
-
Amit: Nice blog. it is maintained very efficiently. look...
reza
21. Jan, 2008
Hi dear friend!
Cool tutorial!
Thanks,
tutorials007
21. Jan, 2008
Hello to you reza.
Thanks for comment…
Kort
22. Jan, 2008
Nicely done. Thanks!
tutorials007
22. Jan, 2008
Hi Kort, thanks…
alex
24. Jan, 2008
hey i dont get the:
Go to Layer -> Rasterize -> Shape to rasterize this shape.
rasterize is not clickable
help please
tutorials007
24. Jan, 2008
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” />
cesar
28. Jan, 2008
Very nice tutorial.
vacation
02. Feb, 2008
Hi! I’m John Strass and i like your site!
Thank you!
AD
02. Feb, 2008
ow, and now I know. Thanks man!!
emre
04. Feb, 2008
Thanks for tutorials. Think to give psd?
Neo Girl
05. Feb, 2008
Hey. I need some help on step 3…. I don’t understand it. I can’t make a selection by holding Ctrl. Help?
webroster
12. Feb, 2008
thanks
very useful ur turorials
airborne
23. Apr, 2008
great tut! i was wondering how did you put the diagonal lines through the content and the footer
NarutoAnimeReturns
26. Apr, 2008
This is nicee, im thinking of putting this for my site. thanks for the tutorial
chris
08. Jun, 2008
Excellent tut
Thanks
Adam
19. Jun, 2008
I too can’t make a selection using CTRL click after raterizing the shape (Step 3)
Nathan
15. Jul, 2008
Hey, the gradient colours are not like you said in youre tut :S ;l
Rexus
30. Nov, 2008
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.