November 30th, 2009 in Photoshop Tutorials by Richard Carpenter
Cloud9 Web Design Layout
17 Votes, Rating: 4.59
Loading ...
Hello, welcome to another tutorial by hv-designs. Today il be showing you how to make cool blue web design layout. The layout features a cloud theme and a screenshot of the new hv-designs coming 2010.
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.
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.
Fill the selection on a new layer with a linear gradient using the colors #f9f9f9 and #f0f0f0.
Double click the layer and label it “header”, then add a stroke using the settings below.
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.
Lable your new blue rectangle “featured area” then add a layer stroke using the settings below.
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.
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.
Hold down the shift key then create another ellipse overlapping the first one you created.
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.
Fill the whole shape with the color white on a new layer, then add these layer styles.
You should have something like this.
Repeat the process again with the elliptical marquee tool, only this time create individual shapes like a cloud.
Fill the new shape with the color white then add these layer styles.
You should have something like this.
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.
On the left side of the featured image add a title and description.
Now select the rounded rectangle tool and create a small button at the bottom of your featured description.
Add the following layer styles to your button layer.
You should have something like this.
Creating The Content Area
Using green headings and grey text build up the content area with some dummy content.
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.
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.
Finally add your footer information to the footer.
The Finished Layout
Thanks for reading this tutorial, dont forget to DIGG and RE-TWEET this tutorial, your help is much appreciated.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
43 Responses to “Cloud9 Web Design Layout”