RSS Feed 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

In this Photoshop tutorial, we’ll go through the steps of creating a stylish template. This design can be use for any type of website or blog.

1:


Open a new document with a 800 x 1030 pixels, white canvas. In a new layer draw a 800 x 101 pixels, black rectangle above your canvas. This rectangle will be your header.

2:


With your text tool type in your name using font Rockwell, 24 pt, crisp and #57B100 for color.

When you type in your name a text layer should appear in your layers window. Add the following layer styles:





3:



Now add your slogan below your name using font Verdana, bold, 10 pt, none and white for color.

4:


At the other end of your header will be a spot for your search boxes. To make the search button, in a new layer draw a 28 x 28 pixels, #D7006C rounded 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?

17 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.

Add a Comment