Loading ...
Create a new document 1200 x 1500, fill your background layer with the color #e9e3c9. Select the rectangular marquee tool and add a big rectangle the width of your canvas at the top. Fill with any color then add these layer styles.
You should have something like this.
Add your website title, slogan and logo to the top of your header, also to the right of your title etc… add a small brief summary about your company.
The layer styles for my title text are.
To make the logo, select the rounded rectangle tool, with a radius of 20pixels. Draw out your rectangle, fill with any color then add these layer styles.
Once you have add your layer styles add your logo in the middle.
Next select the rectangular marquee tool, draw out a smallish rectangle the width of your canvas, again fill with any color. Copy your header title text layer styles to your rectangle, disable the drop shadow. You should have something like this.
Add some navigation text. But color one of them white.
The reason why we left one of them white is because there will be 2nd navigation bar underneath. Create two 1pixel lines next to each other like this.
Your navigation should now look like this.
Select the rectangular marquee tool and make a selection over your white bit of text, make sure the layer is behind the text. Fill with the color #9bcd00. Next make a smaller rectangle across half of the button, fill with the color white, lower the opacity to about 20%. Your button should now have a matching shine.
Using the same method add another navigation underneath, use the same color.
Now add your 2nd naviagtion text. Thats the navigation done, underneath your navigation were going to add 3 featured important posts. Using the same method for creating our site logo add 3 logos for our featured posts.
The icons were made using adobes custom shapes libary. Now add some text to represent each post, also add a divider seperating each one of the posts.
Now select the rectangular marquee tool once more and create a big box for our main content. Fill with the color #a9a282 and add a stroke using the color #7c6c4b.
Inside the big box add a further 4 boxes, which should comprise of our main post content and post content footer.
Format the boxes with text and our thumbnails to look like blog posts.
Continue to add your prefered wordpress items. I wont go into to much detail here as its mainly text and simple boxes.
Finally select the rectangular marquee tool once again and basically mirror the header, copy and paste the title, logo and slogan also add your copyright information.
Finished.
37 Responses to “Design Studio Layout Tutorial”
Raymond Says:
Very nice tutorial!
Ahmad .. Says:
WoW .. Very nice tutorial ..
Waiting 4 more .. ^_^
Tadd Says:
Excellent!
Now .. show us how to cut it and use it in WordPress .. then my next child will be named after you.
Elliot Says:
What font did you use for the navagation?
ADMIN Says:
font in the naviagtion is “arial”
ADMIN Says:
as for coding it up in wordpress, il see what i can do.
shashikant Says:
why dont show how to convert this Design to HTML OR CSS i want it for my website and there are no htl/css tutorials on your site
Karan Says:
Thanks very much for the tutorials ..It is very nice …..
Please show us how to convert it in HTML template and how to make rollovers too..I mean how to make rollovers work….
shravan Says:
bindass yar….
zech Says:
hey this is such a nice layout,are u going to code it in wordpress?i need to know how you code the navigation so that when you mouse over a top menu it displays holizontally below.thanks a nice tutorilal
Fernando Says:
You people need to search google for your design-Coding. Also you should take a course in college if you’re old enough. Easiest way. Because even if you tell the program, “Make HTML for me” half the time you have to edit most of it for it to even work. If that sounds like too much work for you, then you’re in the wrong hobby/job/etc.
luke Says:
yeah i would attend collage but im only 12…=[
ibrahim asad abormela Says:
thank very much iam beganer
Sky - Des Says:
Nice Color and tuts
web design egypt Says:
i love the colours. great work.
Slayden Says:
Thanks, it’s an amazing tutorial!!
Eric Shafer Says:
Tracked back to from here:
http://www.presidiacreative.com/amazing-web-design-tutorials/
shahid.designer Says:
thiss so cool tutorial yyaaar very nice
David Says:
Very nice!
Witch font did you use on the text titles?
Rick Says:
What is the font on the header title? Please?
epulido Says:
Love the header style - had to make it into a LayerStyle - thank you.
Technogati Says:
Really superb header.
Dx Says:
Hi,
Awesome site! you might want to change your footer css behaviour though on mouse over on links as it hides the link from pink to grey. please view this as constructive criticism
Regards,
Dx
Leave a Reply
Trackbacks
search
Learn more about advertising with us.
write for us
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
Learn more about advertising with us.
Recent Comments
copyright
The effects and techniques demonstrated in tutorials on hv-designs.co.uk can be used in whatever manner you wish without attribution. The text, images and tutorials themselves are all copyright © hv-designs.
usage
You cannot copy whole tutorials, either in English or translated to another language unless permission is given by the tutorial author.
friends online