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

Web Design Layout #8


Lets get started. Create a new document 850x900 pixels with a black background, on the background layer we need to add some noise so goto "filter > noise > add noise". Use the settings in the image below.

image 1

In the top left hand corner add your website title and slogan, on the right side add some RSS information, the icons i have used are from dryicons.com and the color code for the orange is #f1a904. Here's mine.

image 2

Underneath your title and RSS information draw out a rectangle for your navigation using the rectangular marquee tool.

image 3

Add these layer styles to your navigation rectangle.

image 4

image 5

image 6

Set the navigation bars layer opacity to 30%. Your navigation bar should now look like this.

image 7

Create a new layer above your navigation layer, with the rectangular marquee tool make a selection like this.

image 8

Fill the selection with the color white then set layer opacity to 5%. Now add your navigation text.

image 9

In between each navigation link add a divider. Use two 1pixel lines next to each other using two different colors.

image 10

You navigation should now be complete and look something like this.

image 11

Next find an image that you find worthy enough to make it onto your first page for our little gallery. I'm using one of my tutorial results. Place it underneath the navigation bar and add this layer style.

image 12

image 13

On the side of your featured image add a small white box with the opacity of 13%.

image 14

Inside the white box add some small thumbnails of past work that you may have done, space them out evenly, in the small space left over at the bottom add next and previous arrows, the icons are from dryicons.com.

image 15

This next part requires the use of some diagonal lines, to make the lines create a new document with a transparent background 125x125pixels. Copy the image below, then goto "edit > define pattern" save the pattern for later use.

image 16

Create a small white rectangle underneath your featured image set layer opacity to 5%.

image 17

Keep the selection active, make a new layer then fill the section with your pattern. Add a white overlay to your pattern layer and also lower opacity to 5%. You should have this effect.

image 18

Add a title inside your white box where the pattern is, then underneath add some info, do the same next to it.

image 19

In between the two paragraphs add a divider using the same technique as we did in the navigation. In the last bit of space left on the canvas we'll add our footer, create a white rectangle with the opacity of 5% and with a 3 pixel black stroke.

image 20

Inside the footer on the left side add a few links to some sites, on the right hand side add your website title and slogan. Do this by duplicating them and dragging them down to the footer. Last but no least add your copyright information.

image 21

Here's the end result.

Web Design Layout #8



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 #8"

Captcha