Clean & Universal Website Design

1. Create a new document (900*600). In this tutorial we're going to create a simple, clean, universal template! This can be used for a software company, any company, CMS system or even a wordpress template...

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

3. Create a new layer (layer - new layer) and use your rectangular marquee tool to select a box like shown below where you'll be able to add text and pictures when this layout is coded. Now fill the selection with #eff0e2 to end up with something like this.

Click to enlarge

4. Now we're going to adjust the blending options of this layer and we are going to add a drop shadow, gradient overlay and a stroke (layer - layer style - blending topions). Use these settings... In the third screenshot you're able to see what we should have for now!

Click to enlarge

5. Now use your elliptical marquee tool to select a shape like this (I used a fixed size of 7000px*200px and after that I selected the rest with my rectangular marquee tool while pressing shift to add it up to my selection) and fill it with #eff0e2 on a new layer (layer - new layer)!

Click to enlarge

6. Now move this layer under the one we've created in step 3 and copy the layer style from that one to this new one (you can see what I did in the following screenshot! In the second one is the outcome...

Click to enlarge

7. In this step I've just added some text to fill this otherwise empty design with a little bit of content! The font I used is microsoft sans serif and the colors: blue title #2881a1, dark text #4d4c48, ligher text #6d6b6e...

Click to enlarge

8. Now we're going to add a *logo* because the header is just plain blue and it's way too empty! You can make one yourself or ask another designer to create one for you of course This is just an example and not a good logo at all in my opinion (it's not even a logo, just a brush), but here we go! Create a new layer (layer - new layer) and change your foreground color to white! Download this brush and use one of them to create something like this... Make sure you don't brush over the content boxes because we don't want starts there! You can also just move the stars layer under the other ones, just above the background!

Click to enlarge

9. And tadaa, there you have a good looking design, the only thing you have to add is a title and maybe a slogan and you're done! I hope you enjoyed this tutorial and if you use this on one of your sites, let me know! IF you have problems or questions you can always onctact me using the contact page!

Click to enlarge