3,571 views

Hello friends. In this Photoshop Tutorial you will learn how to create nice simple website layout. Knowledge of basic tools are required such as rectangular tool, gradient tool, text tool and layer style tool.

By niharika.singhal, on April 08, 2011, under Photoshop Tutorials
 

Hello friends. In this Photoshop Tutorial you will learn how to create nice simple website layout. Knowledge of basic tools are required such as rectangular tool, gradient tool, text tool and layer style tool.

 

Final Result Preview:

 
 
 

Step 1:

 

Open up a new document (1000px X 950px). Fill it with color "#cccccc"

 
 

Step 2:

 

Take a new layer. Name it "White". Draw a rectangle using Rectangle Tool. Fill it with white color. Now place it in the centre.

Place the rectangle in centre:

Select both layers, Press V, click on Align Horizontal Centres.

 
 

Step 3:

 

Copy layer "White". Name it "black". Fill it with black color. Place it on the white box, leaving some space for the header.

 
 

Step 4:

 

Take a new layer call it "green". Draw a small rectangle. Place it in the top right corner of black box. Go to Layer Style Dialogue Box. Click on gradient. Colors of the gradient are #336633 and #00ff66. Change the Angle of Gradient to 90 degree.

 
 

Step 5:

 

Take a rounded rectangle with radius 20px. Fill it with White color. Name the layer "rounded rectangle". Place it below the black box.

 
 

Step 6:

 

Draw few more boxes as shown in the image below. You can put images according to your need.

 
 

Step 7:

 

Now we have to make a brush for the background texture. Take assorted brushes. Select circle 4. Go to Window-Brush. Select Shape Dynamics, Scattering, Color Dynamics. Use default settings for Shape Dynamics and Scattering. In Color Dynamics, make everything 100%.

 
 

Step 8:

 

Take a new layer. Name it "texture 1". Ctrl click the "white" layer. Now the white space is selected. Use the brush to create textures.

 
 

Step 9:

 

Similarly give texture to "green" and "black" layer

 
 

Step 10:

 

Now complete the header. Crop the image of the laptop and place it on the header.