January 5th, 2009 in Photoshop Tutorials by Richard Carpenter
Creative Design Layout Tutorial
11 Votes, Rating: 5
Loading ...
Hi there, in this tutorial il learn you how to create a creative design layout and il be writing a follow up tutorial shortly after expaining step-by-step on how to code it using dreamweaver.
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.
Add this layer style to your rectangle.
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.
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.
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.
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.
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.
Follow the steps above and create 2 more boxes underneath your 1st one.
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.
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.
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.
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.
Continue creating your sidebar boxes. Heres mine.
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.
Thats it all done, heres my finished result.
Look out for the next tutorial “converting this from PSD into a live website”.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
59 Responses to “Creative Design Layout Tutorial”