Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Photoshop Tutorial to Design a Clean Business Layout

Photoshop Tutorial to Design a Clean Business Layout


Open a new document with the following size: 960 x 900 pixels. For the background color please use: #292929
Select Rectangle Tool, and create a black shape at the top of your layout. I have used this color #111111

Img

Select Line Tool, and create two lines. Both lines should have the weight of 1 pixel

Img

I will create a new layer (press CTRL+SHIFT+ALT+N), and with Brush Tool, and with 300 pixel smooth brush I will make a point on my layout.

Img

Then I will change the blending mode for this layer to Soft Light.

Img

I will select Rounded Rectangle Tool and right under the header I will create three shapes.

Img

For all these three shapes I will add the following layer styles:

Img

Img

This is my result so far.

Img

Under these three shapes I will add another one. It will be the body of our layout. I will use one more time Rounded Rectangle Tool, and for the color I will use #e1e1e1.

Img

On the left side I will create a shape with Pen Tool.

Img

With Rectangle Tool, I will create a new shape, and I will place it like in the following image.

Img

I will select Custom Shape Tool, and with the following shape:

Img

I will place the shape on the right side of the previous shape. For the shape I will use the same color as the big shape #e1e1e1.

Img

I will create other shapes with Rounded Rectangle Tool. I will use the following color: #cacaca

Img

I will provide you the following set of icons. You can apply for a VIP account and you can download this nice set of vector icons.

Img

I will open the eps file in Photoshop, and with Rectangular Marquee Tool, I will select each icon.

Img

I will make sure I will have the layer with icons selected.

Img

If the layer is selected in your layer palette, you can press on CTRL+J (this is the shortcut for layer via cut). This means a new layer with a single icon will be created on top of the previous layer.

Img

Drag this icon over the layout document. To drag the layer from one document to another you need to have both documents visible on your screen. Repeat the steps until you have the following result.

Img

Change the opacity value to 10% for each icon.

Img

This is my result

Img

I will select Horizontal Type Tool, and I will add the text.  For the header I will use the following fonts:

For Grafpedia Company I will use:

Img

For the slogan line I will use: Tahoma, with a size of 11 pt, and the font style to Regular.

Img

On the right side I will add another text for menu. I will use the following settings for my menu buttons.

Img

This is how it looks

Img

Using the same fonts I will add the alone the text over my layout

Img

Click on the following image to see the real size layout

Img

On the top I will add another button

Img

I will rasterize the layer by right clicking on the layer palette

Img

With Rectangular Marquee Tool I will make a selection.

Img

I will hit the Delete Key from my keyboard, and then I will press on CTRL+D to deselect. This is my final result.

Img



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: