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.

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.

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.

image 3

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

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.

image 5

The result.

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.

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.

image 8

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

image 9

image 10

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.

image 12

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

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.

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.

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.

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.

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.

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.

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.

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.

image 21

Then finally add a simple footer to complete the layout.

Business Layout #2



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Business Layout #2"

Captcha