How To Create Modern Light Business Layout In Photoshop – Tutorial

Today you will be learning how to create a modern business layout with Photoshop. If you’re a member, you can download the PSD Layout for this tutorial at the bottom of the page. With some small modifications you can use this PSD layout for another types of websites: Communication websites, education websites, security websites and a lot of other types. First you need to download the following image. Right click on the following image and choose “Save image as “. This image will be use to create a seamless background.

After you open the image you need to go to Edit > Define pattern. Choose a random name , and then click ok. You can close the small image document, and then open a new document. I will use the PSD file from Ultimate CSS Framework, because i have there a lot of guides , and it will allow me to arrange this layout faster. if you don’t have the Ultimate CSS Framework already you can create a simple document with the following size: 1100 X 1200 pixels.
Select paint Bucket tool, and choose from the drop down menu from the top of your screen, the ” pattern ”
Select the latest pattern you did in my previous step, and click once inside your empty document.

I will turn my guides for a few seconds ( press on CMD + ; ) and with rounded rectangle tool i will draw a simple shape like in the following image.

Here are the layer styles used for the previous shape.

With Rectangle Tool i will create a horizontal menu

Bellow you can see the layer style used for this shape.

The next step is one of the most important step in this tutorial. With pen tool i will draw a simple shape, which looks like the end of a scarf.

Then i will use the same tool to create a shadow.

I will use one more time Pen tool to create a small dark triangle. This last shape is very important because it will transform our layer from 2D into a 3D layout.

This is my result so far.

With Rectangle Tool i will draw another shape. This will be used when you transform your PSD file to HTML

Here are the layer styles used for my previous shape.

Under this menu i will add some text. Please click on the following image to see the real size layout.

Under the text i will add a simple image. You can use here a slide show

Now let’s create a simple logo. I will choose ” Custom shape tool ” and i will choose the following shape ( included by default in Photoshop )

Here are the layer styles used on my previous star shape.

I will fill the star shape with some lines made with Line tool ( 3 px width ), and then with a simple text logo.

I will add some slogans, or piece of text on the right and on the left side of the layout.

On the footer of the PSD i will add some text, some lines and some icons.

When you create the lines please try to place two 1 pixel line like in the following image. Please make sure you use the same colors, because it will look nicer with this indented lines.

Here is my final business/ corporate layout. If you want to download this PSD layout, and all our other resources, please register for an account.

Related:

• How to Create a Gritty Portfolio 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 a 3D Portfolio Layout Design – Tutorial
• How to Create the Ultimate Web Hosting Layout – Tutorial