Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Business Layout #2

Business Layout #2


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

Business Layout #2 image 1

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.

Business Layout #2 image 2

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.

Business Layout #2 image 3

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

Business Layout #2 image 4

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.

Business Layout #2 image 5

The result.

Business Layout #2 image 6

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.

Business Layout #2 image 7

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.

Business Layout #2 image 8

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

Business Layout #2 image 9

Business Layout #2 image 10

Business Layout #2 image 11

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.

Business Layout #2 image 12

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

Business Layout #2 image 13

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.

Business Layout #2 image 14

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.

Business Layout #2 image 15

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.

Business Layout #2 image 16

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.

Business Layout #2 image 17

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.

Business Layout #2 image 18

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.

Business Layout #2 image 19

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.

Business Layout #2 image 20

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.

Business Layout #2 image 21

Then finally add a simple footer to complete the layout.

Business Layout #2 Tutorial: Final Result



Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Business Layout #2"

Only registered users can write comment

Reader's comments