image slicing tutorial

Ok, this tutorial wil be kinda long because I am going to be explaing a few things out in detail. If you have any questioons or would like to submit a problem with my tutorial, Im me on msn messenger at: troy@vurtunetech.com

[color=red][size=18]Slicing :: Intro[/size][/color]
In this part we will be looking at the benifits of slicing and how to do a basic image slice.

Slicing an image is very helpful for making a layout that flows together. It is also faster than than making lots of other images that don't fit right together.

Now lets look at the slice tool:

See that tool that is circled? That is the clice tool. We will be using it often so remember were it is.

Basically, to make a slice, select the slice tiil and use it to select part of an imae that you want saved differently from the rest of the picture. You may have multiple slices im an image.
Yours should look something like mine below:


Now that you know the basics of slicing, it is time to set up photoshop so you can export all the slices.

[color=red][size=18]Setting up Photoshop[/size][/color]

To set up photosho to export all the slices you made, follow these easy steps.
1.) Go to file>save for web
2.) follow this diagram:

so you first select that little blue arow to pull up a menu. Next you select Output settings.
3.)When a box appears like the one below, change the settings to match mine:

Then click ok, and save the file as you wish.

[color=red][size=18]Coding it all together. Dreamweaver.[/size][/color]
This part only applies to those of you who are doing this in dreamweaver. If you are not, scroll down a ways to see a notepad version.

Ok, Make a new file and title it whatever you wan't. Then save it as index.html or .php ot whatever. Now, depending on what type of layout you made, you need tro make tables were the images will fit into.

Another way to do this would be to open the html file that photoshop generated and play around with that untill you get it right. It is kinda hard to give a tutorial on what to do since it will all be different, and I am assuming you have faire knowlege of html. If not, read the very beggining to this tutorial.

[color=red][size=18]Coding in Notepad[/size][/color]
Now since you are using notepad, I will elaborate a little more than I just did for the Dreamweaver users.
open notepad and create a new HTML document and save it as index.html or.php or ect...
Just so you know were I am headed, it might help to check out my site, www.vurtunetech.com This is what I will be showing you how to code.
In the document write the code like this:

Now don't just copy and past my code, it won't work right. As you can see I used a css file to maintain functionality between browsers.
To sum up what I did above:
1.) made a css file
2.) Made 3 tables
4.) added the images to the tables
5.)create a mapped area for the links in the nav bar
6.) add text

Now if any of this confuzed you at all, I want to help. Please IM me on msn an I can help you out even further. If I get enough request I will start writing tutorials daily.

-Troy

there are no visual guides:(

Author	anunknownuser
Submitted on	Feb 16, 2006
Page views	18,042
Favorites	8
Comments	1

image slicing