Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Simple Yet Attractive Web Layout

Create a Simple Yet Attractive Web Layout


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.Img
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

Img

After you add the layer style your layout will look like this one.

Img

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

Img

Here is the result

Img

I will use one more time Rectangle Tool, and I will create another shape.

Img

For this shape I will add some layer styles

Img

Img

Img

Please click on the following image to see how it looks.

Img

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.

Img

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 )

Img

This is my result

Img

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.

Img

I will use one more time Rectangle Tool, to create a shape where I will add later some buttons.

Img

I will add some layer styles

Img

Img

Img

Img

Here is the result

Img

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

Img

You can see a small line around this shape. this was made with a simple layer style

Img

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.

Img

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.

Img

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

Img

In the middle of the layout I will create a new shape with Rectangle Tool.

Img

I will add the following layer styles

Img

Img

This is my result

Img

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.

Img

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.

Img

I will create another shape with Rectangle Tool, and I will place it under the text layer.

Img

I will use the following layer styles

Img

Img

Img

This is my result

Img

My final step is to create another two thin lines ( 1 pixel each ) and I will place them like in the following screen shot

Img

This is my final result.

Img



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: