Web Design Layout #5

Posted on April 14th, 2008.

16 Votes, Rating: 3.94

 Loading ...

Learn how to create a web design layout.

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.

Tags: design, layout, web

13 responses so far!

Note: We now use Gravatars here on HV-DESIGNS, they are little icons that appear next to your name on this site and on many others next to your comments. You can get a Free Gravatar account for free and any other site that supports it will show your avatar also!

• 1 faye ~ Apr 17, 2008 at 7:05 am

  how can you make the link highlight when your mouse cursor hovers over it? Please tell

• 2 Skyzx ~ Apr 17, 2008 at 1:14 pm

  hmm how do i convert this to a html now??

• 3 impresa ~ Apr 18, 2008 at 12:22 am

  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.

• 4 Eses ~ Apr 19, 2008 at 11:16 am

  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.

• 5 R Shack ~ Apr 21, 2008 at 6:36 am

  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.

• 6 maky ~ Apr 21, 2008 at 1:47 pm

  very good tutorial
  thinks

• 7 ADMIN ~ Apr 21, 2008 at 4:06 pm

  R SHACK, that way is ok but the code aint ALL THAT if you no what i mean

• 8 Dan ~ Apr 25, 2008 at 9:27 pm

  What I did was make it without text and just stuck it in a folder and coded it. if you need any help, just email me - Dan@fullonbrushes.info

• 9 mark ~ Apr 27, 2008 at 3:54 pm

  Nice design. Nice tutorial. Thanks.

• 10 vladimire ~ May 3, 2008 at 4:40 pm

  nice tutorial..
  for the hover link, you need to di it in CSS after slicinf your template and saving it for web..

• 11 Theeban ~ May 5, 2008 at 12:04 pm

  nice

• 12 Computer jobs ~ May 11, 2008 at 9:07 am

  Very good information I see there are realy useful tips. I am going to use some

• 13 Abdullaah ~ May 17, 2008 at 4:13 am

  Thanks guys for such a great effort
  after your permission i copied it to my forum
  at
  http://rasaael.freeforums.org/topic-t711.html
  if you want me to take it out please tell me here or at my forums
  thanks
  your rights and everybody else’s are protected