Slicing takes a large graphic image and makes it web ready slicing it into multiple images and stitching them back  together into an HTML table (you don't see borders!).

   You start with one .jpg/.gif image and end up with 2 or more. These are renamed with a number and  placed in a constructed table within an HTML document!

   A Very Cool Tool for developing those really amazing pages and establishing yourself as a more than an amateur web developer.

   If this concept seems counterintuitive don't worry. If you want to continue your growth in web development read on.

Slicing an image has many great attributes  such as...

• > a large .jpg file will load faster when it is sliced because browsers can load images on multiple channels.
•  
• > web pages rendered in PhotoShop/CorelDraw/Paint can be used as splash pages with active areas such as navigation bars or animations or text boxes added by cutting out parts of the image (cutting out a cell and replacing it)
• > your sliced image will be constructed in a table as an HTML doc
  > insert GIF text files that look crisp can be added to Photo images

  Since production of a great page layout in Corel or PhotoShop and then slicing it is very time consuming you will probably limit this procedure to Splash Pages (index page) large gifs/jpgs, or for clients with good taste AND lots of money! 

  To perform this slicing action you can use PhotoShop which includes a program called Image Ready which will perform the slicing or use  PhotoPaint image cutting scripts (windows>dockers>scripts>image cutter).

The following tutorial will use Corel PhotoPaint since it is available on our network.

Slicing a GIF or JPG.....

> open PhotoPaint  (in PhotoShop use Image Ready)
> open or import your image ( if it is going to be a page it will most likely be 600 pixels wide at least)
> make a plan for slicing
> turn on Rulers .....View>Rulers
> turn on Guidelines ......View>Guidelines
> open image cutter .... Windows>Dockers>Scripts (don't open yet)

• > if you slice just to speed up download time for a large image then slice into 6 approximately equal sized cells by dragging guidelines from the edge vertically and horizontally
  > if for a Splash Page then make a sketch of how you plan to utilize the cells in your design and then slice as best as possible (you may have to merge cells)

                    Above screenshot shows the process of slicing an image
 

> open image > setup guidelines/rulers > drag on guidelines for slicing > windows > dockers > scripts > drag and drop image cutter script..... presto you will generate an HTML table and a number of image files (.jpg/gif) 
 

KEEP these files in a separate folder to remain organized

Now you can send large images with faster download speed
or
Remove parts of the table to add other static web elements such as text,line art, or dynamic elements animation,
navigation bars, etc.

You are now breaking out of the HTML box!!!!

Check out this very quick rendition

~ References ~

Slicing images by Web Design | PhotoShop  | GraphicsSoft
.