Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Full (Clean) Template

Full (Clean) Template


We'll begin this tutorial by creating a new canvas with a size of 800 x 789 pixels. Select the "Paint Bucket Tool" and fill with 072b51.

image 1

Next, create a new layer, then using the "Rectangular Marquee Tool" draw out a selection and fill with 0e4176 as I have done below.

image 2

Choose the "Line Tool", at 3 pixels and color White and draw the following line.

image 3

Now, select the "Rectangle Tool" and draw the following shape using e3e3e3 as the color.

image 4

Now right click on the new layer and select, "Blending Options...". Now click on "Drop Shadow".

image 5

You may now click OK.

You should now have the below image.

image 6

Now duplicate the layer and clear the layer style by right clicking on the layer in the Layers Palette and selecting "Clear Layer Style".

image 7

Now right click on the duplicated layer and select, "Blending Options...". Now click on "Stroke".

image 8

You may now click OK.

You should now have the below image.

image 9

Now, select the "Rectangle Tool" and draw the following shape using White as the color.

image 10

Select the "Rectangle Tool" again and draw the following shape using e5e5e5 as the color.

image 11

Now right click on the new layer and select, "Blending Options...". Now click on "Drop Shadow".

image 12

Do not click "OK" yet. Still more to do.

Now click on "Outer Glow".

image 13

You may now click OK.

You should now have the below image.

image 14

Select the "Rectangle Tool" again and draw the following shape using 4d79e0 as the color. Change the foreground color to black and go to next step.

image 15

Now right click on the blue rectangle layer and select, "Blending Options...". Now click on "Drop Shadow".

image 16

Do not click "OK" yet. Still more to do.

Now click on "Gradient Overlay".

image 17

You may now click OK.

You should now have the below image.

image 18

Now duplicate the layer and clear the layer style by clicking the layer palette menu arrow and selecting "Clear Layer Styles". Now turn the Fill down to 0%.

image 19

Now right click on the duplicated layer and select, "Blending Options...". Now click on "Inner Glow".

image 20

You may now click OK.

You should now have the below image.

image 21

Next, create a new layer, change the Blending Mode to "Color Dodge", then using the "Brush Tool" around a 30 pixel soft brush, draw along the base of the blue head background.

image 22

Apply your logo as I have illustrated below and draw a white rectangle at the top of the head. Turn the Fill down to 25% and go to next step.

image 23

Next, select the "Pen Tool" and draw the below shape that sits above the head of the layout. Use e3e3e3 as the color.

image 24

Now right click on the new button layer and select, "Blending Options...". Now click on "Inner Glow".

image 25

You may now click OK.

Now add some text. I used Verdana as the typeface with 06294d as the color. Duplicate the text and button layer and shift over to the right as I have done below.

image 26

Select the "Rectangle Tool" again and draw the following shape using e5e5e5 as the color.

image 27

Now right click on the new layer and select, "Blending Options...". Now click on "Drop Shadow".

image 28

Do not click "OK" yet. Still more to do.

Now click on "Outer Glow".

image 29

You may now click OK.

Now add an image above the layer you just styled. Make it a little smaller than the previously drawn shape to give it a border. You should now have the below image.

image 30

Select the "Rectangle Tool" again and draw the following shape using 22375d as the color. Then select the "Text Tool" and type your slogan above the dark blue layer as I have illustrated below.

image 31

I then added a shape in the top left corner above the image using the "Pen Tool" with a blue to dark blue gradient.

image 32

Next, I added some text using none other than the "Text Tool". The headline color used was 0950a0 and the body copy was black.

image 33

I then added three rectangular shapes.

image 34

The Results!!!

The copyright/footer of the layout. I hope this tutorial was not only easy to follow but that you learned a lot on the way. To see actual size, click the below image. Please make yours original.

Full (Clean) Template Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: EmpireDezign
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Share print this page subscribe to newsletter subscribe to rss

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments yakyol June 06, 2007 says:
thankyou
Reply
Add comments to "Full (Clean) Template"

Captcha