Clean Web Layout

[Berusadeankan]

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


3. Make an small selection close to the top, Press "Delete"


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


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

8. Go Filter > Pixelate > Mezzitint. Type = Long strokes


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


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


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 :


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 :


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 :



3. Then, "slice out" all off your buttons : *Oberserve, im useing just 1 slice for all of my "test" buttons*



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

 <!-- ImageReady Slices (Untitled-1.psd) --> and <!-- End ImageReady Slices --> 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 :

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

With this :

<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&#39;s :

<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 :

 <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&#39;s move on to the code for the buttons&#33;

10. By right clicking on the button&#39;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&#39;s my mom&#39;s birthday.. Il do them later&#33;