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.

Creative Design Layout Tutorial image 1

Add this layer style to your rectangle.

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

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

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

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

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

Creative Design Layout Tutorial image 7

Creative Design Layout Tutorial image 8

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

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

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

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

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

Creative Design Layout Tutorial image 13

Continue creating your sidebar boxes. Heres mine.

Creative Design Layout Tutorial image 14

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

Creative Design Layout Tutorial image 16

Thats it all done, heres my finished result.

Creative Design Layout Tutorial: Final Result



Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Creative Design Layout Tutorial"

Only registered users can write comment

No comments yet...