Web 2.0 Design Tutorial

Posted on June 14th, 2008 by xsabrina.chic | Filed Under » Designing, Tutorials

Somebody asked me what is Web 2.0 Design, and how to design it. You can read about the web 2.0 design at wikipedia.


By this time I will teach you how to make a Web 2.0 Design which can be use in Web Designing, Logo Designing and other Web Interface Design. In fact, this my commonly used design for my clients. These sample of Web 2.0 Design stuffs can be seen at my portfolio.


web 2.0



Requirements:
Adobe Photoshop – any version can do


1. File > New (width: 300px and height: 300px). And choose a black background.
2. Draw an object. You can use the Custom Shape Tool and choose a shape you want to use. I used star.
3. Already drawn a shape? Go to tool bar and use the Elliptical Marquee Tool.
4. Select approximately half part of the star. Refer to the second illustration below.
5. Now go to tool bar and use Gradient Tool. and apply the following here.
6. Go to layers palette and add a new layer. Then apply gradient. Please refer on the third illustration below.
7. On layers palette again while the gradient layer selected, hold the Ctrl key on the keyboard and click the layer’s thumbnail of star or the object you used. Refer to the 4th illustration below.
8. While the star is selected on your workspace and on your layers palette the gradient layer is selected, go to Menu Bar > Select > Modify > Contract > Contract by: 1 > OK.
9. Then on the Menu bar again > Select > Inverse.
10. Finally, delete the selected space for gradient.


See the final results. You can use the different colors.
web 2.0



Please don’t re-post this tutorial instead, trackback this post. Thanks for reading!




41 Comments to Web 2.0 Design Tutorial

  1. xsabrina.chic
    June 16th, 2009 at 2:01 am

    thanks khevz.. this is the old post aw.. those old comments was approved during my hectic times. apology for those who commented without my answers :mrgreen:

  2. kevz13
    June 14th, 2009 at 9:44 pm

    :cool: first it was difficult..then when i try it few more times..it was kinda easy^^

  3. mhels
    May 19th, 2009 at 7:31 pm

    i like it..but this piece does’t like me perhaps……uuuuu

  4. aRa ♫ ♫ ♫
    April 4th, 2009 at 11:23 pm

    :razz: yey!! tnx for the tutorial!!

  5. sonny
    March 25th, 2009 at 7:14 pm

    Hi, nice tuts and easy to learn. By the way san pala makakakuha ng hosting dito na mura, I’m a fresh grad lang po ng web dev eh hindi ko pa alam mga masikot sikot sa wed eh. If you would say na web hosting from other countries, wala po me credit card or paypal.

  6. j-em guaro
    December 22nd, 2008 at 3:53 am

    elow….ako po c j-em of bacolod city….2nd yr..IT student po ako…pwd ho bang mgpaturo kung panu gumawa ng web designing…next yr pa naman namin pag aaralan yan sa sch. pero gusto ko bago ituro sa amin marunong na akong gumawa kahit kaunti….ganda-ganda talaga ng pagawa nyo ng mga layouts,,,sana magawa ko rin ang mga gayan gakanda na layout…juzt reply to my e-mail

  7. j-em guaro
    December 22nd, 2008 at 3:52 am

    elow….ako po c j-em of bacolod city….2nd yr..IT student po ako…pwd ho bang mgpaturo kung panu gumawa ng web designing…next pa man namin pag aaralan yan sa sch. pero gusto ko bago ituro sa amin marunong na akong gumawa kahit kaunti….ganda-ganda talaga ng pagawa nyo ng mga layouts,,,sa magawa ko rin ang mga gayan gakanda na layout…juzt reply to my e-mail

  8. ExiLed
    December 10th, 2008 at 5:48 pm

    :neutral: Hello. I’m a Computer Engineering student residing here in Cebu. Can you teach me how to create layouts? I’ve had seen your layouts and no doubt, they’re beautiful! Recently I tried to create layout but it seems to be a waste. I really do want to learn how your creative mind creates a creative layout. If you have time, just e-mail me at junjack00@yahoo.com —Thank you Ms. Sabrina. Hope to see you soon! :grin: I’m a big fan of yours. I’ll create a link of your Digdesignz website in my site. – ExiLed [OMG_Mr.DotA]

  9. Marjon
    December 8th, 2008 at 12:37 am

    hi? mtagal ko na kc nri2nig ang web 2.0, hangang ngaun hindi kupa masyado nai2ntindhan, pwdi moba akong tutuan? maga2nda kc mga layout mo eh?just rply 2my email..thanks.

    good luck and more power.

  10. jessizxz
    December 2nd, 2008 at 1:24 am

    tQ for the turtorial… ^^v

    ~Jessi~


Leave a Reply