Create a simple yet attractive web layout
->
Hello my friends. In this tutorial I will show you how easy is to create a dark layout for your business in just a few steps. You can use this layout for any type of business, or with small modifications you can create also a portfolio layout. If you are already followed some of my previous tutorials I am sure you can modify this layout for your own needs.
Clean style web templates are those that are not overloaded with graphic elements like this one i will create today.
As usual I will create a new document with the following size: 1000 x 1100 pixels.
I will set my foreground color to #333333, and then with Paint Bucket Tool I will fill the background color with this color.
I will select Rectangle Tool, and I will create a shape like in the following image. I will use this image to create the header of the layout.
For the white shape I will add the following layer styles
After you add the layer style your layout will look like this one.
I will create a similar shape under this one , and I will use the layer style as above, but I will un check the Reverse button
Here is the result
I will use one more time Rectangle Tool, and I will create another shape.
For this shape I will add some layer styles
Please click on the following image to see how it looks.
Now please download the following set of pixel patterns.
Please note that this set is available only for VIP members.
Load the patterns in Photoshop, and then create a new layer ( press on CTRL+SHIFT+ALT+N ) in the same time.
With Rectangular Marquee Tool I will make a selection on the top of the layout.
I will choose the following pixel pattern, and I will click with my left mouse button inside the selection ( please note that you need to select also the new layer )
This is my result
With Eraser Tool I will delete the bottom part of the shape with this thin stripes. I will use a smooth round brush. This is my result.
I will use one more time Rectangle Tool, to create a shape where I will add later some buttons.
I will add some layer styles
Here is the result
In the middle of the layout I will create a new shape with Round corners. I will use Rounded Rectangle Tool, with a radius corner of 5 or 6 pixels
You can see a small line around this shape. this was made with a simple layer style
I will use Pen Tool to create a shadow under this shape. I will use a dark color to create some shapes. please note that you need to place the layers under the round shape.
Then I will select both layers in my layer palette, and I will press on CTRL+E to merge them into a single layer.
I will go to Filter > Blur > Gaussian Blur, and I will use a value of 10 in the radius field. the shadow will look like in the following image.
In the middle of the round shape I will create two thin lines ( 1 pixel each ) with different colors. I will select both layers and I will merge them ( CTRL+E ). Then with Eraser Tool I will delete the extremities of the lines
In the middle of the layout I will create a new shape with Rectangle Tool.
I will add the following layer styles
This is my result
I will duplicate this layer one time, and I will select both layers in my layer palette. If you skip this step you will not be able to create the same effect as mine.
After you have two layers in your layer palette, you need to merge them into a single layer.
The reason I merged both layers is because I want to delete the bottom part of the shape with Eraser Tool like in the following image. Please use a big smooth brush.
I will add some text, menu buttons, and also some icons. All this icons are available for download if you are a VIP member. Please click on the following image to see better my result.
I will create another shape with Rectangle Tool, and I will place it under the text layer.
I will use the following layer styles
This is my result
My final step is to create another two thin lines ( 1 pixel each ) and I will place them like in the following screen shot
This is my final result.
I hope you like this type of layout. If you want to download this layered PSD layout you need to join our VIP membership. For a small fee you can download over 70.000 items.






















































Hi, I’m Spanish and I am using the translator, if you do not understand please forgive me.
I wonder if you put this post in your blog about blog design with photoshop is just a background or need some html, css …
I also would like to know if the same in all screen resolutions (4:3, 16:9 …)
And finally tell you that you can find me on twitter.
Greetings.
It seems google translate works very good. this tutorial will learn you how to create a ” background ”
If you want to convert this layout into a CSS / Xhtml layout you need to register for a VIP account, and then you need to read this tutorial:
http://www.grafpedia.com/tutorials/design-and-code-a-layout-withouth-using-slice-tool
At the bottom of the tutorial you will find a download link. inside this archive you will find a PDF file explaining how to convert any PSD layout ) or “background ” into a live website ( css + html )
good work razvane, keep the tuts coming
bafta
Great tutorial Razvan, the navigation came out really well keep up the good work
To call your layouts simple or simplistic wouldn’t do them justice. I can definitely appreciate the tasteful and subtle use of the techniques involved to create a good balanced layout in the tutorials here. Most all of these templates, while visually striking and eye catching, still are serving as an enhanced delivery system centered around the content, not the template itself, and that’s where the talent really shows through. Good work all around.
The tuts is GREAT… I will give you a 2 thumbs up…
superbb,,,
Amazing tutorial!! I will try to do some similar layer!! Thankss
Good work, the results look pretty good.
Clean template. Thx!
Really great!