Home Photoshop Web Layout Business Layout

Business Layout

Added: Jun 10, 2011 Level: All levels Software: Photoshop

Author: Hv-Designs.co.uk More by this author

Getting Started

Create a new photoshop document 1200 x 1200 pixels with a white background. Were going to use a fairly big canvas, the bigger the better.

Although our canvas size is 1200 pixels x 1200 pixels our actual layout will only be 850 pixels wide. The layout will be situated in the center of the canvas, and to make sure we don't go over 850 pixels we'll use some guides.

Setting Up The Guides

In the menu at the top go to "view - new guide", do this twice using the settings below.

You should have something like this.

Creating The Header Area

Select the rectangular marquee tool and create a small rectangle about 33 pixels in height spanning the width of the canvas. Fill the rectangle with a dark grey.

Select the rounded rectangle tool and create a small rectangle, fill the rectangle in the same dark grey color then place the rectangle in the top right corner over your grey bar.

Merge the top grey bar and the rounded rectangle into one layer then add a gradient overlay using the settings below.

Using the rectangular marquee tool once more create a rectangle about 184 pixels in height spanning the width of the canvas underneath the top bar. Fill the selection with any color then add a gradient overlay using the settings below.

You should have something like this.

Add your website title and slogan to the header area, inside the rounded rectangle in the top bar add a business phone number.

Creating The Navigation

Using the rounded rectangle tool with a radius of 20px create a rectangle about 60px in height and about 430px in width, place the rectangle level with your website title on the right hand side.

Fill the selection with any color then add these layer styles.

You should have something like this.

Now fill in your navigation bar with some dummy links and separators.

Adding The Bokeh Effect

Create a new document 600 x 600 pixels with a transparent background. Select the elliptical marquee tool and create a circle as big as the canvas, fill the circle with black.

Once you've filled the circle change the fill opacity to 50%.

Now add a stroke using the settings below.

Once you've added the stroke go to "edit - define brush preset", save your brush as "bokeh". Head back over to your layout and select the brush tool, find and select your brush from the brush menu.

Open up the brush settings window by press F5 or by going to "window - brushes", once opened add the following settings.

Randomly drag the brush along the blue header part, once you've added a few circles add a white color overlay and lower opacity to 75%. Finally add a guassian blur, blurring the circles by 2 pixels.

Repeat the process again only this time don't lower the opacity or blur the circles. You should have something like this.

Creating The Featured Area

Select the rectangular marquee tool and create a rectangle spanning the width of the canvas with a height of about 257 pixels. Fill the rectangle with any color then add a gradient overlay using the settings below.

You should have something like this.

At the top of the featured area miss 1 pixel from the top then add a 1 pixel line spanning the width of the canvas, fill the 1 pixel line in the color #a7c9de.

Select the rectangular marquee tool and create a rectangle over your featured area, the rectangle should be slightly bigger and only be as wide as 850px. (up to the guides).

Using the rounded rectangle tool with a radius of 15px - 20px create a vertical rectangle. Place the rectangle on the left side of the blue rectangle.

Right click the rounded rectangle with the pen tool and go to "make selection", once the selection has been made hit the delete key. Do this to both the left and right sides, you should have something like this.

Add a gradient overlay to the blue rectangle using the settings below.

In each corner of the blue box where the edge is rounded add half a circle in the color #72a8cb. This should give the effect that the rectangle is wrapped around the darker rectangle.

Complete the featured area by adding in some dummy text and images.

Creating The Content Area

Directly underneath the featured area make a selection around the rest of the canvas, select the gradient tool with a radial gradient. Set your foreground to #FFFFFF and background to #bee2f8 then drag the radial gradient from the middle of the canvas all the way down to the bottom.

On the right side of the canvas create a rectangle for your sidebar, on the right corner of the box chop it off using your preferred cutting tool.

Add these layer styles to your sidebar box.

Where the corner was cut from the rectangle add a triangle at a 45 degree angle. Add the same layer styles to the triangle as we did for the rectangle. You should have something like this.

Inside the box add your dummy content, repeat the steps as many times as needed.

On the left side of the sidebar boxes add some dummy welcome text. Underneath the welcome dummy text add some spiffy icons with some nice headings and paragraphs next to them. The icons i used are from dryicons.com.