Create a web 2.0 layout in Photoshop

In this tutorial, you’ll learn how to create a very fancy “Web 2.0″ website layout in Adobe Photoshop using beginners skills. If you have any questions about this tutorial don’t hesitate to ask in the comments.

Create a fancy web 2.0 app layout in Photoshop

Author:

Jean-Baptiste Jung

Category:

Photoshop

Here is what you’re going to create in this tutorial:

1 - Create a new document of 1280*1024 pixels. Fill the background with white (#FFFFFF)

2 - Pick up the rectangular marquee tool and draw a rectangle with a height of 455 pixels. That will be our website featured content. Fill it with light blue (#B3DDFB).
Once done, draw a new rectangle from the top of the document to be our website header. In the example, mine have a height of 89 pixels and the color is #3399CC.
Last part is to do the footer. Just draw a rectangle on the bottom of the document and fill it with grey (#7E8081)

You will have something like this:

3 - A site can’t be great without a great navigation. So let’s draw a cool tab-based navigation for our new design. Create a new layer set and name it navigation.
Pick up the rounded rectangle tool, set the radius to 10px and draw a rounded rectangle to be a menu tab. Background color should be the same as our featured content background (#B3DDFB). On the layers window, right click on the newly created layer and choose “Rasterize layer” from the menu.

4 - Copy the layer 3 times in order to have 4 tabs. Place the navigation layer set a 30 pixels of the right margin of the document, as shown in screenshot below.

5 - Now, let’s create a different style for the active tab. With the rounded rectangle tool, create the same rounded rectangle as before, but with white (#FFFFFF) as background color.

6 - Once the active tab layer is created, right click on it on the layers windows and select “Blending options” from the dropdown menu. Add a gradient with the following parameters:

Your navigation should now look like this:

7 - Let’s add some text to the tabs. I have choosen a 24pt, “Arial rounded” font with #3399CC as color. We now have a finished menu:

8 - The next step is to create the 3 numbered steps describing how cool the product is. Create a new layer set and call it “Numbers”.

9 - Now, pick up the Elipse tool and draw a circle, with white (#FFFFFF) background. Once done, pick up the text tool, and write two lines of text. In the PSD, I have used 24pt #3399CC Arial Rounded font.

10 - Keep the Arial Rounded font and change its size to 60pts. Type “1″ in the whote circle.

11 - Repeat steps 8, 9 and 10 until you have 3 differents numbered steps. At this point, it should looks like this:

12 - Time to add a video presentation of the product. I have simply took a screenshot of a vimeo video, and scaled it to 401*289 pixels.

13 - Now that we completed the upper part of our design, let’s populate the main part of our design, which will be where our product presentation text will go. Create a new layer set named “Paragraph 1″.

14 - Pick up the text tool and write the paraph title. I have choosen Arial Rounded font, 24pt, in #7E8081 color.

15 - Pick up the line tool and draw a line below the paragraph title. Color is the same as for the title, #7E8081.

16 - Let’s write the paragraph: Pick up the text tool and draw a square to write in. The square should have the same width as the line we previously drawn.

17 - Once you typed your paragraph text, select it and open up the Character and Paragraph palette. Click on the “Paragraph” tab in the palette, and click on the “Justify All” button to justify your text.

18 - For the two remaining paragraphs, simply copy the layer set named “Paragraph 1″, or repeat the last 4 steps. Once you completed this step, the paragraphs will look like this:

19 - We now have a design that starts to looks very good. Though, two important part are missing, the footer and the logo. let’s start by the logo. Place the cursor in the header and type your web 2.0 app name. I chose “WidgetCreator”, which sound really cheesy web 2.0, but of course, feel free to find a better name ;) I used a white (#FFFFFF) Arial Rounded font in 30pt size with no effect, in order to keep the logo simple and minimalistic.

20 - For the logo icon, I have picked up this image.

21 - Last step of this tutorial is the footer. Siply choose a white (#FFFFFF), 18pt Arial font and type your text. Make sure to align it to the center of the page.


Another idea for a great footer should have been to add sponsors logos. Feel free to experiment!

And here is our final result:

The proof that you can easily create a very fancy design with nothing more than beginner skills in Photoshop!


Get a commercial/public use licence for this PSD (More info)

Show Some Love
Thank you for your support

32 Responses

  • Sumesh

    That’s an easy tutorial to create a clean website, Jean. The navigation menu, and the 1-2-3 steps look nice overall.

    Here are some things I would suggest adding/changing:

    1)text effect (shadow and subtle gradient) for the step numbers 1/2/3.

    2)a better logo! Obviously, this tut isn’t to create a logo, but nevertheless…

    3)text color of navigation links and 1-2-3 steps. I think, although the blue on blue does not look terrible, it would be a lot better with a different color.

  • Lenin

    Hello, nice work. How and where do you get inspiration to design these websites. I’m a good photoshoper and i can design designs without going through all the text but my problem is i don’t know where to initially get started ie from scratch! any help?

  • Jean-Baptiste Jung

    @Sumesh: Yes, I agree that the logo is very simple and not original at all. However, as you said it is not the most important point of this tutorial.

    For the rest, it depends of personnal tastes, feel free to grab the PSD and experiment :)

    @Lenin: I took inspiration on existing designs and color schemes, then mix together things I liked. And then, just a bit of creativity ;)

  • lawny

    Thats a nice and clean layout i just wonder if i can still code some of your designs into blogger templates with credits in the footer to this site like i did when Matthew was the owner i post them on my blog

  • Jean-Baptiste Jung

    @Lawny: Hello and thanks for your compliment. I have created a “Commercial/Public release” licence which allow PsdVibe readers to use, code and/or release any of our designs.
    So, as long as you have a licence, you can do what you want with the psds. Another option, if you want to code our designs without paying a licence, is to write a quality “psd to html” or “psd to wordpress” tutorial for PsdVibe, and release the design on PsdVibe.

  • Thomas

    Nice tutorial Jean-Baptiste.

    @your last comment :
    It’s licenSe in English :)

  • Jean-Baptiste Jung

    @Thomas: Thanks for the compliment and for letting me know about the word “license” ;)
    English isn’t my first language so I still make some mistake sometimes. Sorry for that!

  • Thomas

    De même, c’est parce que j’ai fait l’erreur il n’y a pas longtemps ;)

  • Luke

    I can code this up and write a tutorial if you want?

  • Jean-Baptiste Jung

    @Luke: If you can create a detailed tutorial as such as this one, the answer is definitely yes :)

  • Carl - Web Courses Bangkok Instructor

    Really nice and perfect for beginners.

    Thank you.

    C

  • tirath

    Awesome web layout with nice step by step detail tutorial
    You are genus
    great work
    Thanks so much for your kind effort for posting Awesome web layouts tutorial always.
    I learn so much from you
    Keep up good work
    God bless you :-)

  • Chris Hudson

    Jean-Baptiste Jung

    You were correct, the noun is “licence” in english no need to apologise – it may well be “license” in american…

  • Free Directory marocplus

    Very good work
    Thank you

  • David Carpenter

    Hi, thanks for the tutorial. I feel comfortable using Photoshop and can create the template without a problem. however, how do I utilize the template as an actual webpage? For example, where are the “hooks” that allow me to add html?

    Thanks,
    David

  • Csaba

    Nice layout and great tutorial. Trying to follow it now. Seems to be ok so far ;)

  • Oktigh

    nice tutorial; i trying now..

  • jai

    i love this tutorials

  • SJL Web Design

    Great layout and the tutorial was very easy to follow, thanks for sharing it.

  • Web Design Northampton

    Thanks for the awesome tutorial, the website looks great.

  • Corporate Identity

    Fantastic tutorial, I love the colours and layout, especially the three columns.

  • Jacob

    I love using your site for inspiration, You are extremely talented. Thank you :)

  • John Pitt

    Good tutorial. thank you!

  • Allan

    Great tutorial, i’ll give it a try.

  • Kyle

    I used it for my site to create a few cool images. Great tutorial for laying stuff out.

  • Ryan

    Nice tutorial, thanks for sharing.

  • Coktri

    Simply nice and clean website, thank you!

  • Joe Farm

    this great, nice guide i’ll try at home

  • gadgetech

    nice tutorial.I will try my best to do it like you.thanks

  • Giochi

    Really nice and perfect for beginners.

    Thank you.

  • me

    @Luke
    Can you please make a coded tutorial
    that would be great

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors