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

Creative Design Layout Tutorial


First off, create a new document 900 x 1430 pixels. Select the paint bucket tool and fill your background with the color #eae5cf. Select the color #443825 and apply to your forground, then select the color #2c2518 and apply as your background. Select the rectangular marquee tool and create a big rectangle across the canvas. Make the rectangle about 300 pixels in height. Select the gradient tool with a radial gradient, start from in the middle of the rectangle and drag upwards. You should have something like this.

image 1

Add this layer style to your rectangle.

image 2

For this next step you need to download this character pack. Select the character you wish to use then copy/paste it onto your canvas, ive chosen the one with him point up. Add your website title and slogan on the left side of the header then add your character underneath it, you may need to chop the poor mans legs off.

image 3

Add a drop shadow to your character to give the header a sense of depth. Leave a gap next to your header title then add your navigation items, i used the colors white and #8e9b08, make the navigation items fairly big, i used the font impact with a size of 30pt.

image 4

On top of one of your navitagion links create a small white box lower the opacity to about 5% then press ctrl+t and rotate slightly. Finally underneath your navigation add some text explaining abit about the website.

image 5

Thats the header all complete. Underneath the header and all the elements add a snazy title for the content thats going to be explained underneath, again the font is impact but ive used a range of sizes for the words.

image 6

Select the rounded rectangle and draw out your content box that will be displayed underneath your snazy title. Add this drop shadow to the box.

image 7

image 8

Follow the steps above and create 2 more boxes underneath your 1st one.

image 9

Add your content to each of the three content boxes. Im just going to add a quick image and some small text, in the CSS version of this layout the boxes will be used for text.

image 10

The images used in the content boxes are not created by me they are actually wallpapers. Repeat the steps above and create small boxes on the right for your sidebar.

image 11

The 1st box im going to use as my rss stuff. If you look in the image above i have added a faint rss icon onto the background of the content box. Im also going to add a nice big header and some RSS icons.

image 12

In the character pack we downloaded in the start of the tutorial there was a man waving, place the man behind the 1st content box, press ctrl+t to rotate him slightly.

image 13

Continue creating your sidebar boxes. Heres mine.

image 14

image 15

Next for the footer, duplicate your header, header title and header navigation. Drag them to the bottom of your canvas, underneath your navigation add your copyright text or what ever information you ant to add.

image 16

Thats it all done, heres my finished result.

Creative Design 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 "Creative Design Layout Tutorial"

Captcha