Business Layout #8

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.

Business Layout #8 Result

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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

Business Layout #8

Business Layout #8

You should have something like this.

Business Layout #8

Creating The Top Bar

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

Business Layout #8

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

Business Layout #8

Complete your top bar by adding the following layer styles.

Business Layout #8

Business Layout #8

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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

Business Layout #8

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

Business Layout #8

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.

Business Layout #8

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

Business Layout #8

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

Business Layout #8

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

Business Layout #8

Business Layout #8

Business Layout #8

Business Layout #8

You should have something like this.

Business Layout #8

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.

Business Layout #8

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

Business Layout #8

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

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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.

Business Layout #8

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

Business Layout #8

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

Business Layout #8

Business Layout #8

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

Business Layout #8

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.

Business Layout #8

Business Layout #8

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

Business Layout #8

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.