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

Design a Clean Business Layout


Create a new document in Photoshop with the following size: 1000 px wide, and 1100 px height.
I will set my foreground color to #1e1e1e, and with Rectangle Tool I will create a shape on the top of this business layout.

Img

I will create a new layer ( press on CTRL+SHIFT+ALT+N )
With Brush Tool I will press one time over this new layer.

Img

I will change the Blending mode for this layer to " Soft light ". You can change the blending mode from the top of your layer palette.
This is my result

Img

I will select both layers in my layer palette, and I will press on CTRL+E ( merge ), then I will go to Filter > noise > Add noise, and I will use the following settings

Img

With Rectangle Tool I will make a navigation bar

Img

I will add the following layer styles

Img

Img

Img

Img

Img

Img

Img

Img

This is my result so far

Img

Under this Navigation bar I will add a shape with Ellipse Tool. Click on the image to see better.

Img

Then I will go to Filter > Blur > Gaussian blur and I will use the following value:

Img

With Horizontal Type Tool I will write some text over my navigation bar

Img

Under the " Blog " word I will create a shape with Rounded Rectangle Tool

Img

For this white shape I will add the following layer styles

Img

Img

Img

This is my result

Img

The next step is to fill this layout with text. please click on the following image t see better my result

Img

I will open the following icons in adobe illustrator: Vector icons

I will select some icons from this set from above, and I will copy them to adobe Photoshop. the process is very simple.

1. Select the icon you want in adobe illustrator.

2. Copy ( CTRL+C )

3. Go to Adobe Photoshop, and paste the icon over the layout ( CTRL+V )

After you repeat these steps you will have the following result

Img

I will select Line Tool, and I will draw some thin lines.

Img

On the bottom of the layout I will add another dark shape , and in the same time I will add also some text with Horizontal Type Tool.
This is my final result. I hope you like it , and if you try to create this simple layout do not forget to leave a comment with your 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: