Website Layout Tutorial.

[Craze]

I made this tutorial to make my website. http://hostultra.com/~rshotd

1. Make a new doc. About Screen size. ( to find that out just open ps. and press the prt Scr sys rq button next to the f12 button on your keyboard) and go to file> new> and then you should see that the sizes are about 1024x somthing.

2. Make your gradient settings so there is white grey white grey white.
which should give this:



Then Make a new layer. And select your rectangular marquee tool.
3.Now make a selection like this.


4. Do the same as 3. but make the selection on the other side.


5. Now select your gradient tool.

Make a gradient inside the marqueed selection.



And when done go to Edit> Stroke. And give it a 1 px black border.
Like so.



6. Do same as 5 but on the other side.



7. Now you have the layout.

8. Now make a selection at the top for the banner.


And with that selection your gonna have to make a Banner. You can do that yourself.

Micro Buttons.

1. Start off with a 75px by 15px image and set the foreground with #EEEEEE and the background color to #CCCCCC. Using the Linear Gradient Tool, fill the document.

2.Now make a new layer and set the foreground color to #FFFFFF. Press Ctrl+A. Now go to Edit>Stroke and and set the Location: Inside; Width:1px; and click ok.
Step Four

4.Now set the foreground color to #999999 and press Ctrl+A. Go to Edit>Stroke for the final touch up. After adding some text, this what I came up with.



Tutorial From www.invano.com It is copyrighted.

And there you go.

If you want to know how to make pixel content boxes, Check out www.invano.com like i said before. Hope this helps.

[cunning]

-dances- I have been looking for a good layout tutorial

Peace!