Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design lab layout tutorial

Design lab layout tutorial


Create a new document with the dimensions 850x1012, set the colors #0b3349 as your foreground and #156894 as your background select the gradient tool with a linear gradient. On your background layer begin to drag the gradient starting from the top to about a quarter of the way down your canvas.

image 1

For this next part you need this image. Save the image to your desktop then open it up in photoshop. Drag the image over to your canvas, flip and resize the clouds to fit your canvas. Add a layer mask to your clouds image then drag a linear gradient from the left side of the clouds image, right click your layer mask in your layers window and goto "apply layer mask". Add another layer mask then drag the linear gradient from the bottom, right click the mask in the layers window then goto "apply layer mask". Do the same for the right side. The look were going for is this.

image 2

Once you have something similar duplicate the clouds layer, then hide which ever clouds layer is on top. The bottom clouds layer we need to blur by about 4 pixels so goto "filter > blur > guassian blur" blur by 4 pixels. Unhide the top clouds layer. Set layer opacity to 80% then set blending mode to luminosity. You should have something like this.

image 3

Add your website title and slogan in the top left corner.

image 4

The layer styles for the yellow bit of the title are as follows.

image 5

image 6

image 7

The layer styles for the light blue part of the title are exactly the same as above just change the gradient overlay to.

image 8

On the right side of your canvas add your navigation box using the rounded rectangle tool.

image 9

The layer styles for the navigation are.

image 5

image 6

image 12

Add your text to your navigation.

image 13

Leave quite a big gap beneath the clouds and create two white rectangles using your preferred rectangle tool. Fill them with the color #eeeeee. Then add a drop shadow.

image 14

image 15

Above your biggest content box add a catchy sentence use the same layer styles as your title to make it stand out a bit.

image 16

In the top bit of your big content box add some content, the icon I used next to the welcome text is from dryicons.com.

image 17

Underneath your welcome text and welcome content add 3 dividers (see red arrows). To make dividers like the ones below just create two 1 pixels lines on top of each other.

image 18

Using the rectangular marquee tool create two rectangles inbetween the dividers, fill the selections with the color white, also make sure you have two individual layers.

image 19

Add this gradient overlay to your two rectangles.

image 20

You should have something like this.

image 21

In your boxes that you just created add some icons and some services you may offer, again these icons are from dryicons.com.

image 22

In your smaller content box add a sample form including text fields and labels. Above your smaller content box add a rounded rectangle with the wording "free quote" on it. Press CTRL+T to rotate the box and lettering slightly. The layer styles for the rounded rectangle are the same as the yellow text in the title.

image 23

Underneath the smaller content box add some more content regarding, services, work etc… Use the divider technique explained earlier to divide each part. Maybe add some more spiffy icons from dryicons.com.

image 24

Then finally add a simple text footer. All finished.

Design Lab Layout Tutorial



Author's URL: Hv-Designs.co.uk
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

No comments yet...
Add comments to "Design lab layout tutorial"

Captcha