Slicing Images ~ Tutorial

This Tutorial will show you how I personally slice my images for layouts and such. I'm not sure if this is how most others slice their images, but this works just fine. *Requires Paint*

  « Page 01 »   « Page 02 »

Attributes of New Image File

Set the sizes to 1x1. I learned to do this quickly by hitting 1, tab, 1, enter (or place in 1, 1 and hit OK). As we progress futher I'll give you all the shortcuts to slicing. I've gotten so used to slicing myself, slicing images in Paint has come second nature to me and takes no more than 2 minutes.



Pasting

Paste your image (ctrl+V or right click with the select tool, and hit Paste).

Hit Enter or hit Yes to confirm that you want this file's image size (the 1x1) resized to fit your cut image (the 300h, 100w image we cut a while ago).

Now save (ctrl+S or File > Save) and close the .bmp file.



Now we have our first sliced image... time to proceed with the remaining. Start where you left off (in my case I used 100w, so I left off at 100), and with your select tool select a new area like your last (I had a 300h, 100w last time, so I'll make another one just like this).

If you forgot where you left off its ok because the background color that was left from your cut image should be there.

It will come to the point where you have to add up the past cut image's sizes. Another good reason making the cropped sizes a solid number and having a good color as a background.



Finish slicing all your images, and close your image. When you go to close the main image (which should be all background color by now), you will be prompted if you want to save. I dont recommend saving. In case you did something wrong you'll want this original image to fall back on.



Converting the .bmps

You'll need another program to save your sliced .bmp images to .jpg, .gif, etc format. Your work directory should have files similar to mine on the left. Feel free to delete the .bmp files, but I usually wait until after I place all my .jpg files together (when I'm sure I cropped them correctly).

Putting the images together is entirely up to how you want to do it. I like using tables and adding things with Div Layers, I'll give you an example below...



Image put together using Tables Sample



The HTML used to put together the Sample

<TABLE cellSpacing=0 cellPadding=0 width="500" height="300" align=center border=0> <TBODY> <tr width="500" height="300"> <td width="100" height="300" background="img_01.jpg"></td> <td width="100" height="300" background="img_02.jpg"></td> <td width="100" height="300" background="img_03.jpg"></td> <td width="100" height="300" background="img_04.jpg"></td> <td width="100" height="300" background="img_05.jpg"></td> </tr></TABLE>

  « Page 01 »   « Page 02 »