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

How to Create a Nice Looking Web Layout


Img

Download the following image on your computer, and then open it in Photoshop. From the Edit drop down menu select Define Pattern.

Img

After you choose a name for this pattern you can close the document with this texture.

Now you can create a new document.

Select Paint Bucket Tool, and with the pattern you just created click one time inside your document. It will look like in the following image.

Img

With Rectangle Tool create a shape like in the following image

Img

For this shape i will add some layer styles

Img

Img

Img

Img

Here is my navigation bar

Img

One of the most important things when you create layouts are stock images. for this layout i will use some nice 3D renders. During this tutorial you will see how some nice images will change the overall look of the layout.

Img

I will select Rectangular Marquee Tool, and on a new layer ( press on CTRL+SHIFT+ALT+N ) draw a big white point ( this point was made with Brush Tool, and with a big smooth brush i will make a simple drawing like in the following image )

Img

I will press on CTRL+D to deselect, and then i will change the blending mode for this layer to Overlay. Here is my result so far

Img

On the header i will create some simple text menus, and a nice impressive text logo. I will add also some text for the main area of he layout.

Img

Under this clean header i will create a new shape with Rectangle Tool. I will use the following color for the big shape: #ebebe9

Img

On this area i will place some text with different styles. here you can place on of the best services you can provide to your customers

Img

Under the text i will create a big shape with a white color. I have used Round Rectangle Tool

Img

I will add also another nice 3D images with robots

Img

Under the body of the layout i will add even more images.

Img

The last step is to create the footer. I have used a simple dark shape, which was placed exactly on the bottom of the layout. Over this dark layer i will place some text like in the following image

Img

Here is the final layout.

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: