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

Web Design Layout #4


Create a new document 800x800, select the colors #2c2d2e & #47474a (or something similar) and drag a linear gradient over your canvas.

image 1

Now create a new layer, using some grunge brushes add some grunge.

image 2

Set layer opacity to 50% and blending mode to soft light. Now select your background layer and add some noise by going to "filter > Distort > noise".

image 3

Now merge both layers together, and goto "filter > render > lighting effects" use the settings below. (sorry about quality of image)

image 4

Now select the rounded rectangle tool and make these 3 set of boxes.

image 5
Click to enlarge

Once you have made the boxes set the all the layers opacity to 40% and add these layer styles.

image 6

image 7

You should now have something like this.

image 8
Click to enlarge

Add your site title and logo.

image 9
Click to enlarge

Still with the text tool add your navigation text and main text.

image 10
Click to enlarge

Now using adobes custom shapes add a selection of small arrows next your navigation text and 2 big small arrows at the very bottom (see picture below).

image 11
Click to enlarge

Under "welcome to our site" add a small rectangle fill with a dark shade of blue/grey.

image 12
Click to enlarge

Now take a bit of time to add a brief description of your website.

Now select the color white and select a grunge brush, add a bit of grunge into your header on the right side.

image 13
Click to enlarge

Add your text for your other 2 sections and add a third section at the bottom labeled "featured work".

image 14
Click to enlarge

Now select a couple of pictures of your choice for your work and recent entry.

image 15
Click to enlarge

Now were going add a bit of shading to our header and navigation, starting with the navigation, select the color white and the rectangle marquee tool. Draw a rectangle across half of the navigation and fill with white.

image 16
Click to enlarge

With your white box layer selected, hold ctrl and click on your navigation, now goto "select > inverse" then hit the delete key on the keyboard. you should be left with this.

image 17
Click to enlarge

Now add a layer mask and select a reflected gradient, drag the gradient over the left side from the middle so both the left side and right side smooth into the box. do the same with the header. you should have something like this.

Web Design Layout #4
Click to enlarge


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 "Web Design Layout #4"

Captcha