Create a layout for a business site in Photoshop

In this lesson you will learn how to create a stylish layout for a corporate website.

(click on image to enlarge)

Materials for the lesson:

Let’s start by creating a new document (Ctrl + Shift + N) measuring 960 x 900 pixels. The author uses this value because it considers this layout size to be the most common. Do not forget that you can use in the work of Photoshop Grid (Grid).

Choose a tool Fill (Paint Bucket), color # f5f5f5 and click once inside your document. Then choose a tool Rectangle (Rectangle Tool) and create two shapes.

The author used Gradient (Gradient) from the set. This is one of the largest sets you have ever seen on the Internet, however, it is available from the Grafpedia website for VIP members.
You can use it or add the following Layer styles (layer styles):

Internal glow

Gradient overlay


Note: to access Layer styles (layer styles) you can go to the menu Layer-> Style Layer (Layer-> Layer Styles)

That’s what you should get.

Activate the tool Rounded Rectangle (Rounded Rectangle Tool). Give it a Radius of up to 6 pixels.

Using this tool, create four shapes, as in the image below.

Add the following layer styles. You can use the layer styles (below) for all shapes.
Internal glow:

Gradient overlay:


This is what should happen.

(click on image to enlarge)

For the upper rectangle create a shadow.
To create a shape like in the picture below, you can use the tool Pen (Pen Tool). And now, already from this black figure we will create a shadow.

Next, right-click on this layer in the layers palette, and select Rasterize layer (Rasterize Layer).

Now we activate the tool Eraser (Eraser Tool) and select the brush fingerprint below.

Remove the top of the black shape.

For a realistic effect, lower the value. Opacity (Opacity) up to 20%.

Now create another 2 small bookmark buttons.
Note: To create buttons, use the method previously described in the lesson.

In the next step, we need the following set of pixel arrows. In this set you will find more than 300 pixel arrows. Irreplaceable details when developing websites. Let’s add 2 small arrows to our layout.

Activate the tool Horizontal text (Horizontal Type Tool), and write the desired text on your layout. Fonts used in the lesson Myriad Pro and MS Trebuchet.

(click on image to enlarge)

If desired, add multiple images.
Final result:

(click on image to enlarge)

All the best to you, and success in all your endeavors in the coming year!

Author: Grafpedia

Like this post? Please share to your friends: