Hi and Welcome to my first tutorial, we will create a cool and clean business design in Photoshop, hope you’ll enjoy it and when you do then please spread the word about this amazing and clean design tutorial.

Okay, let’s begin! First of all, this tutorial is made for anyone with intermediate Photoshop skills, you will notice that i’m not using basic explanations and will not explain everything in to the finest detail, when you don’t understand these explanations then i would advice to check some other basic photoshop tutorials first.

Step 1:

We start of with a new document of 1200×1350 pixels with a transparent background.

Set you’re rulers at 120px and 1080px so we will have a working area of 960 pixels wide. We’ll continue with the top navigation, make a new folder and name it Nav, make a new layer inside this folder and name that new layer nav-bg.

Now we select the rectangular marquee tool (M) with a fixed size of 1200 x 60 and click inside your canvas, drag this selection to the top of your canvas and fill it with white (#FFFFFF). When you’ve done that open up the nav-bg layers settings by double clicking on the nav-bg’s layer and apply the following settings.

Dropshadow

Gradient Overlay

When all went well then your top navigation background will look like this, if for some reason it doesn’t look the same then please start over until You’ve got it right.

Now we will move on with the navigation links, select your Horizontal Type Tool (T) and type Home, make sure the type layer is inside your Nav Background folder. Use these setting for the font with the color #4a4a4a, when you don’t see this character box then go to Window -> Character and you will have it.

Continue with the rest of the navigation links until you’ve got  your navigation like this example.

Next on the list is creating the navigation dividers and the hover state of the navigation, to make the dividers we select the rectangular marquee tool (M) with a fixed size of 1 x 60, then zoom in at that selection you’ve just made and fill it with #ffffff, now duplicate that 1 px stroke and fill it with #000000, move it 1 px to the left and merge these two layers, sounds difficult huh?, no worries, it’s really simple just make two 1 px strokes, one white, one black and merge them together.

Now drag your divider between the navigation links and set the Blending Mode to Overlay, continue to do this until you have the same result as in the example below.

Next thing to do is making a hover state of the navigation, create a new layer and place it below the Home type layer, now draw a selection like in the example below and fill it with #ffffff.

Okay, that looks nice and clean. Now let’s move on with the next item, make a new folder and name that folder Logo. Select your Rounded Rectangle Tool (U) with a radius of 4 px and draw a shape like this, you can use any color you like, and you may name that layer logo-background.

Select your logo-background layer, double click on that layer and apply the following settings.

Gradient Overlay

No duplicate that logo background layer once and place below the original background, give it a black color with an opacity of 30%, rasterize this layer and then go to Edit -> Transform -> Warp and pul the left side a little to the left and the right side a little to the right until you’ve got this.

Next thing we do is the logo, I will keep it simple since this is not a logo design tutorial but a web design tutorial. We need a cool font for this, i’ve selected the Museo font from exljbris Font Foundry. Let’s type the words Business theme with the following character set.

And we can give it a little extra by opening that layers settings with the following setting.

Drop Shadow

Okay now the navigation and logo are ready, we are now going to proceed with the header.

Step 2:

Make a new folder and name it Header, place it below your Nav folder and create a new layer in it and name that layer header-bg, select your rectangular marquee tool (M) with a fixed size of 1200 x 300 and place the selection just a few pixels underneath the navigation background and fill it with #FFFFFF, next apply the following layer style settings.

Gradient Overlay

Create a new layer above the header-bg layer and name that one header-shade, select a soft round brush with a large dimension something like 700 px and make your foreground color white, now click somewhere at the bottom of the header and set the blending mode to overlay with a opacity of 70%, after that cut of the part that’s not inside the header.

The result so far

Next things we’re going to create are the slider image, slogan and intro text. Select your Museo font again and type “This is the place for the Slogan” and put it below the logo with the following character setting.

Then ad some lorem ipsum text just below that slogan with these character settings.

Now you will have the same result as i have, if not then please check all settings again.

Next we will create the More Info and Next Buttons, make a new layer (still inside the header folder) and Select your Rounded Rectangle Tool (U) with a radius of 22 px and draw 2 shapes like in the preview below.

Looks a little boring like this, to spice it up we will apply some layer style setting to these button and we will begin the left button, use these layer style settings.

Inner Shadow

Gradient Overlay

Stroke

For the right button use these layer style settings.

Inner Shadow

Gradient overlay

Stroke

Okay, now we have some really cool buttons, all we need to do is ad some nice text on these buttons and we are ready to go.

Next we will create the Image slider background, create a new layer, name it slide-bg and place it inside the Header folder (at the top) and select the rectangular marquee tool (M) with a fixed size of 426 x 270 and click inside your canvas, drag this selection just below the header and fill it with white (#FFFFFF), and apply the following layer style setting.

Drop Shadow

Create another layer, name it slide-bg-shadow and put it just below the slide-bg layer, select your rectangular marquee tool (M), now with a feather of 40px drag a selection like this.

Fill this selection while you select the slide-bg-shadow layer with #000000.

When you’ve done that we keep the slide-bg-shadow layer active and go to Edit->Free Transform and squeeze the selection until you got something like the screen below.

Next select the rectangular marquee tool (M) with a fixed size of 406 x 250, name it slide-image, and click inside your canvas, drag this selection on top of the slide-bg and fill it with white (#FFFFFF).

Now we do is search for some stock images for the slider image, my favorite free stock service is stock.xchng,  I’ve found this image, it’s not that great but it will do for this tutorial. Shrink the image to a proper size and drag it on top of the slide-image layer, now right click on the image layer and select Create Clippingmask.

Step 3

Okay, looks good so far, now that we have finished the top section we will continue with the middle part of the layout. Create a new folder and name it middle-top and place that folder below the Header folder.

Make a new layer and name it top-top-bg and select the rectangular marquee tool (M) with a fixed size of 1200 x 30 px and drag the selection just below the header and fill it with #FFFFFF, now open up the layer style setting and apply these settings.

Drop Shadow

Create a new layer and name it stroke, select your Pencil Tool (B) with a 1px stroke and draw a white line from left to the right of the canvas, the best way to draw this line is with holding Shift, put that white stroke just below the top-top-bg, create another new layer and name that one top-bottom-bg and select the rectangular marquee tool (M) with a fixed size of 1200 x 130 px and drag the selection just below the white stroke and fill it with #FFFFFF, now open up the layer style settings and apply these setting.

Gradient Overlay

Next on the list are the dividers for the item lists, create a new layer and name it divider, draw a 1px vertical white stroke with your Pencil Tool with a height of 100px, now duplicate that divider layer (CTRL-J) and fill that stroke with black, move the black stroke 1px to the right and merge the white and black layer, then set the blending options of the merged layer to Overlay and erase the bottom and top part of the divider with a soft round brush of 150px, now duplicate that divider layer again and place them just like the preview below. To help you out a little i’ve added the rulers to the screen.

Now we’re going to ad the text and icons, create a new folder and name it text, place this folder inside the middle-top folder, now select a nice icon set from Iconfinder, I’ve used the great DRF set from Jonas Rask but you can take whatever set you want as long as they are looking great. Now you need to put the lorem Ipsum text and icons between the dividers like this. I’m not going to show you how to place the text and the icons since this is a really easy step.

Let’s move on with the Read More buttons, again create a new folder and name it buttons, place this folder above the text folder inside the middle-top folder. Select your Rounded Rectangle Tool (U) with a radius of 22 px and draw a shape like in the preview below.

To make these buttons look nice we just need to ad a layer style to these buttons, double click on the buttons layer to open up the layer style settings and apply the following settings.

Inner Shadow

Gradient Overlay

Stroke

Okay, ad the read more text on top of this button and duplicate this button three times, once duplicated put them in the right place, another section finished.

Step 4

Now we’re  going to create the Middle Bottom section, create a new folder for this and name it Middle-Bottom, we are going to ad some nice tabs which can be used for sliding purpose and on the right side we’ll make a nice news section, first we will create the tabs. Create a new folder inside the Middle-Bottom folder and name it Tabs, There are several ways to create tabs and every designer does it differently, i’ve chosen this rather simple and understandable way. Select your Rounded Rectangle Tool (U) with a radius of 14 px and draw a shape like in the preview below.

Right click on this shape’s layer and rasterize it, now duplicate it three times and put them next to each other, once you’ve got them lined up select the rectangular marquee tool (M) with a fixed size of 580 x 130 and click inside your canvas, drag this selection just above the bottom corners of the shapes.

Hit delete and you’ve got tabs, name these tabs left, center and right, now we need to give them some looks, for the left tab ad the following layer style settings.

Gradient Overlay

Stroke

For the center and the right tab we will use the following settings.

Gradient Overlay

Stroke

We need to create a 1px stroke with the color #e8e8e8 and one with the color #ffffff, make them 560 px wide and put the white above the grey, then put both strokes just below the three tabs.

Ad some text on the buttons, some text and nice icons below the tabs and you have something like the sample below.

Okay, next thing on the list is the news section, create a new folder and name it News and put it inside the Middle-Bottom folder, create a new layer inside this News folder and name it news-bg, Select your Rounded Rectangle Tool (U) with a radius of 14 px and draw a shape like in the preview below.

Double click on the news-bg layer to open up your layer style settings and apply the following settings.

Inner Shadow

Gradient Overlay

Stroke with color #e9e9e9

Now ad some text, dividers and some nice arrow icons for sliding purpose and you will have something like the sample below. (arrow icons are from Pinvoke)

Step 5

We are almost there, only thing left is the footer section, again create a new folder and name it footer, inside this footer folder create a new layer and name this one footer-bg, select the rectangular marquee tool (M) with a fixed size of 1200 x 300 and click inside your canvas, drag this selection just below the tabs and news section and fill it with (#FFFFFF).

Now double click on your footer-bg layer and apply the following settings.

Gradient Overlay

Again we need to draw two 1px strokes, one with the color #FFFFFF and one with the color #e8e8e8, put the white below the grey and put them both on top of the footer background.

Remember those dividers we made in the middle top section?, well duplicate them and put them inside the footer like the example.

Put a nice button and some text inside the left footer section, something like testimonials, about me or whatever you like or need, inside the center of the footer put some contact details.

Let’s make a small contact form inside the right section of the footer, create a new folder and name it Form, put some text in that right section, select the rounded rectangular tool (U) and draw 3 shapes like in the example.

Apply the following settings to those three layers.

Inner Shadow

Ad some text like name, email and comment and duplicate the read more button and put it below the comment form (change read more to submit), next ad some copyright info below the footer and voila, we’re ready.

Final Result

I hope you’ll enjoyed this tutorial as much as i did making it, you may download the PSD and use for anything you like as long as you’re not reselling it or put the PSD up for download on you’re own site or any other site.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.