Clean Web Layout

This tutorials have 2 parts
1. The designing part
2. The coding/slicesing part
If you would encounter any problems when you use this tutorial, please explain it to me. =)
Well, lets get started!

Part 1 - Design
1. Open an new document, 540 * 480

2. Make an selection and fill it whit black
http://www.berusadeankan.sweweb.se/H...torial/1-1.gif

3. Make an small selection close to the top, Press "Delete"
http://www.berusadeankan.sweweb.se/H...torial/1-2.gif

4. Make an other new 540 * 480 document

5. Select the gardinent tool, and at the top, where its says "Mode:", choose Difference

6. Now play around untill you get something like this
http://www.berusadeankan.sweweb.se/H...torial/1-3.gif

7. Go Filter > Blur > Radial Blur. Amount = 100, Blur Method = Zoom, Quality = Best

8. Go Filter > Pixelate > Mezzitint. Type = Long strokes
http://www.berusadeankan.sweweb.se/H...torial/1-4.gif

9. Now repeat Step 7, four times.

10. Press CTRL+J to dublicate the layer. Set the Blend mode for the top layer to "Pin light"

11. Whit the top layer selected go Filter > Distort > Twirl. Angle = 200

12. Merge all layers, CTRL+E. Press CTRL+U, check the Colorize button. Hue = 200, Saturation = 50. Press CRTL+I

13. Now go back to the "Black design" document. Mark the top section.

14. Drag the selection over to the "orange,black,whit" document. Press CTRL+C

15. Again, go back to the "black design" document, now, mark the top selection and press CTRL+V
http://www.berusadeankan.sweweb.se/H...torial/1-5.gif

16. Add some txt or and "glass" efect to the banner, then press CTRL+E

17. Now dubble click the layer. Move on to "Drop Shadow", Just drag down the distance to 0. Do the same whit "innner shadow". Move on to Stroke. Size = 1, Color = #B1B0B0
http://www.berusadeankan.sweweb.se/H...torial/1-6.gif

18. Set your foreground color to "ex. #F0F0F0" and fill the black area.

19. Make an new layer. Set your foreground color to black, and drag an line close to the top :
http://www.berusadeankan.sweweb.se/H...torial/1-7.gif

20. CTRL-click your "design layer", press CTRL+SHIFT+I. Press delete.

Now just add some text. ex Home Productions etc...
This is what iv done so far :
http://www.berusadeankan.sweweb.se/H...al/1-final.gif

Part 2 - Coding/sliceing

// Sliceing

1. Start by selecting the Slice Tool (K)

2. Now, "slice out" the piece where you want your content to be :
http://www.berusadeankan.sweweb.se/H...torial/2-1.gif

3. Then, "slice out" all off your buttons : *Oberserve, im useing just 1 slice for all of my "test" buttons*
http://www.berusadeankan.sweweb.se/H...torial/2-2.gif

4. Now, make slice's on the side of your content slice : *Slice 8 and 10 are the one's iv added*
Pic Here

5. Let's just add an slice on the bottom.

Now we are done whit the slice's! Easy huh? :P

6. Okey, now go File > Save for Web > Save , But dont forget to name it Index !
Pic Here

// Coding

7. Start by replaceing

Code:

 and  with : <center> and </center>

If you want you can add 1
in front of the <center> .

8. Now find your content slice in the code, mine is named "index_09.gif".
Replace this code :

Code:

<TD COLSPAN=3> <IMG SRC="images/index_09.gif" WIDTH=502 HEIGHT=321 ALT=""></TD>

With this :

Code:

<TD COLSPAN=3 background="images/index_09.gif" WIDTH=502 HEIGHT=321></TD>

NOTE : The Width and Height depends on the sice of your content slice.. Mine was w=502 and h=321 , this can be spoted in the code befor you change it "[img]images/index_09.gif[/img]"

9. Now we should do the same thing whit the slices on the side of our content slice. Mine are named : index_08 and index_10.
Replace this two code's :

Code:

<TD COLSPAN=2><IMG SRC="images/index_08.gif" WIDTH=20 HEIGHT=321 ALT=""></TD> * AND * <TD><IMG SRC="images/index_10.gif" WIDTH=18 HEIGHT=321 ALT=""></TD>

With this :

Code:

<TD COLSPAN=2 background="images/index_08.gif" WIDTH=20 HEIGHT=321></TD> *AND * <TD background="images/index_10.gif" WIDTH=18 HEIGHT=321></TD>

Okey, now we are done with the content coding.. Let's move on to the code for the buttons!

10. By right clicking on the button's then select options(i think) while in IE, you can get their names.. EX : index_03.gif ... Do that with all the buttons.

11. I am so sorry, cant do the buttons right now... It's my mom's birthday.. Il do them later!

looking good so far!

me and my friend are soon to be making a website, this may come in handy - thanks!

hehe, please show the site when its done.. =)
More comments please, i like em =)

its gona be a while, we gota buy the domain, work out whose hosting it, design it then well... host it

we got rough ideas in our heads but..

Want an tip? WRITE YOUR IDES DOWN!
If not, its very likley that you will lose them when you think of other ides =P
Btw, the hosting part, if you want i can host it for you..

I am also making a website :P And deep if you want really good cheap hosting go to Globat.com. 5 Gigs for like 5 bucks, plus 75 gigs of bandwith.

thats good! i know most tut makers wanna see that ppl are doing them and i decided to try it out. im gonna make my own site too but im not gonna do stuff like this prolly, im prolly gonna do mainly php based. im teachin meself php right now. oh and dont comment on the text/links i know they suck but i was in a hurry.

http://www.eagleimg.com/up/23730.jpg

Nice, and yeah, those links need some work :P
Think im going to throw up the coding part today. Should it be in php or just plain html?

im learning php so i would appreciate it in php so i could look at it and learn, (i usually learn languages mainly by looking at huge bits of code and figuring out what they do) but html might be nice as well. BOTH!!1 muahahahha

put it in plain html plz...thats wut i read best