23 December 2008

Design Studio Layout

http://www.hv-designs.co.uk/site_images/thumbnails/design_studio2_big.gif

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.

http://www.hv-designs.co.uk/tutorials/design_studio2/step1.gif

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.

http://www.hv-designs.co.uk/tutorials/design_studio2/step2.gif

Add these layer styles to your rectangle to complete the effect.

http://www.hv-designs.co.uk/tutorials/design_studio2/step3.gif

http://www.hv-designs.co.uk/tutorials/design_studio2/step4.gif

Move your rectangle to the top of your canvas hiding the top half of it where the rounded edges are.

http://www.hv-designs.co.uk/tutorials/design_studio2/step5.gif

Unhide your other part of the rectangle and align it up at the bottom of your rectangle.

http://www.hv-designs.co.uk/tutorials/design_studio2/step6.gif

Add these layer styles to your bottom half of the rectangle.

http://www.hv-designs.co.uk/tutorials/design_studio2/step7.gif

http://www.hv-designs.co.uk/tutorials/design_studio2/step8.gif

http://www.hv-designs.co.uk/tutorials/design_studio2/step9.gif

You should have something like this.

http://www.hv-designs.co.uk/tutorials/design_studio2/step10.gif

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%.

http://www.hv-designs.co.uk/tutorials/design_studio2/step11.gif

Do the same with the navigation.

http://www.hv-designs.co.uk/tutorials/design_studio2/step12.gif

Add your navigation text to your navigation, on one part of the navigation add a hover button.

http://www.hv-designs.co.uk/tutorials/design_studio2/step13.gif

The layer styles for the hover button are as follows.

http://www.hv-designs.co.uk/tutorials/design_studio2/step14.gif

http://www.hv-designs.co.uk/tutorials/design_studio2/step15.gif

http://www.hv-designs.co.uk/tutorials/design_studio2/step16.gif

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.

http://www.hv-designs.co.uk/tutorials/design_studio2/step17.gif

Create a new layer above everything eles in your layers window, with the rounded rectangle tool create a rectangle like the image below.

http://www.hv-designs.co.uk/tutorials/design_studio2/step18.gif

Add these layer styles to the rectangle.

http://www.hv-designs.co.uk/tutorials/design_studio2/step19.gif

http://www.hv-designs.co.uk/tutorials/design_studio2/step15.gif

http://www.hv-designs.co.uk/tutorials/design_studio2/step20.gif

You should have something like this.

http://www.hv-designs.co.uk/tutorials/design_studio2/step21.gif

The the steps above and with the same layer styles add another big rectangle underneath the rectangle you just created.

http://www.hv-designs.co.uk/tutorials/design_studio2/step22.gif

On the 1st rectangle we created add our login and password fields, the icons used in this part are from dryicons.

http://www.hv-designs.co.uk/tutorials/design_studio2/step23.gif

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.

http://www.hv-designs.co.uk/tutorials/design_studio2/step24.gif

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.

http://www.hv-designs.co.uk/tutorials/design_studio2/step25.gif

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.

http://www.hv-designs.co.uk/tutorials/design_studio2/step26.gif

When your finished you should have something like this.

http://www.hv-designs.co.uk/tutorials/design_studio2/finished.gif

No comments:

Post a Comment

Follow on Buzz