Slicing Up A Template!

[h1]Slicing Up A Template[/h1]
OK, so this is my tutorial on how to slice up your template, and then code some of it in Dreamweaver. I’m not gonna show you how to make the template, so you’ll either need to make your own, or buy one. Now bare with me, as I’m sort of a newb to writing tutorials.

So let’s get started! The first thing you are gonna wanna do is open up your template in Photoshop. I’m going to be using this template I made earlier.
http://img523.imageshack.us/img523/9387/0016jc.png

Now we that we have Photoshop open with our template, let’s grab the slice tool(

)! So first we will want to slice out our header, and so what we are trying to accomplish is slice every separate thing up, so when we export it Photoshop will make each one a different image, and have the HTML ready to code! So back to our header, this is what you will want to do, just select the header with the slice tool. And you should end up with some blue and orange lines everywhere, now don’t panic, this is what is supposed to happen.

Now, let’s go onto the side bar. You pretty much do the same thing, except, if you like me have a top part of the nav, and a bottom part, you will want to slice those separately. You should end up with something like this.

Now, you are gonna want to do this for any additional boxes you have, using the same procedure, make sure the the top, body, and bottom of each box is a separate slice. So after slicing up my boxes, I came up with this.

Now you will want to slice up anything else. Like in my example, I should slice up the upper content boxes, the header, the copyright, and the border. After doing all of that, I came up with this. (Note: I had to zoom out a bit to get everything in the shot)

So now that we have everything all sliced up, let’s export this thing. To do that, go up to File > Save For Web. A box should come up, and it may take awhile to load, so be patient. Now, make sure everything is correct, hit cancel and take the Slice Select Tool, and make changes accordingly. Now, once you get everything right, go back to File > Save for Web, and hit output settings and make sure it is set to HTML. If it’s not, put it to HTML and hit OK. Now hit OK again on the Save for Web box, and it’ll ask where you want to save it, I would create a new folder on your Desktop, then put it in there. Make sure the Format is set to HTML and Images! And then hit Save. This part could take awhile depending on your system, so be patient!
Now that you have everything sliced up, you can take it into Dreamweaver to be coded, or you could wait for me to write a tut on it.

My Dreamweaver tut is coming ASAP, till then, happy photoshopping!

EDIT: Ok, I forced myself to take a break from video games to work on the Dreamweaver tut, hopefully have it done by tonight. If it's not up by 8:00 PST tonight (it's when my sister gets of work, and we're opening some presents then), it probably won't be here till Monday. Cause there is some thing my parents decided to do on Sunday. Wink

UPDATE: OK, so I have really been trying on the Dreameaver tutorial, but I've come to a huge bump in the road. I guess I should learn more about Dreamweaver. Sorry about all the empty promises guys. Sad

UPDATE 2:OK, so I've gotten past the rut, so the tut is back on though it might be awhile, cause I'm wanting to make this tut bigger then it was originally gonna be.

Graphic Addicts Forums