HV-Designs.co.uk

February 28th, 2010 in Photoshop Tutorials by Richard Carpenter

Web Design Layout #14

• Share

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.

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.

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.

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.

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.

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.

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.

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

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

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

You should have something like this.

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.

You should have something like this.

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

On the remaining tabs add the following layer styles.

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

Creating The Featured Area

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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

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

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.

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.

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.

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

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.

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.

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

All Done

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

• Share