iEntry 10th Anniversary About Tutorials Blog

All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
design-a-web-20-style-template-in-photoshop

Design a Web 2.0 Style Template in Photoshop

9-12-07Category Filed under Photoshop Tutorials & Web Layouts
5:


With your text tool type in “go” using font Bookman Old Style, regular, 14 pt, strong and white color.

In your layers window add the following layer style:

6:


Create a new layer set titled Navigation in your layers window. In a new layer draw a 800 x 5 pixels, #57B100 rectangle.

7:


In a new layer draw a 800 x 21 pixels, #FAFAFA rectangle below the green rectangle from step six.

In your layers window add the following layer style:


8:


At the bottom end of your navigation draw a 1 pixel #57B100 line across your canvas.

With your text tool type in your navigation links using font Arial, bold, 11 pt, none and #005E00. Add spaces and #D4D4D4 line between each links.

At the other end add your sub links such as RSS Feed, Feedback etc.

9:


Create a new layer set titled Content in your layers window. In a new layer draw a 522 x 29 pixels, black rectangle.

In your layers window add the following layer styles:




Pages: 1 2 3 4
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

18 Responses to “Design a Web 2.0 Style Template in Photoshop”

  1. Origin Maker » Web 2.0 Style Template Says:
    September 14th, 2007 at 11:44 am

    [...] » Full View » Read Tutorial [...]

  2. Tuesday Says:
    September 15th, 2007 at 12:35 pm

    looks good

  3. java Says:
    September 16th, 2007 at 8:49 am

    nice one

  4. Bookmarks 09/17/2007 | WebNotes Says:
    September 17th, 2007 at 12:34 am

    [...] Web 2.0 Style Template Tutorial [...]

  5. Henk Says:
    September 18th, 2007 at 8:44 am

    YOU FUCKING FUCK HOW DARE TO EVEN USE THE ADDITION 2.0 THIS LOOK FUCKING NO WHERE NEAR WEB 2.0 FUCKING SHIT LOZER ASSHOLE.

  6. andie Says:
    September 18th, 2007 at 2:03 pm

    who pissed in this guys cornflakes?….damn lmao..nice tut dood…keep em coming

  7. tehee Says:
    September 19th, 2007 at 5:06 am

    Thank you guys!

  8. hvdesigns Says:
    September 19th, 2007 at 1:32 pm

    indeed!

    nice tut, reminds me ov a template on styleshout

  9. ZylixInteractive Says:
    September 19th, 2007 at 8:50 pm

    Very nice site design, maybe you could make an HTML/CSS tutorial that would go with the overall site layout, that would be pretty cool.

    That Henk guy looks pretty mad…

  10. Admin Says:
    September 20th, 2007 at 8:26 pm

    Thanks guys, lol herk.

  11. Jordan Says:
    September 24th, 2007 at 5:00 pm

    I like it, it look unique.
    @Henk: if you reply again, got something you think is better, id like to see it, although I do admit, this may not suit your needs, or mine, its still looks fantastic.

  12. RSD Says:
    October 6th, 2007 at 5:38 am

    looks great i like, not quite what i would be looking for but it gave me some ideas.

    @Henk: if your gonna flame someone….at least make sense

  13. soul_ Says:
    October 13th, 2007 at 11:59 am

    Haha. people that suck at flaming. XD
    anyways this template is good. :) good job. =D

  14. I agree with Henk Says:
    November 1st, 2007 at 3:47 pm

    I agree with Henk you *****. this isn´t a web 2.0 style layout design ;) so you know ;)

  15. Used Cars for Sale Says:
    November 12th, 2007 at 6:54 am

    Nice Design , well done.

  16. Penisa Says:
    February 11th, 2008 at 7:04 am

    Nice site for penis enlargement Hope you will like it
    Its not like we always say
    best of luck http://penisenlargement.pk

  17. Undy Says:
    March 17th, 2008 at 7:31 pm

    Nice tutorial, i just did it for my website template.

  18. YourFriend Says:
    January 2nd, 2009 at 1:40 am

    Web 2.0 - dumbing down internet 1 moron at a time.

Add a Comment