Web Design Layout #5

Create a new document 800×800 pixels with a white background, unlock your background layer and add this gradient overlay.

You should have something like this.

Select the rectangle marquee tool and create two 1 pixel lines.

Stretch the lines across the width the the canvas.

Create a rectangle using the rounded rectangle tool. Add these layer styles. Place above your line that you created in the previous step, Select the rectangle marquee tool and cut off the bottom corners so the bottom half is not rounded. Just make a selection and hit the delete key. Name this layer “navigation”

You should have something similar to this.

Create a new document 4×4 pixels. Select the pencil and draw 4 1 pixel squares like this. Helps if you zoom in to the maxium (1600%).

Make sure the background is transparent, then goto “edit > define pattern” give your pattern a name. Head back over to your layout select your navigation layer whilst holding the CTRL key this will make a selection. Create a new layer above your navigation layer and fill with your pattern. Set layer opacity of the lines to 25% and blending mode to overlay.

Now using the rectangle tool and eclliptical marquee tool create 2 highlights over your navigation.

Add your navigation text and layout title.

Now select the rounded rectangle tool and draw a big rectangle, make sure rectangle is under navigation.

Add these layer styles to your rectangle.

Inside your rectangle create another rectangle.

Add this gradient overlay to your new rectangle.

On the side of your new rectangle and in the middle of your main rectangle. create those two 1 pixel lines that we created in step one.

Now take the time to add some content, i wont go into too much detail at this stage as it is mainly text.

Looking good so far, Now create another rectangle using the rounded rectangle tool underneath your big main rectangle that we previously created.

Add the same layer styles as the main rectangle that we created previously. Take the time to add your own content again.

The arrows in the image above can be found in adobes custom shapes libary. Now duplicated your navigation elements. (x2 shines, actual shape and line pattern) duplicate the layers, flip vertical and place at the bottom of the page. This will be our footer. Add your footer text and your done.

21 thoughts on “Web Design Layout #5”

  1. With alot of difficulty if you dont know html anyway. what i would do is save the whole thing except for the text and search, as one image, and set it as the background. its cheating, but it works.

  2. You must slice it with photoshop (without text)and then save it voor web.

    And in Dreamweaver or Golive you must code it and put text into it.

  3. Take it into ImageReady and make your hotlinks, then create your slices and finally save it for the web. This process will write the page code for you. You don’t have to do anything much.

  4. how do you delete the bottom of the rounded rectangle ?
    i use the rectangular marquee tool ,hit delete and it deletes the whole rounded rectangle 🙁
    sorry im a noob x

  5. hi,thanks for ur great tutorials,i wonder whether or not it is possible to translate these tutorials,i promise to add the source of tutorial even your logo and what ever you want.

Leave a Reply

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