Step 1
Create a new Document in the Dimensions of 1024 X 768 Pixels.
Step 2
Now create Guides to manage our Workspace.
Create Guides at 140 Px. and 1140 Px. the our work area is visible by 1000 pixels.
Step 3
Change Foreground Colour to Grey(#333333)
Now select the Rectangle Tool (U) from the tool box and create a rectangle box with a width of 1200 Pixel and Height is 100 pixel.
Create a new Layer By clicking Shift+Ctrl+N after fill the Layer with Front ground colour(#333333) and name the layer to header Back ground.
Right now it looks like some light black colour is filled on the top of template. lets make some lively feeling for this.
For this just give some Noise to the layer.
choose Filter > Noise > Add Noise.
When the pop up shown, click OK button. And fill Amount with 0.8
Ok now its look some better.
Step 4
Now we will create the Navigation menu.
Select Horizontals type tool (T)from the tool box and create a text layer at little below Right side of header.
don’t forget to make the text as right align.
The parameters of text tool are
Font : Helvetica
Font Type : Bold
Font Size :12 pt
Font Color :E6E6E6
Step 5
Now we will create Logo.
Select Horizontals type tool (T) from the tool box and create a text layer at little below Left side of header.
The parameters of text tool are
Font : Mistral
Font Type : Bold
Font Size : 48 pt
Font Color : E6E6E6
Step 6
Now get image from resource images with an dimensions of 800 px and 500 px .(Most of the times from the client or else from the stock photo).
Make the image to horizontally Center of the page and just below our header.
Now let’s make shadow below the image. Select Rectangle Tool (U)then set the size into 530px by 70px. Change the color with black and name it dark.
Step 7
Now Transform (Ctrl+T). Edit> Transform Path > Perspective.
Step 8
we need to make the box blur. Filter > Blur > Gaussian Blur. enter the radius is some 23 Pixels as shown in below Image.
Ok guys now the shadow looks great.
Step 9
now we will make Slogan for the website, Select the Text tool (T), and type “Creative designs for your website” just below the Shadow. it didn’t look great so create some button at the end of the slogan text.
Select Rounded Rectangle Tool (T), and make the Radius 10px and the size 200px by 50px. Name the layer as Button.
and just give a stroke of 1 Px in Grey colour (#CCCCCC)
Step 10
Now create a text layer with White Text color Whit for text on button
you can make more attractive the button by adding some more shapes on the button.
Step 11
Now create one background for the total web site with a color of light Grey (#EEEEEE) and put it bottom of all layers.
Let’s create one line that try to divide image content of the website, select Line Tool (U)then make it 960px with color #ffffff and name it with Line 1 then duplicate , move down keyboard 1 time, and change the color into #999999.
This two layers make light grey with shadow effect.
Step 12
now lets come to create some content in the page. Select the Rectangle Tool (T) and create one box with sizes of 215 X 170 Pixels and fill the box with Grey color (#CCCCCC).
Now Duplicate the box for 3 time. totally we get 4 boxes and distribute them into horizontally center.
we will put image on the box, but before that, we need to make sure that the image are located in the middle of the box with right angles. Select layer(Ctrl+Left click) into active and choose Select > Modify> Contractthe fill it with 7px.
Now fill the Selection with White Color (#FFFFFF).
Do the same for all the other 3 boxes.
Step 14
Now get some images to fill these 4 boxes. and allign in side the white color.
Step 15
Now we will add Text and descriptions below the image. Select Text Tool (T)and fill the same as shown below.
Create one more box on footer with an width of 100Px height with a color of light grey(#31334)
Step 16
Now its time to create footer
Take text tool and type as recent posts with an font color of (#E2E2E2)as shown like in below image.
Lets add some text on on below it
Step 17
As shown above its not looking good there lets make some additions there. Make a new document of 6px by 6px. Zoom until a column is seen as 1px. Select Pencil Tool (B)and do the following.
now we will define this image as a pattern. after that we can use it in our template. Edit > Define pattern change the name to psd2web pattern.
Step 18
now get back to our template file and select rectanguler marquee Tool (M) and make th size by 210 X 7 Px.
Select the area below the RECENT POSTS and create a new layer and apply layer blending options > pattern overlay. as the paatern we created recently
Step 19
Now create one more line to separate the posts.
Step 20
We are almost finished now you have to add just copyright information in the footer.
Select the Text Tool(T) and write the copyright information on bottom box.
Download the original Source file
