Web design Layout #8

Hello, welcome to another tutorial by the hv-designs team sorry were abit late than usual. In this tutorial il show you to create a web design layout. Lets get started. Create a new document 850×900 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.

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. Heres mine.

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

Add these layer styles to your navigation rectangle.

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

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

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

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

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

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

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

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.

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.

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

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.

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

Inbetween 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.

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 draging them down to the footer. Last but no least add your copyright information.

Heres the end result.

17 thoughts on “Web design Layout #8”

  1. Pingback: psaddict.com
  2. when you say “draw out a rectangle for your navigation using the rectangular marquee tool.”

    do you mean the marquee tool or the rectangul tool? because if i use the rectangular marquee tool it does nothing but select an empty space, but i just want to clarify. thanks

  3. you can use either…. they both do the same thing…. the rectangle marquee tool will draw an empty space, but can then be filled using the pain bucket tool!

    when u use the rectangle tool it opens up more options depending on the settings you have I.E shape layers, path or fill pixel

  4. Thanks for the great tut, learned a few new techniques like the half-rectangle-white-opacity to make reflective surfaces, and make-pattern-add-overlay to use as a cool text background…

  5. how do you cut it nicely so the images aren’t huge? the background image for instance. i know how to do the cutting, i just don’t know what size should the background pattern be for it to look good….

  6. I like the way it is laid out etc. I am a bit confused on how you use an image created in photoshop (like this tutorial) and make it a web site. Is it all done with image mapping? or is there some tool I need to know about to use a something like this?

    Thanks
    Luke

  7. You said ” This next part requires the use of some diagonal lines, to make the lines create a new document with a transparent background 125×125pixels. Copy the image below, then goto “edit > define pattern” save the pattern for later use.” .

    where are this pattern ?

Leave a Reply

Your email address will not be published. Required fields are marked *