How to Create a Professional Business Web Layout – Tutorial

In this tutorial, I will show you how easy is to create a professional business layout. I will use a consulting web layout as an example. You can use this tutorial to create any type of business web layout, such as a lawyer layout and more. If you’re a member, you can download the PSD Layout at the bottom of the page. The first thing is to create a new document with the following size 1000 width x 1200 height.

Create a new layer ( press on CTRL+SHIFT+ALT+N ), and on this layer i will add a nice photoshop pattern.
If you don’t have nice Photoshop patterns then you can use the following set with 815 Photoshop Patterns

Then i will select Rounded Rectangle Tool, and i will create a similar shape like in the following image.

With the same tool i will draw some vertical shapes. As you can see i have used different colors for each shape.

With Horizontal type tool i will add some number on the bottom of each colored shape.

Then in the middle i will add a gray shape. Later here will add some images.

If i think better let’s add right now a stock photo here

On the left side of this slide show i will create a triangle. You can use Pen tool to create such a shape.

I will add some text, like in the following image. As you can see i have used different sizes for each part of the text. You can also try to change the color for some parts of the text.

On the right side i will add also another text. The easy way is to create the text with Horizontal type tool, and then rotate it to the left.

Under this slideshow i will create four areas with Rounded Rectangle Tool.

Then i will select Line Tool, and i will create some small 1 pixel lines. From this image you can not see very good but there are placed 2 lines. The first line from the top has a gray color, and the bottom one has a white color.

Then i will select some icons from this set: Download 512 vector icons

To add the icons is very simple. open the . ai files or .eps files inside Adobe Illustrator, and then select which icons do you like most with Direct selection Tool. Press on CTRL+C to copy the icon on your clipboard, and then go to Adobe Photoshop, and here place the vector icon over the layout by pressing CTRL+V
After you place the icons on the right spots, you will need to use the following layer style. This layer style is included in one of the biggest pack with layer styles you will find on the internet: Download 16.814 Layer styles

On the bottom of the layout i will create another shape.

Then will add some images, and some text.

My last step is to create a text logo on the top of the website, and then on the right side i will add also a simple horizontal menu. And on the footer i will create a very simple dark footer.

I hope you like this professional business layout.

To download this PSD file together with our other resources (more than 60,000 resources ) you will need to become a member. Simply click on the download link below and you will be able to register.

Related:

• How to Create a Colorful Business Layout – Tutorial
• How to Create a Software Website Layout – Tutorial
• How to Create a Light Grunge Website Layout – Tutorial
• How to Create a Sleek Textured Layout That Stands Out – Tutorial
• How to Create the Ultimate Web Hosting Layout – Tutorial