HV-Designs.co.uk

March 4th, 2010 in Photoshop Tutorials by Richard Carpenter

Business Layout #8

• Share

Hello everybody welcome to another tutorial. In today’s tutorial I’ll be showing you how to make a business layout, the layout will feature a dark theme with hints of red and white. Lets get started.

The Finished Layout

Once you’ve finished the tutorial you should have something like this. Click the image below for full view.

Getting Started

Create a new document size 1200 x 1200 pixels with any color background. Set your foreground color #505050 and background color to #2d2d2d then select the gradient tool. Once the gradient tool is selected change the gradient type to radial.

Drag out the radial gradient roughly just above the middle of the canvas. The radial gradient should be fairly big in size so drag it out long.

Next, select the rectangular marquee tool or the rectangle tool and drag out a rectangle at the top of your canvas about 300 pixels in height. Fill your rectangle with any color.

Label your rectangle layer “header” then add the following layer styles.

You should have something like this.

Creating The Top Bar

Select the pen tool then at the very top of the canvas make an object like the image below.

Once you’ve created the points for your top bar fill it with the color back, you should have something like this.

Complete your top bar by adding the following layer styles.

On the top bar where it gets thicker, add a the word contact with a small white triangle. The triangle can be made using the polygonal lasso tool.

Creating The Navigation And Header

Using the rounded rectangle tool with a radius of 10 pixels, drag out a small button sized rectangle big enough for a navigation link.

Fill the rectangle with any color then merge the layer with your top bar, you should have something like this.

Add your navigation links underneath your top bar using the rounded rectangle as your hover state for one of your links.

Underneath your navigation add your website title and slogan, the font i’ve chosen for my website title and slogan is called “quicksand”. I’ve chosen a red color for my first two letters then a dark gray for the rest.

Creating The Service Box

Before creating the service box, directly underneath the header create two vertical 1 pixel lines, one colored black and one colored white. Once you’ve created the lines set the layers opacity to 40%.

Select the rounded rectangle tool then drag out a rectangle about 250 pixels in height underneath your website title.

Once your happy with your rectangle, add the following layer styles.

You should have something like this.

For this next part you will need some icons, preferably in red. I’ve chosen to use the ruby extended icon pack from dryicons.com.

Use 3 of your desired icons for your service box area, next to each icon add a heading with some dummy text.

In between each heading, icon and paragraph add two 1 pixel vertical lines on next to each other, color one line black and the other one in white. Finally set the blend mode to “Soft Light”.

Finally underneath each paragraph create a small red button using the rounded rectangle tool. Your service box should now look like this.

Creating The Sidebar

On a new layer underneath your service box create two 1 pixel vertical lines next to each other, color one black and one white. Set the layers blend mode to “Soft Light” then move the lines directly level with the last one on the service box.

Select the rectangular marquee tool then make a selection directly next to the sidebar line, make sure the line itself is not included in the selection. The selection doesn’t have to be really wide, just about as wide as you expect a sidebar to me.

Select the gradient tool with a linear gradient, the gradient should be set to black to transparent. Drag the black to transparent over the selection starting from the sidebar lines. Finally set the opacity to 15% you should have something like this.

Add a layer mask to the sidebar line and the black gradient you just added then drag a linear gradient from the bottom of the elements upwards. The look your try to achieve looks something like this.

On the right side of the sidebar line, inside the black gradient part add your sidebar items. I’ve opted for a latest news section, I’ve used one of the icons from the dryicons icon pack next to the header, then I’ve added some dummy news articles separating each one with a simple black line.

Creating The Content Area

Using one of the home icons from the dryicons icon pack, drag it under the left side of the service box. Next to the icon add your welcome heading with a couple of paragraphs of dummy text to follow after.

Select the rectangular marquee tool, underneath your main content paragraph create a rectangle.

Fill your rectangle with the color #1e1e1e then add the following layer styles.

Finally add an example image inside the rectangle leaving a gap of around 10 pixels all the way around the image.

Creating The Footer

Select the rectangular marquee tool then make a selection around the remaining half of your canvas. Fill the selection in the color #1e1e1e then add the following layer styles.

Inside your footer area add your dynamic footer dummy content. I’ve gone for a newsletter subscription form and some social networking text.

That’s it all done.

Congratulations

Thank You for taking this tutorial, hope you found it helpful. Don’t forget to Digg and Re-Tweet this tutorial – Thanks for all your support, il look forward to your comments.

• Share