November 18th, 2007 in Photoshop Tutorials by Richard Carpenter
Web Design Layout #4 Tutorial
14 Votes, Rating: 4.71
Loading ...
Create a new document 800×800, select the colors #2c2d2e & #47474a (or something similar) and drag a linear gradient over your canvas.
Now create a new layer, using some grunge brushes add some grunge.
Set layer opacity to 50% and blending mode to soft light. Now select your background layer and add some noise by going to “filter > disort > noise”.
Now merge both layers together, and goto “filter > render > lighting effects” use the settings below. (sorry about quality of image)
You should now have something like this.
Now select the rounded rectangle tool and make these 3 set of boxes.
Once you have made the boxes set the all the layers opacity to 40% and add these layer styles.
You should now have something like this.
Add your site title and logo.
Still with the text tool add your navigation text and main text.
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).
Under “welcome to our site” add a small rectangle fill with a dark shade of blue/grey.
Now take abit of time to add a brief description of your website.
Now select the color white and select a grunge brush, add abit of grunge into your header on the right side.
Add your text for your other 2 sections and add a third section at the bottom labeled “featured work”.
Now select a couple of pictures of your choice for your work and recent entry.
Now were going add abit 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.
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.
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.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
58 Responses to “Web Design Layout #4 Tutorial”