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.

Web Design Layout #8 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.

Web Design Layout #8 image 2

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

Web Design Layout #8 image 3

Add these layer styles to your navigation rectangle.

Web Design Layout #8 image 4

Web Design Layout #8 image 5

Web Design Layout #8 image 6

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

Web Design Layout #8 image 7

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

Web Design Layout #8 image 8

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

Web Design Layout #8 image 9

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

Web Design Layout #8 image 10

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

Web Design Layout #8 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.

Web Design Layout #8 image 12

Web Design Layout #8 image 13

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

Web Design Layout #8 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.

Web Design Layout #8 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.

Web Design Layout #8 image 16

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

Web Design Layout #8 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.

Web Design Layout #8 image 18

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

Web Design Layout #8 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.

Web Design Layout #8 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.

Web Design Layout #8 image 21

Here's the end result.

Web Design Layout #8 Tutorial: Final Result



Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Web Design Layout #8"

Only registered users can write comment

No comments yet...