Article written

  • on 09.03.2008
  • at 12:32 PM
  • by Admin
  • with 28,159 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Simple Universal Layout 7

Pages: 1 2

We’ll design a universal template in this tutorial, it can be used for almost everything because it’s so simple and standard. The colors blue, white and beige are the main colors in this design but ofcourse everything is up to you!

1. Create a new document (800*600).

2. Start filling the background with #d0c2a0 using your paint bucket tool.

weblayoutu1

3. Create a new layer (layer – new layer) and use your rectangular marquee tool to select a content box like shown below in the first picture, fill the selection with #ffffff using your paint bucket tool. After that you should adjust the blending options and add a drop shadow (layer – layer style – drop shadow) with the settings shown in the second screenshot.

weblayoutu2

weblayoutu3

4. Create another new layer and select a small line at the top of the design (mine has a heigth of 5px) and fill it with #0e67a5 (dark blue).

weblayoutu4

5. Create a new layer once more and fill the selection with #5aa5d5 like you can see in the picture. Also change the blending options to add an inner glow (settings in the second screenshot) and a pattern overlay (settings in the third screenshot)! I hope that you know how to create this pattern and if you don’t, just google for it to find out how you can do this… These patterns are called “scanlines”!

weblayoutu5

weblayoutu6

weblayoutu7

6. Now don’t deselect the selection from the previous step or if you did, just reselect it! Find yourself a nice brush with clouds and apply them on a new layer, make sure the foreground color is white #ffffff, #2d7db4 or #094873. You can see my outcome below.

weblayoutu8

7. Duplicate the layer from step four (layer – duplicate layer) and place the copy under the banner you’ve just created!

weblayoutu9

8. You can see that there is a piece of white space that’s not being used between the top of the design and the banner, this will become our menu, it’s a simple and clean one with almost only a littbe bit of text! The font I used was microsoft sans serif with a size of 12px, color used was #515151. Between every navigation link we’re going to place a tiny vertical line using the pencil tool, you can see how I did it in a close-up of the design. You should duplicate this layer a few times to save some time!

weblayoutu10

Pages: 1 2

subscribe to comments RSS

There are 7 comments for this post

  1. wargod says:

    yep, simple but nice and easy :)

  2. tomasdev says:

    Layout finished… soon: online version

  3. Wouter K says:

    I’m having trouble’s with the Pattern :(
    Can’t make that pattern as well..

    Greetz

  4. Admin says:

    Hello, I knew I should have explained it :-) ! Anyway, here is a link where you can download the pattern… A tutorial on how to create this can be found here

  5. Wouter K says:

    Ok√© Ty nice site. I’ve bookmarked :)

  6. kaira says:

    Thanks for this wonderful tutorial!
    Again thanks for all your tutorials , they have improve my skills in PS.
    Hope you continue like this!
    Thumbs UP!!!

  7. zasilenie says:

    Very simple but clean and usefull.
    thx!

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top