Design Lab Layout

Hello everyone, welcome to another tutorial by the hv-designs team in this tutorial il show you how to create a stylish design lab layout. Create a new document with the dimensions 850×1012, set the colors #0b3349 as your forground and #156894 as your background select the gradient tool with a linear gradient. On your background layer begin to drag the gradient starting from the top to about a quarter of the way down your canvas.

For this next part you need this image. Save the image to your desktop then open it up in photoshop. Drag the image over to your canvas, flip and resize the clouds to fit your canvas. Add a layer mask to your clouds image then drag a linear gradient from the left side of the clouds image, right click your layer mask in your layers window and goto “apply layer mask”. Add another layer mask then drag the linear gradient from the bottom, right click the mask in the layers window then goto “apply layer mask”. Do the same for the right side. The look were going for is this.

Once you have something similar duplicate the clouds layer, then hide which ever clouds layer is on top. The bottom clouds layer we need to blur by about 4 pixels so goto “filter > blur > guassian blur” blur by 4 pixels. Unhide the top clouds layer. Set layer opacity to 80% then set blending mode to luminosity. You should have something like this.

Add your website title and slogan in the top left corner.

The layer styles for the yellow bit of the title are as follows.

The layer styles for the light blue part of the title are exactly the same as above just change the gradient overlay to.

On the right side of your canvas add your navigation box using the rounded rectangle tool.

The layer styles for the navigation are.

Add your text to your navigation.

Leave quite a big gap beneath the clouds and create two white rectangles using your prefered rectangle tool. Fill them with the color #eeeeee. Then add a drop shadow.

Above your biggest content box add a catchy sentance use the same layer styles as your title to make it stand out abit.

In the top bit of your big content box add some content, the icon i used next to the welcome text is from

Underneath your welcome text and welcome content add 3 dividers (see red arrows). To make dividers like the ones below just create two 1 pixels lines on top of each other.

Using the rectangular marquee tool create two rectangles inbetween the dividers, fill the selections with the color white, also make sure you have two individual layers.

Add this gradient overlay to your two rectangles.

You should have something like this.

In your boxes that you just created add some icons and some services you may offer, again these icons are from

In your smaller content box add a sample form including text fields and labels. Above your smaller content box add a rounded rectangle with the wording “free quote” on it. Press CTRL+T to rotate the box and lettering slightly. The layer styles for the rounded rectangle are the same as the yellow text in the title.

Underneath the smaller content box add some more content regarding, services, work etc… Use the divider technique explained earlier to divide each part. Maybe add some more spliffy icons from

Then finally add a simple text footer. All finished.

Dont forget you can now follow us using twitter, keep up date with the latest tutorial releases and articles.

The next tutorial will be how to code this layout into a working layout. Keep your eyes peeled

8 thoughts on “Design Lab Layout”

  1. well the whole idea was to captcha the clouds… if the content was shoved up under the header you wouldnt see hardly any of the clouds….!

    feel free to change lol maybe you should show me how it could look better 🙂

  2. Need the space for the clouds!
    Great work! I am artistically inept, so this helps. can you do one tut for logo designing as well..or do you have one already?

Leave a Reply

Your email address will not be published. Required fields are marked *