HV-Designs.co.uk

November 19th, 2009 in Photoshop Tutorials by Richard Carpenter

Business Layout #7

• Share

Hello, welcome to another layout tutorial from hv-designs. Today il be showing you how to create a sleek looking business layout from scratch using photoshop CS3. The layout features some great colors and overall a professional look.

Lets Get Started! – The Header

Create a new document 1200 x 1200 pixels with a transparent background.

Select the rectangle tool or the rectangular marquee tool, then create a rectangle at the top spanning the width of your canvas. The rectangle should be around 14 – 15 pixels in height. Once you’ve created the rectangle select the paint bucket tool and fill the rectangle with the color #374e5e.

Select the pen tool and begin to jot down a path like the image below. (I’ve added a black background so you can see the path more easier).

Either side of the path that sticks out should be a perfect rectangle. You can achieve this by holding down the shift key on the keyboard when plotting your next anchor point. Once you’ve completed the path right click and go to “fill path”, fill the path with any color. Once filled right click once more and go to delete path.

Once you have something like the image above add these layer styles to your shape.

You should have something like this.

Creating The Navigation

On a layer behind your header create another rectangle about 50 pixels in height which spans the width of your canvas.

When you’ve created your navigation rectangle add these layer styles.

You should have something like this.

Create a new layer above your navigation layer but underneath your header layer, select the rectangular marquee tool then make a selection across half of the navigation.

Fill the selection with the color white (#ffffff) then set the layers opacity to 8%.

Were now going to make a diagonal lines pattern, to do this create a new document 25px x 25px with a transparent background, select the pencil tool with a 1 pixel brush and duplicate the image below.

Once your done duplicating the pattern above go to “edit > define pattern” then label the pattern “lines”. Load a selection around your navigation by clicking the little thumbnail in the layers panel whilst holding down the CTRL key on the keyboard.

Create a new layer directly above your navigation labeled nav pattern. Select the paint bucket tool then at the top change foreground to pattern and select the pattern from the drop down box.

Fill your selection with your pattern then set the layer opacity to 2%, you should now have something like this.

Adding The Navigation And Head Elements

Inside the header where the like flap shape is add your website title and slogan along with your website logo.

On your navigation add some navigation text using the type tool.

Select the rounded rectangle tool with a radius of about 10 – 15 pixels, drag out a rectangle around your first navigation link then set the layer opacity to 25%, you should have something like this.

The Featured Product

Make a selection starting from underneath the navigation, selecting all the rest of the canvas. Fill the selection with the co lour white then add a gradient overlay using the settings below.

Directly underneath the navigation where the navigation’s stroke ends, create a 1 pixel line spanning the width of the canvas.

Were now going to start to add some content, for the main focus of my layout I’m going to use an image of an iphone. Place your image on the left side of your canvas underneath your header and stuff.

Using the elliptical marquee tool, or the circle tool make an oval selection underneath your featured image.

Fill the oval selection with the color black, then using the guassian blur, blur the oval by about 3 pixels. Finish off the shadow by setting the layer opacity to about 34%.

On the right side of the featured image add a sleek title and some example dummy text.

On the main title text add a drop shadow using the settings below. The little arrow icons are from an icon pack by “WooThemes“.

Finally after your dummy text create a little read more button. The button was made using the round rectangle tool, the styles for the button are identical to the navigation’s styles. You should have something like this.

Creating The 3D Sidebar Box

Make a selection underneath your featured area spanning the width of the canvas and the rest of the canvas at the bottom.

Add the following gradient overlay to the content background.

Again just like we did underneath the navigation add the 1 pixel white line spanning the width of the canvas, also this time add a 2nd line above the white line using the color #e0e0e0.

On the right side of the content area create a round rectangle, using the rounded rectangle tool. Chop the top set of rounded corners off using your preferred cutting tool.

Copy and paste your navigation layer styles over to your rectangle, once you’ve copied the layer styles add an additional drop shadow using the settings below.

Create a new layer underneath your rectangle then select the polygonal lasso tool. Make a triangular selection starting from the top corner and ending above the main content line. Fill the polygonal selection with the color #125971.

Load a selection around your rectangle then add the lines pattern we created earlier. Finally fill your rectangle with dummy content.

Adding The Main Content

On the left side of your 3D rectangle start by adding an example title and a couple of paragraphs.

Underneath your paragraph’s add some dummy business images. Load a selection around each image then expand the selection by about 10 pixels, fill the selection with the color white on a new layer underneath the image. Finally add a light gray stroke to the white box behind each image.

This effect adds a nice image border around each image. You should have something like this.

Creating The Footer

For the footer simply duplicate your navigation elements, then drag them down to the bottom of the canvas. Add your footer copyright information to the blank navigation.

The Finished Layout

You should finally end up with something like this.

Thanks for reading, hope you enjoyed this tutorial. Don’t forget to support hv-designs and digg this post. Thanks.