Web Design Layout #14

Good evening everybody welcome to another tutorial by HV-Designs. In today’s tutorial I’ll be showing you how to create a sleek web design company style web template.

The Final Layout

Once completed you should have something like this.

Finished Layout

Lets Get Started

Start off by creating a new document with the following dimensions “1200 x 1400″, don’t worry if the document seems big as you can crop the canvas when finished.

Select the rectangular marquee tool and make a small selection across the top of the canvas, the selection should be the width of the canvas and no larger than about 10 pixels.

Web Design Layout #14

Once you’ve made the selection fill it using the paint bucket tool with the color #1c5e82. Now add a stroke to the rectangle using the following settings.

Web Design Layout #14

Were now going to create our main header, select the rectangular marquee tool and drag out a selection about 200 pixels in height. Set your foreground color to #133b50 and background color to #0c2635. Select the gradient tool with a reflected gradient.

Web Design Layout #14

Fill your selection with the reflected gradient, start dragging from the middle of the selection and drag outwards towards either the left or right of the canvas. You should be left with something like this.

Web Design Layout #14

Header Elements

Now that our head is all set and ready lets begin to add some of our elements. Start off with the type tool and add your website title and slogan.

Web Design Layout #14

On the right side of the website title and slogan add a small rounded rectangle, using the rounded rectangle tool with a radius of the 15 pixels.

Web Design Layout #14

Once you’ve created your rounded rectangle add the following layer styles.

Web Design Layout #14

Web Design Layout #14

Repeat the process again only this time make the rectangle a lot smaller.

Web Design Layout #14

Once again add the following layer styles to your smaller rectangle.

Web Design Layout #14

Web Design Layout #14

Web Design Layout #14

You should have something like this.

Web Design Layout #14

Creating The Navigation

Using the rounded rectangle tool, create 5 rounded rectangles next too each other. Then using your desired cutting tool cut off the bottom of each rectangle.

Web Design Layout #14

You should have something like this.

Web Design Layout #14

Now add the following layer styles to just your first tab.

Web Design Layout #14

Web Design Layout #14

On the remaining tabs add the following layer styles.

Web Design Layout #14

Web Design Layout #14

Finally label your tabbed navigation using the type tool, you should have something like this.

Web Design Layout #14

Creating The Featured Area

Zoom into your navigation bar then move each button up 3 pixels from the bottom of the header.

Web Design Layout #14

Using the line tool or the rectangular marquee tool create a 1 pixel line across the canvas directly underneath the buttons.

Web Design Layout #14

Next, select the rectangular marquee tool and make a selection the width of the canvas and about 285 pixels in height. Set your foreground color to #31a0c9 and background color to #277ca6, select the gradient tool with a radial gradient. Drag the gradient from the middle of the selection outwards. You should have something like this.

Web Design Layout #14

Inside your featured area add some example featured text with a title. Underneath your featured text add a small green button the same as your search button.

Web Design Layout #14

For this next part you’ll need an icon or image of a imac, you can grab one from HERE. Once you’ve source your desired imac drag it on onto your featured area.

Web Design Layout #14

Duplicate your imac then drag the duplicated layer underneath its original, resize it by going to “edit > transform > free transform” then finally add a subtle blur by going to “filter > blur > guassian blur”. You should have something like this.

Web Design Layout #14

For this next part you will need a twitter style icon, the one i used is from smashing magazine’s practika icon set. Drag your twitter icon onto your canvas, resize with the free transform tool then place the icon onto of the imac monitor.

Web Design Layout #14

Create a little speech bubble next to your twitter bird with the words “follow us on twitter” inside of it. You can use a speech bubble from photoshop’s custom shape’s library.

Web Design Layout #14

Web Design Layout #14

Creating The Content Area

Directly underneath the featured blue rectangle, on a new layer create two 1 pixel lines on top of each other. Color the top line in black and the bottom line in white. Both lines should span the width of the canvas.

Web Design Layout #14

Set your foreground color to #ededee and background color to #ffffff, then select the gradient tool with a linear gradient. Drag the linear gradient from the bottom of the blue featured rectangle down towards the bottom of your canvas. About half way down.

Web Design Layout #14

First this next part your going to need some nice looking icons. My icons of choice are some icons from Woothemes free icon pack. Pick out 3 icons then place them onto your canvas in a line, next to each icon add some dummy text.

Web Design Layout #14

Underneath each icon and its label and some more dummy text.

Web Design Layout #14

Were now going to add some divider in between each item. Firstly create two 1 pixel lines vertically next to each other colored black and white, then set the layer blend mode to “overlay”.

Web Design Layout #14

Add a layer mask to each of the divider layers then drag a linear gradient from the bottom of the divider to about half way up. You want the bottom of the divider to blend in with the background leaving the top visible.

Web Design Layout #14

Creating The Image Gallery

Using another icon from the Woothemes icon pack, create another text heading. Underneath the heading add a small paragraph of dummy text.

Web Design Layout #14

Select the rectangle tool or the rectangular marquee tool and create a white filled rectangle underneath the small paragraph. Once you’ve created the rectangle add a 1 pixel stroke using the color #dedede.

Web Design Layout #14

Load a selection around your rectangle by going to “select > load selection” then contract the selection by 10pixels, “Select > modify > contract”. Paste an image of some kind into the selection by going to “edit > paste into”.

Web Design Layout #14

Duplicate the gallery as many times as needed. From the Woothemes icon pack add the left and right arrows underneath the middle image.

Web Design Layout #14

Creating The Footer

Using the rectangular marquee tool make a big selection around the rest of the canvas, fill the selection using the color #0c2635.

Web Design Layout #14

Select the rectangular marquee tool once more and drag out a selection about 300 pixels in height, leaving a gap of about 10pixels or so from the last rectangle you created. Set your foreground color to #133b50 and background color to #0c2635. Select the gradient tool with a reflected gradient.

Web Design Layout #14

Fill your selection with the reflected gradient, start dragging from the middle of the selection and drag outwards towards either the left or right of the canvas. Finally add a 1 pixel stroke using the color #164662. You should have something like this.

Web Design Layout #14

Towards the bottom of the footer create a horizontal divider using two 1 pixels lines, top one colored in black and the bottom one colored in white. Set the dividers blend mode to “Soft Light”.

Web Design Layout #14

Add a layer mask to the footer divider then drag a reflected gradient from the middle towards one of the edges. The divider should blend in with the background towards the edges.

Web Design Layout #14

Next, select the rectangular marquee once more and make a selection underneath the divider selecting the rest of the footer. Select the color #0c2635 and fill your selection.

Web Design Layout #14

Finally fill up your footer with all the information you need. I’ve opted for a newsletter subscription and some social icons.

Web Design Layout #14

All Done

That’s it you’ve completed the tutorial, thanks for reading. I’ll look forward to your comments.