Clean & Universal Layout 8
Pages: 1 2
How to create a simple, clean and universal layout! This can be used for a software company, any company, CMS system or even a wordpress template…
1. Create a new document (900*600).
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.
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!
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)!
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…
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…
Pages: 1 2

(1 votes, average: 4.00 out of 5)










Very nice!
Very good tutorial. Thanks a lot for this.
I’ve seen much better tutorials here, but is very good too!
Thanks for share
That is *very* clean. I like the simplicity of it, sometimes less really is more. Good job!
Thanks a lot
thanks, taught me a few things
Awesome tutorial, it’s so easy to follow and the outcome is great.
Thanks!!
Very nice tutorial and have so much information about website design.
Thanks!