Hello. Today I will create another web layout  (template) in Photoshop and this time I will try to create a business template.

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members

Click Here To See The Live Preview (CSS/HTML)

Open Photoshop and create a new document (Ctrl + N), as a background choose #edebe6

Step 1- Creating the logo and search area

First, I will select Rectangle Tool and I will add a black shape on the top of the document then with Type Tool I will add the logo (font used: Tahoma).

O the right side of the logo I will create a search form, that’s why I will select Rectangle Tool and I will create a shape and I will apply this layer styles, then with Type Tool I will write Search:

Having Rectangle Tool selected I will create a small shape in the right side of the shape created on previous step, for this one I will apply this layer styles:

Step 2 – Creating the Navigation and Featured Area

First, select Rectangle Tool and create a green shape, as a color, I have used #aed1c4

With Rectangle Tool create another shape. I have used a red color for demonstration proposes. This shape has the following dimensions:  918 by 62px

Then apply some layer styles:

Next I will add the links. For each of them I have applied this layer styles:

With Pen Tool (P) I will create a small triangle over the Home link and I will apply this layer styles:

Then using Line Tool I will create some separators between links. To create this you will need to set the weight for the line tool to 1px

I will add first a darker line (#8fafa4)

then a whiter one (#aad4c6)

Then I’ll make sure that both of the lines are selected on my layer palette and I will click Ctrl + E (to merge them). I will duplicate this layer several times (to have a separator for each link)

Next using Rectangle Tool I will create another shape. As a color I have used #d6e1c7 and I have applied this layer styles:

To create a nice 3d effect for navigation, using Pen Tool (P) I will create this Grey shape:

I will create another one on the right side, and here is my outcome:

With Type Tool(T) I will add some text

Then from my stock images I will search for a business image. Please note that when you add an image in Photoshop, usually the resolution is pretty high. All you have to do is to resize it, using Free Transform which can be activated by pressing Ctrl + T from your keyboard.

Here is my image

Now I will select Rectangular Marque Tool (M) and I will make this selection over my picture:

I will right click on my picture (having Rectangular Marquee Tool selected) and I will choose Feather

and I will use 50px for Feather Radius.

Next right click again over the selection but this time I will choose Select Inverse

I will set Blending Mode to Luminosity and I will lower the Opacity to 60%

Next I will add a button on Featured Area (at the bottom of the text). To do that I will select Rectangle Tool and I will create a shape then I will add this layer styles:

My output

Now I would like to make this Featured Area more visible. To do that I will select in my layer pallete the main shape used to create Featured Area, and I will apply a Free Transform (Ctrl + T), then I will push this button to go in “Wrap Mode”

When you will be in “Wrap Mode” a grid will show up.

Here select this corner, and with your mouse gently drag it a little bit down

I will do the same for the right side

Once you have finished press ENTER

My result

With Ellipse Tool I will add this shapes:

The final step for Featured Area will be to create some shadows. For That I select Ellipse Tool and I will create this shape

Next I will go to Filter>Blur>Gaussian Blur and I will choose for radius 10px, then I will select Rectangular Marque Tool and I will make this selection

Hit DELETE Button on your keyboard  then press Ctrl + D to unload the selection

Here’s my result:

Next I would like to add a shadow at the bottom of the curved shape. Unfortunately I can’t create a nice shadow using the “standard way”  – ellipse tool, that’s why I will use  the Brush Tool.

All you have to do is to create a new layer on your Layer Palette (Ctrl + Alt + Shift + N) chose a rounded brush, a black color and follow the edge of your shape.

Now apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 12px

My result – a nice and soft shadow.

Step 3 – Creating the Content Area

This one is really easy to create. First with Rectangle Tool I will create this shape:

Then with type tool I will add some text

Content area is finished now.

Step 4 – The Footer

This one, again is quite easy to create because is a replica of the Featured Area. I have used the same techniques used to create Featured Area.

With Type Tool I will add some text and with Rectangle Tool I will create some forms for “Newsletter”. The orange buttons are using the same layer styles like the button from Featured Area. If you have followed me when I have created Featured Area you will be able to create the Footer also.

Click Here To See The Live Preview (CSS/HTML)

Well, the tutorial is finished now. I hope you have managed to create a nice one based on this tutorial.

blog comments powered by Disqus