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:

---

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

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

looking good so far&#33;

me and my friend are soon to be making a website, this may come in handy - thanks&#33;

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&#33;
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&#33; 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&#33;&#33;1 muahahahha

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

Go for the PHP. HTML is for noobs&#33; jk jk...

Also, I&#39;m learning PHP so that would be greatly aprecated.

Please do HTML, im a php faliure..

noooo must be php&#33;&#33;&#33; muahahaha. well maybe both :P

Looking good. :)
Btw, you must be swede, Berusadeankan. :D

Så klart =)
I think il do the code in html.. The easiest way and its avible to every one.. Im starting tomorrow then =)

you should do it in both :-( nah its ok i wont force you. . .or will i ::grins evilly and pulls out switchblade:: ::drops switchblade on foot:: ow&#33; dammit that hurt&#33;

thank you man that&#39;s very easy for me to do, thank for the TUT

plzzz do the second part&#33;&#33; i&#39;ve been waitin for this forever&#33;&#33;

hehe, been to lazy, much school work. But il get it up today =)

Rly liked it, i will start makin a website hrhr ;) nice tut

i havent seen the second part. . . ::plays with brass knuckles:: i would really like it if you got it up. . . nah jk dude, take your time, i know how it can be like that :P

im just to lazy... :( should get it up soon. =)

::taps floor:: jk take ure time :)

I got 50 mb for free :D

? 50mb of wha?

its still not up. . . .

::taps fingers::

Im gonna be making a website soon, this will help nice tut.

yea it&#39;ll help, if she gets part 2 up&#33;&#33;&#33;&#33;&#33;

yea c&#39;mon bro - i&#39;m in the dust on slicing/coding&#33;

Nice m8, nothing for me personally but still nice

U r my last-min lifesaver. Oh gosh&#33;&#33;&#33; Holy Smokes&#33;&#33;&#33; Where&#39;ve i been??? I should&#39;ve found this tut EARLIER...say couple of weeks. I jst dunno...and dumb enough that never knew a place like this could be existed. I was, actually i&#39;m desperately needing some helps about this slicing/coding things. Yup, i&#39;m making a website of my own as a part of assessment and it&#39;s due on 6/4/05 and i&#39;m jst an amateur. Hmmm...and i&#39;m still changing changing changing and messing up my designs. :( Not very good signs. I&#39;m so so so looking forward for ur prt 2 tut. I really really really wish u&#39;d post up something (to do with coding, slicing or whatever, u know) soon before my deadline. But well i cant do anything bout that, can i? Take ur times anyway i&#39;m jst so so so desperate like never before. That&#39;s all.

Oh by de way thanx...gratefully, really...

Cry out loud...T_T...T_T...T_T...

Oh&#33; Yeah finally I found a tutorial about this, I been wanting to do it for a long time&#33; :D

Great tut man. My finished product.

http://img.photobucket.com/albums/v4...ughwebpage.jpg

whoa thats great sharjoko&#33; i wanna see part 2 ber&#33;&#33;&#33;&#33;

i might use this idea for a layout, nice and simple

how do you make your font have a reflection
good tutorial

Hi there guys&#33; sorry for not repleying sooner, but my internet chrased.
Some dumb-ass kids had cut the cabel at some constriction site. :/ ..
Well, im just making an new site, where there needs coding. So, il do the second part at the same time i code the other site... Sound&#39;s good? Should get it up today/tomorrow. Bye now, im in a quite of a hurry. :P

sweet&#33; thanx beru&#33; i havent seen you forever&#33; i had given up hope :(

yea i want to see part 2 too

i really need to learn this stuff...

updated now&#33; not compleatly finished tho... but il fix that soon :)