Simple Universal Layout

1. Create a new document (800*600). 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 of course everything is up to you!

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

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.

Click to enlarge

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

Click to enlarge

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"!

Click to enlarge

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.

Click to enlarge

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

Click to enlarge

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 little 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!

Click to enlarge

9. Use your horizontal type tool to type out some text for the title and add a drop shadow like you can see in the screenshot below.

Click to enlarge

10. In this last step I've just added some demo text to finish it off! I hope everyone likes this design because of the simplicity!

Click to enlarge