Web Design Layout #4 Tutorial

Create a new document 800×800, select the colors #2c2d2e & #47474a (or something similar) and drag a linear gradient over your canvas.

Now create a new layer, using some grunge brushes add some grunge.

Set layer opacity to 50% and blending mode to soft light. Now select your background layer and add some noise by going to “filter > disort > noise”.

Now merge both layers together, and goto “filter > render > lighting effects” use the settings below. (sorry about quality of image)

You should now have something like this.

Now select the rounded rectangle tool and make these 3 set of boxes.

Once you have made the boxes set the all the layers opacity to 40% and add these layer styles.

You should now have something like this.

Add your site title and logo.

Still with the text tool add your navigation text and main text.

Now using adobes custom shapes add a selection of small arrows next your navigation text and 2 big small arrows at the very bottom (see picture below).

Under “welcome to our site” add a small rectangle fill with a dark shade of blue/grey.

Now take abit of time to add a brief description of your website.

Now select the color white and select a grunge brush, add abit of grunge into your header on the right side.

Add your text for your other 2 sections and add a third section at the bottom labeled “featured work”.

Now select a couple of pictures of your choice for your work and recent entry.

Now were going add abit of shading to our header and navigation, starting with the navigation, select the color white and the rectangle marquee tool. Draw a rectangle across half of the navigation and fill with white.

With your white box layer selected, hold ctrl and click on your navigation, now goto “select > inverse” then hit the delete key on the keyboard. you should be left with this.

Now add a layer mask and select a reflected gradient, drag the gradient over the left side from the middle so both the left side and right side smooth into the box. do the same with the header. you should have something like this.

36 thoughts on “Web Design Layout #4 Tutorial”

  1. it is nice work and a good idalogy….
    thanks to help for us that are new in photoshope..
    by usuing this tutorial i feel confident in photoshope.

  2. This was a really good tutorial but I have one question about it. I have had this problem for a while now so I decided to just finally ask it. I notice that if you where to save this photoshop image for web and view the site on a web browser there would be a white background color. How do web designers avoid this problem?

  3. in response to nvelopd question – you can assign the background of a webpage to any colour you like. default colour is white – so you can change it to what ever colour you like. explore css – you can change the background to graphics colours etc.

  4. i got a question. :p you said in the tut:

    Now create a new layer, using some grunge brushes add some grunge.

    i know how to create a new layer. but i don’t understand the grunge… 🙁 can you help me with it? i have photoshop cs 3

  5. Very nice tutorial!!

    I’m newbie in webdesign. I’m now wondering how to take this photoshop in the real on homepage.
    How to begin first? Mockup or CSS, late photoshop. So final to take photoshop into CSS?

  6. Hi. I was following your tutorial, and when I got to the last step it said: “Now add a layer mask”. Which brings me to my question, What is a layer mask?

    Except for that, a great tutorial 😀

  7. the layer mask button is the 3rd button at the bottom of the layers pallette looks like a square with a circle inside it

  8. It’s cool … i did it … but how can i use it as a website? i mean there is no html code. i don’t make a website with photoshop yet. it’s my first time.

Leave a Reply

Your email address will not be published. Required fields are marked *