Loading ...In this tutorial il show you how to create a sleek looking design studio layout.
Create a new document 850×900 pixels, select the color #3e3640 as your forground and #201f20 as your background. Select the gradient tool and drag a linear gradient over your canvas. Apply the noise filter by going to “filter > noise > add noise” enter the setting as in the image below.
Select the rounded rectangle tool and create a rectangle nearly the width of your canvas. Make a selection at the bottom of your rectangle about 50 pixels in height, cut and paste to a new layer. Hide your cutted part of the rectangle for later. You should have something like this.
Add these layer styles to your rectangle to complete the effect.
Move your rectangle to the top of your canvas hiding the top half of it where the rounded edges are.
Unhide your other part of the rectangle and align it up at the bottom of your rectangle.
Add these layer styles to your bottom half of the rectangle.
You should have something like this.
Add your website title, slogan and logo then with the rectangle marquee tool make a selection on your header like in the image below, fill the selection with the color white then lower opacity to 2%.
Do the same with the navigation.
Add your navigation text to your navigation, on one part of the navigation add a hover button.
The layer styles for the hover button are as follows.
I also add a little shine to the hover button like we did to the header and navigation in the previous steps. Using two 1 pixel lines add a divider inbetween each navigation item. Add a layer mask to the divider then drag a reflected gradient over the top to blend in the top and bottom half the divider.
Create a new layer above everything eles in your layers window, with the rounded rectangle tool create a rectangle like the image below.
Add these layer styles to the rectangle.
You should have something like this.
The the steps above and with the same layer styles add another big rectangle underneath the rectangle you just created.
On the 1st rectangle we created add our login and password fields, the icons used in this part are from dryicons.
Once we’ve done that begin to fill in your content box with some content. The icons next to the titles are from the custom shapes libary within photoshop.
The read more buttons are made using the rounded rectangle. Inbetween each bit of text in the above image add a divider the same way we did on the navigation. Once you’ve done that select the rounded rectangle tool again and create a small box for our photo gallery.
Fill the rectangle with the color #e8e8e8 then add a 1 pixel stroke to it using the color #cbc9ca. Repeat this process to add more content to your design.
When your finished you should have something like this.
38 Responses to “Design Studio Layout #2”
Jraider5 GFX Says:
Thanks for the cool tutorial, i like the header and the navigation, its simple and neat.
ColorFul Says:
Thanks for this amazing tutorial
Neil Says:
whats the name of the font you used on the header and navigation?
xphunt3r Says:
This is rocking and great layout…….. Especially navbar… concept is great than tutorial
NickS Says:
cool!
Josh Drake Says:
Awesome! Your web template tutorials are really rocking. Thanks!
Webstudios Says:
Nice! Whats the name of the font?
ADMIN Says:
swatchit
Ian Says:
Totally excellent xD Thanks. It’s inspirational.
Eduardo Says:
Really cool design. I loved it!
psaddict Says:
Added to http://www.psaddict.com
Cai Johnson Says:
Ah, it’s great. The simplicity of it makes it such a wonderfull peace of art. Not everyone has the touch to it.
Congratulations, friend.
Azhar Says:
Waw it’s very very very Good
Thank you For Admin
xebyte Says:
How can I add this noise background to website using CSS? I tried to cut one piece and repeat it but it’s unregular so it won’t work. Any ideas?
Kristine Says:
I used this tutorial for my navigation bar, I think it’s beautiful
but I have problems with the rollover part for dreamweaver without having to chop the bar to pieces
any tips?
ADMIN Says:
@KRISTINE
try using CSS for your rollover
Ben Says:
This is an amazing tut, thanks
Business Card Printing Says:
I love it! Really cool layout, plus I love the purple and the rounded corners. the overall effect is sleek and classy. Great work! Thanks for sharing this tutorial!
Sandeep Says:
really nice layout design….
seoMetuzalem Says:
great tutorial! txs
marius Says:
Great tutorial!
moih60 Says:
thats one is great..great work and the final result looks good
thanx and added to my blog
Jazz Tonna Says:
It has been ripped
http://www.jjtdevelopments.com/
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