Illustrated designs - http://www.illustrateddesigns.com
Professional Web Layout for Business Solutions
http://www.illustrateddesigns.com/articles/2751/1/Professional-Web-Layout-for-Business-Solutions/Page1.html
By Art-D !
Published on 02/7/2007
 
Create Professional Web Layout for Business Solutions in Photoshop CS Professional Web Layout for Business Solutions
Make a stylish and clean professional layout for your Business Solutions site.

Professional Web Layout for Business Solutions - part 1
Professional Web Layout for Business Solutions

Make a stylish and clean professional layout for your Business Solutions site.

Create a new file with 766x792 px and 72 dpi. Paint it in this shown color: 6D6D6D.

Create Professional Web Layout for Business Solutions in Photoshop CS

Select now this instrument and represent the lowest layer of the site?s panel, colored in white.

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Drop Shadow

Create Professional Web Layout for Business Solutions in Photoshop CS

Using the previous instrument, it?s possible to represent one more layer, this time for the site?s section.

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Drop Shadow

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 2
Blending Options-Gradient Overlay

Create Professional Web Layout for Business Solutions in Photoshop CS

Gradient?s parameters:

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Stroke

Create Professional Web Layout for Business Solutions in Photoshop CS

Take the same instrument used before and represent the continuation of the already made layer.

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Gradient Overlay

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 3
Gradient?s parameters:

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Stroke

Create Professional Web Layout for Business Solutions in Photoshop CS

Using the same instrument , create now the panel for the menu?s buttons situated on the site?s header.

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Gradient Overlay

Create Professional Web Layout for Business Solutions in Photoshop CS

Gradient?s parameters:

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 4
Blending Options-Stroke

Create Professional Web Layout for Business Solutions in Photoshop CS

Apply the following instrument now to draw a divider between the menu?s buttons. It must be painted in white.

Create Professional Web Layout for Business Solutions in Photoshop CS

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Drop Shadow

Create Professional Web Layout for Business Solutions in Photoshop CS

Make three copies of the recently made layer and place them exactly like in the following picture.

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 5
Insert the buttons? titles now, keeping the demands shown in the table situated below:

Create Professional Web Layout for Business Solutions in Photoshop CS

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Drop Shadow

Create Professional Web Layout for Business Solutions in Photoshop CS

Take now the known instrument already that will help us to create that special window of the searching system. It will have the white color too.

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Stroke

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 6
Select the same instrument and try to represent the button of the searching system that will have the white color too.

Create Professional Web Layout for Business Solutions in Photoshop CS

Introduce now the title for the searching system window:

Create Professional Web Layout for Business Solutions in Photoshop CS

(the window?s title)

Create Professional Web Layout for Business Solutions in Photoshop CS

(the button?s title)

Create Professional Web Layout for Business Solutions in Photoshop CS

Insert the site?s name now:

Create Professional Web Layout for Business Solutions in Photoshop CS

(business solutions)

Professional Web Layout for Business Solutions - part 7
Create Professional Web Layout for Business Solutions in Photoshop CS

(providing best solutions)

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Drop Shadow

Create Professional Web Layout for Business Solutions in Photoshop CS

Make use of another instrument shown here to create the basis for the site?s logotype that will have the color FC9200.

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Stroke

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 8
Select the following instrument to choose from the table inserted here that special clich? shown in this table:

Create Professional Web Layout for Business Solutions in Photoshop CS

Of white color

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Drop Shadow

Create Professional Web Layout for Business Solutions in Photoshop CS

Insert now the photo on the site?s header:

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Inner Shadow

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 9
Take the next tool to represent a shadow stripe on the bottom of the site?s section:

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Gradient Overlay

Create Professional Web Layout for Business Solutions in Photoshop CS

Gradient?s parameters:

Create Professional Web Layout for Business Solutions in Photoshop CS

Take this instrument and draw a continuous line reserved for the title of the site?s section.

Create Professional Web Layout for Business Solutions in Photoshop CS

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 10
Make a copy of the recently made layer and place it the same way it is shown in the next picture.

Create Professional Web Layout for Business Solutions in Photoshop CS

Take next the photo like that one indicated here and place it under the stripes.

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Stroke

Create Professional Web Layout for Business Solutions in Photoshop CS

Insert the titles for the site?s sections:

Create Professional Web Layout for Business Solutions in Photoshop CS

(company, services)

Create Professional Web Layout for Business Solutions in Photoshop CS

(profile, overview)

Professional Web Layout for Business Solutions - part 11
Create Professional Web Layout for Business Solutions in Photoshop CS

Insert also the text in the site?s sections:

Create Professional Web Layout for Business Solutions in Photoshop CS

(the text of the green color)

Create Professional Web Layout for Business Solutions in Photoshop CS

(the rest of the text)

Create Professional Web Layout for Business Solutions in Photoshop CS

Add to this text a little more.

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 12
Create Professional Web Layout for Business Solutions in Photoshop CS

Select the next instrument and represent three triangles colored in 858687.

Create Professional Web Layout for Business Solutions in Photoshop CS

Create Professional Web Layout for Business Solutions in Photoshop CS

Take the following tool again and create this time two parallel stripes

Create Professional Web Layout for Business Solutions in Photoshop CS

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 13
Make a copy of the new made layer and place everything the way it is shown in this picture.

Create Professional Web Layout for Business Solutions in Photoshop CS

Insert the text of the news.

Create Professional Web Layout for Business Solutions in Photoshop CS

(the date)

Create Professional Web Layout for Business Solutions in Photoshop CS

(the text of the yellow color)

Create Professional Web Layout for Business Solutions in Photoshop CS

(the rest of the text)

Create Professional Web Layout for Business Solutions in Photoshop CS

Professional Web Layout for Business Solutions - part 14
Write now the titles of the sections (NEWS&EVENTS, ADRESSES)

Create Professional Web Layout for Business Solutions in Photoshop CS

Create Professional Web Layout for Business Solutions in Photoshop CS

Blending Options-Drop Shadow

Create Professional Web Layout for Business Solutions in Photoshop CS

(Fill the address?s section)

Create Professional Web Layout for Business Solutions in Photoshop CS

(the yellow text)

Create Professional Web Layout for Business Solutions in Photoshop CS

(the white text)

Professional Web Layout for Business Solutions - part 15
Create Professional Web Layout for Business Solutions in Photoshop CS

The final result should be this one!

View full size here.