Loading ...
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 Responses to “Web Design Layout #5”
faye Says:
how can you make the link highlight when your mouse cursor hovers over it? Please tell :(
Skyzx Says:
hmm how do i convert this to a html now??
impresa Says:
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.
Eses Says:
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.
R Shack Says:
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.
maky Says:
very good tutorial
thinks
ADMIN Says:
R SHACK, that way is ok but the code aint ALL THAT if you no what i mean
Dan Says:
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
mark Says:
Nice design. Nice tutorial. Thanks. :)
vladimire Says:
nice tutorial..
for the hover link, you need to di it in CSS after slicinf your template and saving it for web..
Theeban Says:
nice
Computer jobs Says:
Very good information :) I see there are realy useful tips. I am going to use some
Abdullaah Says:
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
danushka Says:
it’s very nice..these tutorials are useful…thanks!!
Theo Says:
WOW!!
ahamed Says:
nice..n cool design…
desing pro ® Says:
very nice web templan !!! :)
louis Says:
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
ADMIN Says:
make sure ur rounded rectangle is not a shape layer
amin3d Says:
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.
alfares050 Says:
very nice web templat
Leave a Reply
search
Learn more about advertising with us.
write for us
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
Learn more about advertising with us.
Recent Comments
copyright
The effects and techniques demonstrated in tutorials on hv-designs.co.uk can be used in whatever manner you wish without attribution. The text, images and tutorials themselves are all copyright © hv-designs.
usage
You cannot copy whole tutorials, either in English or translated to another language unless permission is given by the tutorial author.
friends online