Create in Photoshop layout for a site in a business style.

In today’s lesson you will learn how to create a stylish business layout in a cool blue theme.
What we will create:

Resources used in this lesson

Abstract wallpaper

Brushes “Clouds”

Elegant social icons

Step 1 – Creating the Background
Create a new document (Ctrl + N) 1200 x 1140px with a white background. Choose a tool Rectangular area “Rectangular Marquee Tool” (M) and make a selection of the upper part of the canvas. Then fill the selection (G) with black # 000000.

After pouring add Gradient overlay “Gradient Overlay”, as shown below.

Next, select the tool again. Rectangular areaRectangular Marquee Tool “(M), only this time select the rectangle two times smaller than the first. Fill the selection (G) with black # 000000. Then go to the menu Filter> Rendering> Blick “Filter> Render> Lens Flare”, place the highlight in the upper left corner of the new rectangle.

After adding a highlight, set the blending mode to Screen “Screen”. You should have something like this:

Select and download brushes with clouds (see the resources for the lesson). Then add clouds to the blue part of the rectangle. Add heavy clouds over the white line to hide the line where the rectangle ends. If you are unable to hide the edges of the rectangle, then you can use a layer mask.

Do not worry that the edge of the edge will be visible in the middle, as it will be closed by the rest of the header.

Step 2 – Creating a Header Area

Choose a tool Rounded Rectangle“Rounded Rectangle Tool” (U) with a radius of about 20px.

Stretch a rectangle, leaving enough space for the title of the site.

Now you need to change the rectangle. To do this, re-select the tool Rounded Rectangle “Rounded Rectangle Tool” (U) and drag out two new rectangles, one at the top and one at the bottom. Make a rectangle at the bottom a little smaller than at the top. To make sure the rectangle fits to the shape layer, hold down the Shift key before drawing two new rectangles.

On two new rectangles you need to cut corners. Choose a tool Pen “Pen Tool” and change the parameter at the top to Subtract the figure area “Subtract From Shape Area”.

Cut the rounded corner at the top and bottom rectangles, just hold down the Shift key to add a contour to the shape, then make a small triangle.

Now that the corners have been trimmed, download and open the blue abstract wallpaper (see the resources for the lesson).
Copy the wallpaper to the clipboard, and then load the selection around the rectangle you just changed. To load the selection, select the shape layer, then go to the menu Selection> Load Selection “Select> Load Selection”. After loading the selection, go to the menu Editing> Paste Special> Paste “Edit> Paste Special> Paste Into”.

Wallpapers must be inserted into a shape with a rectangle and must be able to move and transform inside the rectangle. If everything worked out, now you can hide the old layer with a rectangle. Place the wallpaper so that the pattern is in the upper left corner of the shape, then add the following layer styles:


Inner shadow:


It should get something like this:

Step 3 – Adding Text to the Title Area

At the top of the layout, add a site name over the highlights. I used the Verdana font, and the blue color was chosen from the wallpaper using the tool Pipette “Eye Dropper Tool” (I).

Next, add the text to the right of the title. This is the right place to advertise your company, phone number, if you have one. Then add some text inside the prepared area.

Step 4 – Creating the Navigation
Choose a tool Rounded Rectangle “Rounded Rectangle Tool” (U), create a layer behind the shape with blue wallpaper and draw a rectangle in the upper right part. The rectangle should be evenly aligned with the specified areas.

Then add the following layer styles:

Inner shadow:

Gradient overlay:


Inside the navigation rectangle, add text.

Step 5 – Completing the creation of the header area

Under the title bar, add a small simple button to link. Start with a rectangle and add a referral text from your company.

For the link button, add the following layer styles.


Inner shadow:


You should have something like this:

Finally on the right side of the header area add 4 small circles using the tool Ellipse “Ellipse Tool” (U).

These 4 circles will simulate that a certain slide is being shown, that this is a jQuery slider.

Step 6 – Creating the Content Area

The content area will consist of 3 blocks with content and a small gallery. Start with the background areas, select the tool Rounded Rectangle “Rounded Rectangle Tool” (U)

For each of the 3 rectangles, add the following layer styles.

Inner shadow:

Gradient overlay:


It should be about the following:

Fill the blocks with the content you want. I made a “Welcome”, “Services” and “Some Customer Reviews” box. In the names of each block, use shades of gray and blue, as in the name of the site. This is a good way to use several colors, instead of one dim, usually gray or black.

Step 7 – Creating a Gallery

Create 4 rectangles with the tool Rectangle “Rectangle Tool” (U), fill (G) each rectangle with a gray color # f1f1f1.

Load a selection around the first rectangle. Selection> Load Selection “Layer> Load Selection”, then go to menu Select> Modify> Compress The “Select> Modify> Contract” border select about 5-10 pixels. Copy and paste one of the images in the gallery into a rectangle by going to Editing> Paste Special> Paste “Edit> Paste Special> Paste”.

Repeat these steps for the next 3 rectangles. You should have something like this:

Step 8 – Creating a Footer (Bottom Area)

Duplicate the layer with the shape of the header area, then move the shape to the bottom of the canvas. Go to menu Editing> Transformation> Flip Horizontal “Edit> Transform> Flip Horizontal” to flip the shape horizontally.

Inside the rectangle, in the place of the ledge, download and add some social icons from the collection of elegant social icons (see the resources for the lesson). Inside the rest of the footer, add copyright information.


Thank you for participating in this lesson! Lay out your work.

Like this post? Please share to your friends: