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

Cloud Web Design Layout


Lets Get Started!

Create a new canvas 1200 x 1200 pixels with a white background, setup two vertical guides by going to "view > new guide". Create the first guide at 125px then the second guide at 1025px.

image 1

Select the rectangular marquee tool from the left menu, then drag out a selection spanning the width of the canvas. The rectangle should be around 113 - 115 pixels in height.

image 2

Fill the selection on a new layer with a linear gradient using the colors #f9f9f9 and #f0f0f0.

image 3

Double click the layer and label it "header", then add a stroke using the settings below.

image 4

Creating The Featured Background

Using the rectangular marquee tool once again, create another selection underneath the header. This selection should also span the width of the canvas and be about 295 pixels in height. Fill the selection with a linear gradient using the colors #98c0e0 and #a4cff2. You should have something like this.

image 5

Lable your new blue rectangle "featured area" then add a layer stroke using the settings below.

image 6

Finishing The Header

Using the type tool add your website title and slogan to the top left hand side of the header area. On the right hand side of the header area add a simple text navigation using a rounded rectangle as the hover state for the first button.

You should have something like this.

image 7

Finishing The Featured Area

Select the elliptical marquee tool then make a small ellipse against the left guide at the bottom of the blue featured area.

image 8

Hold down the shift key then create another ellipse overlapping the first one you created.

image 9

Repeat the process over and over again until you reach the other side of the canvas. Make sure the last one ends at the right guide.

image 10

Fill the whole shape with the color white on a new layer, then add these layer styles.

image 11

image 12

image 13

You should have something like this.

image 14

Repeat the process again with the elliptical marquee tool, only this time create individual shapes like a cloud.

image 15

Fill the new shape with the color white then add these layer styles.

image 16

image 17

image 18

image 19

image 20

You should have something like this.

image 21

Add your featured image to the featured area, tuck the image behind the bottom row of clouds by dragging the layer beneaf the clouds layer. Im using an image of the new hv-designs layout coming 2010.

image 22

On the left side of the featured image add a title and description.

image 23

Now select the rounded rectangle tool and create a small button at the bottom of your featured description.

image 24

Add the following layer styles to your button layer.

image 25

image 26

You should have something like this.

image 27

Creating The Content Area

Using green headings and grey text build up the content area with some dummy content.

image 28

Under client images begin to create a gallery showcase, behind each image add a grey border with a darker grey stroke. Add your dummy text either side of the images then duplicate the green button from the featured area.

image 29

Creating The Footer

Simply duplicate the clouds and the featured area layers then drag them to the bottom of the canvas. Place the clouds at the top of the blue rectangle instead of the bottom.

image 30

Finally add your footer information to the footer.

image 31

The Finished Layout

Cloud9 Web Design Layout



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


Like us to: