HV-Designs.co.uk

February 2nd, 2009 in Photoshop Tutorials by Richard Carpenter

Business Layout #4

• Share

Good afternoon, welcome to another tutorial by the hv-designs team in this tutorial il show you how to create a sleek professional looking business layout, currently the 4th business layout in our tutorial library.

Inspired By janokeselak

The layout were going to create features icons from the dryicons website, the set we will be using you can get here. Right lets get started, create a new document 900×1000 pixels. Fill your background layer with the color #e6e7eb, select the rounded rectangle tool with a radius of 15pixels, draw out a rectangle just short of the width of your canvas about 845pixels wide and about 250pixels in height. Select the colors #3c362c & #23201b then drag a reflected gradient over your rectangle. You should have something like this.

Select your type tool and add your business name and slogan on the left hand side. Add these layer styles for your website title.

Add these layer styles to your slogan text layer.

Your website title and slogan should now look like this.

Next to your website title we want to add a nice sleek divider to seperate the header abit. Using two 1 pixel lines next to each other create your divider, the colors are in the image below.

Choose one of the icons from the dryicons icon set and place on the right side of the header with a some descriptive text and a header. Also in the icon set there are two blue signs one with and question mark and one with a exclamation on, place those two icons outside the header area in the top right hand corner. Add the words about and help next to each icon. Your layout should now looks like this.

Using the rounded rectangle once again draw out a navigation type rectangle underneath your header. Add these layer styles to your navigation bar.

You should have something like this.

On your navigation add your navigation text, inbetween each text item add a divider using the same method as we did for the header, then on one of the text items add a hover button. Quick tip: when writing the text you dont need to write each text item on a different layer, just write it all on one line, will make it easier when editing if needed.

Using the rounded rectangle tool once again create two seperate boxes next to each other under the navigation fill them with the color #dee2e5 then add a 1 pixel stroke using the color #bfc4c7. Inside the boxes choose two seperate icons from the icon set.

Also inside the boxes add some descriptive text, title and learn more text. By the learn more text use one of the green arrow icons within the dryicons icon set.

Underneath the two boxes you just created create another box underneath, make it the same width has the header box. Fill the box with the color white then add a 1 pixel stroke using the color #b2b2b2.

Inside the big box create a smaller box on the right hand side, use the same layer styles & colors as the two individual boxes we made earlier. Inside the big box add some descriptive text, in the box on the right add another icon from the icon set with some more descriptive text. Finally at the very bottom add your footer information.

Thats basically it, nothing too complicated. You can buy this template in CSS and PSD from using the hv-designs shop. The final product should look like this.

Dont forget to subscribe to twitter and our RSS feeds. Many thanks for reading, till next time i bid you farewell.

• Share