Business Layout #6

Good evening everybody, in this tutorial il show you how to create a sleek looking business layout from scratch. Currently the 6th business layout in our database.

Getting Started

Create a new photoshop document 1200 x 1200 pixels with a white background. Were going to use a fairly big canvas, the bigger the better.

Step1

Although our canvas size is 1200 pixels x 1200 pixels our actual layout will only be 850 pixels wide. The layout will be situated in the center of the canvas, and to make sure we don’t go over 850 pixels we’ll use some guides.

Setting Up The Guides

In the menu at the top go to “view > new guide”, do this twice using the settings below.

Step2

Step3

You should have something like this.

Step4

Creating The Header Area

Select the rectangular marquee tool and create a small rectangle about 33 pixels in height spanning the width of the canvas. Fill the rectangle with a dark grey.

Step5

Select the rounded rectangle tool and create a small rectangle, fill the rectangle in the same dark grey color then place the rectangle in the top right corner over your grey bar.

Step6

Merge the top grey bar and the rounded rectangle into one layer then add a gradient overlay using the settings below.

Step7

Using the rectangular marquee tool once more create a rectangle about 184 pixels in height spanning the width of the canvas underneath the top bar. Fill the selection with any color then add a gradient overlay using the settings below.

Step8

You should have something like this.

Step9

Add your website title and slogan to the header area, inside the rounded rectangle in the top bar add a business phone number.

Step10

Creating The Navigation

Using the rounded rectangle tool with a radius of 20px create a rectangle about 60px in height and about 430px in width, place the rectangle level with your website title on the right hand side.

Step11

Fill the selection with any color then add these layer styles.

Step12

Step13

Step14

You should have something like this.

Step15

Now fill in your navigation bar with some dummy links and separators.

Step16

Adding The Bokeh Effect

Create a new document 600 x 600 pixels with a transparent background. Select the elliptical marquee tool and create a circle as big as the canvas, fill the circle with black.

Step17

Once you’ve filled the circle change the fill opacity to 50%.

Step18

Now add a stroke using the settings below.

Step19

Once you’ve added the stroke go to “edit > define brush preset”, save your brush as “bokeh”. Head back over to your layout and select the brush tool, find and select your brush from the brush menu.

Step20

Open up the brush settings window by press F5 or by going to “window > brushes”, once opened add the following settings.

Step21

Step22

Step23

Step24

Randomly drag the brush along the blue header part, once you’ve added a few circles add a white color overlay and lower opacity to 75%. Finally add a guassian blur, blurring the circles by 2 pixels.

Step25

Repeat the process again only this time don’t lower the opacity or blur the circles. You should have something like this.

Step26

Creating The Featured Area

Select the rectangular marquee tool and create a rectangle spanning the width of the canvas with a height of about 257 pixels. Fill the rectangle with any color then add a gradient overlay using the settings below.

Step27

You should have something like this.

Step28

At the top of the featured area miss 1 pixel from the top then add a 1 pixel line spanning the width of the canvas, fill the 1 pixel line in the color #a7c9de.

Step29

Select the rectangular marquee tool and create a rectangle over your featured area, the rectangle should be slightly bigger and only be as wide as 850px. (up to the guides).

Step30

Using the rounded rectangle tool with a radius of 15px – 20px create a vertical rectangle. Place the rectangle on the left side of the blue rectangle.

Step31

Right click the rounded rectangle with the pen tool and go to “make selection”, once the selection has been made hit the delete key. Do this to both the left and right sides, you should have something like this.

Step32

Add a gradient overlay to the blue rectangle using the settings below.

Step33

In each corner of the blue box where the edge is rounded add half a circle in the color #72a8cb. This should give the effect that the rectangle is wrapped around the darker rectangle.

Step34

Complete the featured area by adding in some dummy text and images.

Step35

Creating The Content Area

Directly underneath the featured area make a selection around the rest of the canvas, select the gradient tool with a radial gradient. Set your foreground to #FFFFFF and background to #bee2f8 then drag the radial gradient from the middle of the canvas all the way down to the bottom.

Step36

On the right side of the canvas create a rectangle for your sidebar, on the right corner of the box chop it off using your preferred cutting tool.

Step37

Add these layer styles to your sidebar box.

Step38

Step12

Step13

Step14

Where the corner was cut from the rectangle add a triangle at a 45 degree angle. Add the same layer styles to the triangle as we did for the rectangle. You should have something like this.

Step39

Inside the box add your dummy content, repeat the steps as many times as needed.

Step40

On the left side of the sidebar boxes add some dummy welcome text. Underneath the welcome dummy text add some spiffy icons with some nice headings and paragraphs next to them. The icons i used are from dryicons.com.

Step41

Creating The Footer

Select the rectangular marquee tool and create a small rectangle spanning the width of the canvas. Apply the following layer styles to the footer.

Step27

Step42

Finally add your footer text to the footer.

Step43

The Finished Result

Congratulations you should have something like this.

Step44

Thanks for reading, il look forward to your comments.