Business Layout

Create a new document 900×850, double click your background layer to unlock it, double click your background layer once more and add this layer style.

Select the rounded rectangle with a radius of 10pixels, drag out a small square, fill the square with the color white. Select the polygonal lasso tool and create a small selection on the bottom left corner. Hit the delete key to remove the selection.

Now select the elliptical marquee tool and create a small circle at the bottom of the button. Fill the circle with the color white then click your circle layer whilst holding the ctrl key to load the selection. Now goto “Select > Modify > expand” expand the selection by about 4 pixels. Now select your button layer and hit the delete key.

Add a small arrow in the middle of the circle and you should be left with this.

Merge all your layers together apart from the background layer then move your button to the top left of the canvas, duplicate as many times as need then add this drop shadow.

The result.

The next couple of steps you will need some stock images and a coffee stain brush. Find an image of a pen and a mobile phone, remove the background from them and place them on the side of the navigation bar. Load up your coffee stain brush and also add a coffee stain underneath.

Select the rounded rectangle tool and draw out a small rectangle underneath your phone and pen layer but on top of the coffee stain layer.

Add these layer styles to your rectangle to comeplete the effect.

Duplicate your rounded rectangle, drag the layer underneath your orginal, then rotate it slightly to the right. Add your contact information to the top rectangle, you should have something similar to this.

Add your business titile and logo under your navigation bar in a biggish font, im using the font arial.

This next part requires a coffee cup stock photo this one is from http://stock.d2.hu. Cut the cup from its background and place next to your coffee stain. Select the rectangular marquee tool and create a rectangle like this.

Fill with the color white, then set opacity to 40%. Add a layer mask then drag a linear gradient from the middle of the rectangle towards the right hand side, you should have something similar to this.

Add a short description about your business with the rectangle but leave some space at the bottom for some images that will be adding in a moment. Also place a more information button under your text.

Create 2 pink boxes using the color #d5979a and the rounded rectangle tool, you also need to find some business stock images, the site mentioned above has loads. also add them at the bottom of your rectangle, but be creative with the placement. See image below.

Merge your pink boxes and your stock images together, add a layer mask and drag a linear gradient over the top like we did with our rectangle. Underneath your rectangle add 2 more rounded rectangles big enough for some content, in my case some client testimonals fill with the color #eae9e4 then add a 1 pixel stroke using the color #838274.

Add your content for the two boxes and add a simple read more button. You could also find a happy business man and add that to the side of the box.

Now for the sidebar were going to add a simple search field using a white rectangle and a magnifying glass found on google images or the stock website listed above.

With the text tool add a few business articles, using the rectangle tool add a simple pink rectangle underneath the dates to make them more visable and important.

Then finally add a simple footer to complete the layout.

Posted in: Web-layout/Templates