Business Layout

Introduction

Grunge layouts may be all the rage right now, but they aren’t suitable for every kind of website. For this tutorial I’m going to show you how to make a professional, clean business layout. This kind of design is perfect for companies or business related blogs.

Final Image

The final image that we will be creating is shown below:

Step 1

Create a new document (900X900px) and then use your marquee tool to create a thin rectangle near the top of your image. Fill it with a linear gradient ranging from 7EB3DD to 4C8DBF. Then go to the layer’s blending options and apply a 1px inner shadow, and then a drop shadow. You can see the settings for these effects below, as well as a close up of the outcome.

Step 2

Now create some text for your menu. To centralize my text I hold down my text tool and then drag a ‘text box’ from one edge of my image to the other, then I simply select ‘center’ as my text’s alignment and type from there. I use size 12 arial font, and make sure to reduce the letter’s kerning to -50 in the ‘character’ window. Then I create a dark blue rounded rectangle (5px radius) on a layer underneath my text layer. I reduce this shape layer’s opacity until it provides a subtle ‘hover’ effect around my ‘HOME’ menu link. The image below shows a close up of the menu so far.

Step 3

Next I create a new layer set below my menu layer set. I create a new layer and call it ‘main area’. Then a create a large rectangular selection under my menu using the marquee tool. I fill this with a linear gradient ranging from 18639B to 407CAC. The subtle drop shadow applied to the menu earlier now acts to create a nice transition between this area and the menu.

Step 4

Now I create a new document 14X14px. I use my marquee tool to make 1px squares ranging along the top/left of my image (with 1px gaps between each square). Then I go to edit>define pattern and call my pattern ‘grid pattern’. See where I’m going with this yet? In the image below I’ve given my pattern image a black background to allow you to see it easily, as well as showing it in close up obviously.

Step 5

I return to my original document and with my ‘main area’ layer selected go to blending options>pattern overlay. I select my ‘grid pattern’ pattern and reduce it’s opacity to 10%. You can see the outcome of this below:

Step 6

Create a new document (454X454px) and go to view>show>grid. Then using the main grid lines as guides, select your 1px row and 1px column marquee selection tools and create black lines that follow the grid’s layout.
Then use your custom shapes tool to create a red arrow in the top right of your grid. Rotate the arrow by -45 degrees. Then use your lasso selection tool to draw in an extension of your arrow shape that forms a graph line. When doing this be sure to hold ‘alt’ to create selection lines at a perfect 45 degree angle. Fill your selection with red to blend with your arrow.

Step 7

Now flatten your document and paste your graph image back into your original document. Go to image>transform>distort and distort your graph until it fits nicely over your ‘main area’. Use your rectangular marquee selection tool to cut away any parts of the graph that overlap onto your white background. Finally, set this layer’s opacity to 80%.

Step 8

Now duplicate your graph layer and move the duplicate below the original. Use your keyboard cursors move your duplicate 10px down and 10px left, then reduce it’s opacity by 20% (so 80% to 60%). Repeat this step several times, each time reducing the duplicate layer’s opacity by 20%. When you’ve done this merge all of your graph layers (including the original) and cut off the bottom area that overlaps onto your white background.

Step 9

Now create a new layer below your graph layer called ‘path line’. Create a curved path line using your path tool and then with a 1px white paint brush selected right click on your path and click ‘stroke path’. This should stroke your path with a 1px line. Then right click on your path and click ‘delete path’. Duplicate this layer, moving the duplicate line 3px above the original. Repeat this step a few times, and then the further you get away from the original line increase the distance between your lines. After creating a few lines that were 3px apart I began making lines 4px, 5px, 7px, 8px and finally 10px apart. This creates the illusion of shape/perspective. Then merge all of your path line layers together and reduce this merged layer’s opacity to 20%.

Step 10

Now to finish my ‘main area’ I add some text. I use Helvetica as this is always a good choice when going for that extra clean look. It’s amazing what can be achieved with a clean, bold heading with reducing kerning!

Step 11

Next create a new top layer set called ‘left column’. Create a white rounded rectangle over your blue main area, making sure that the bottom of it overlaps into your white background. Then create a small red circle with a subtle inner shadow. Finally create a white arrow at a 45 angle that cuts into your red circle. Add some text as a heading for your left column content:

Step 12

I add some content to my left column. It’s important to keep your color scheme in mind. Obviously bolder/brighter colors should stand out more, and the bulk of content text is given a lesser precedence by using smaller, gray font.

Step 13

Now create a rounded rectangle (5px radius) at the top of your right column. Go to layer blending options and apply the gradient overlay, inner shadow and drop shadow settings shown below to achieve the effect also shown:

Step 14

Then apply some text over your rounded rectangle as a sidebar heading and apply some more text underneath this. All of this sidebar content should have been created within a layer set. Once you’ve done this rather than copying each part of your sidebar content, simply right click on your layer set and click ‘duplicate layer set’, then move it down below your original. I also applied a dotted line dividing left and right columns using the vertical text tool and typing many ‘……….’s.

Step 15

Now create a new top layer set and create a new layer called ‘footer’. Drag a rectangular marquee selection across the bottom of your layout, under your content. Fill your selection with a linear gradient ranging from 5389B4 to 1A639B. Then apply some central copyright text using the textbox technique shown earlier.

Step 16

Now create a new layer set called ‘header’. Copy and paste your graph image into a new layer and resize it so that it fits nicely as a logo. Then duplicate this layer and move the duplicate below the original. Go to the new layer’s blending options and apply a color overlay (9AB7CE). Move the duplicate layer roughly 5px left and 5px down -this creates a nice clean drop shadow effect. Then add some text to finish your logo.

And We’re Done!

To finish things off I add a simple RSS signup form in the top-right of the layout, and also apply a 1px blue line under my graph to give the main area a cleaner edge