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 #3

Business Layout #3


Create a new document 1000x960 pixels with a white background, at the very top of the canvas create a rectangle the width of the canvas and about 80 or so pixels in height, fill with the color #e9eacf. Do the same again but make the rectangle 3 times as big, fill with the color #62c0e6. You should have something like this.

image 1

Using the rectangular marquee tool create a selection as seen in the image below.

image 2

Make sure the rectangle comes level with the 1st color. Fill the selection with any color then add these layer styles.

image 3

Do the same again only create a rectangle on the blue color. Make sure the rectangle is the same height as the blue line and the same width as the rectangle created above.

image 4

Fill the selection with any color then add this layer style.

image 5

You should have some thing like this.

image 6

On the white part of the canvas do the same again, make the rectangle quite big this time, but still keep it the same width as the others. We need to make this one fairly big this time as were going to be blending it in with the white background. Fill the selection with any color.

image 7

Add these layer styles.

image 8

Create a new layer underneath all your boxes, select the rectangular marquee tool and create a selection as tall as you want, but the same width as your other boxes.

image 9

Fill this selection with the color black, then goto "filter > blur > guassian blur" blur by 2pixels, set layer opacity to 35%. Add a layer mask to the layer, using a linear gradient drag from the bottom where your rectangle ends, upwards. This should blend in the drop shadow.

image 10

On the blue rectangle, select the pen tool and create a shape like this.

image 11

Fill the selection with the color white then set layer opacity to 5%.

image 12

Duplicate the layer and shift it upwards abit. When the shape goes over the blue line you may need to cut the top off so you dont see it on the top rectangle.

image 13

Duplicate the shapes twice more, then flip or rotate them to create a look your happy with, heres mine.

image 14

Once you are happy with the look, go ahead and add your website title, slogan and logo. Add these at the top in the 1st rectangle, also add your navigation to the right side.

image 15

Now find yourself an image of a laptop, remove the background from the laptop then stick it into the blue area of the layout on the right.

image 16

Now the laptop could do with having a reflection of itself, just to add a little bit of detail to the whole thing. Duplicate your laptop layer, move the duplicated layer underneath its orginal. DONT flip it just move it downwards untill the bottom half is identical.

image 17

Add a layer mask to the duplicate layer, then add a layer mask. Drag a linear gradient over the bottom of the front of the laptop, once your happy right click your layer mask and goto "apply mask". then do the same for the side of the laptop. Now find yourself some an image of a butterfly, remove the background then add it also to the blue part of the layout.

image 18

On the left side of the blue rectangle add some text about your business.

image 19

The next part in the tutorial is too fill the white content with information about your business, the reason why i havent gone into great detail is because ive only used text and a couple of images and the tools ive used are only the text tool.

image 20

Once you've added your content you should have something like this.

Business Layout #3



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


Like us to: