FireWorks

Image Slicing

  
  If you've been busy creating images for your Website, but they're rather large in file size, take a look at this tutorial. Using Fireworks, this tutorial will show you how to split a large image into smaller chunks and then fit them all nicely together in a page. The term that is used to do this process is image slicing and if you don't know what you're doing, can be a bit tricky when it comes to reassembling your image on a web page. Luckily, this tutorial will show you how to do it with ease. To get the most from this tutorial you will need a copy of Fireworks, a large image that you would like to be sliced and some HTML web creation software (we're using Dreamweaver)

Part 1: the basics
Not only does image slicing allow you to download a larger image faster, you can also change parts of an image without having to completely re-draw the original picture. This is going to save you a lot of time and effort.
When you slice an image in Fireworks, it's best to have an idea of what area you are likely to change at a later date. This is because when you select an area, Fireworks will second guess the rest of the image and create individual slices for the rest of the image.

After an image has been sliced, Fireworks will then create an HTML reference file which contains all the code to put the image back together again on your web page.

Fireworks is aimed at the high-end user, but it is probably the best software on the market for image slicing. You can of course download a trial version of the software from the Macromedia Website (http://www.macromedia.com).

Once you've got Fireworks installed, boot it up and load in the image you want to slice.

The tool you need to use is the 'slice tool' and this is on the left hand toolbar. This is not to be confused with the hot spot tool. To see how the slicing works, click on the 'slice tool'

Using the mouse, drag a square around the first slice of the image

This should be the part of the image you would need to change on a regular basis.

After you release the mouse-button, you will see that the area you selected is now highlighted and Fireworks has second guessed you and split the remaining image based on the location of your selection.

If you want, you can chose more areas on the image and Fireworks will again, create more slices for you. It is also possible to adjust the size of the slice by dragging the sides of the selection. If you make any mistakes, use the undo button.

Part 2: exporting a slice
Once you're happy with the selection, you're ready to export the slices so they can be used in a web page.

From the file menu, select 'export'

Do make sure that you're saving the files into the correct folder. This is because Fireworks creates some HTML code with the correct file locations at the time of when the images were saved. If you move the images out of that directory after they've been exported, you will need to change the HTML code generated by Fireworks as the paths will be wrong.

Make sure that 'use slice objects' is selected Set the HTML style so that is the same as the web creation package you are using Set the file location to the same Click the save button and Fireworks will create all the necessary files

After all the files have been created, you can then go into your web design package and put them all back together again.

Load up your web creation software Open up the folder where you saved your spliced images

The first thing you'll see is all the images have been saved with their own unique location name (column 1, row 2).

Load up the index.htm file Insert a new layer (if you software supports it)

Now, normally, you would insert an image into a layer, but as we are creating an image made up from lots of little bits, we need to do it slightly different.

For the following example we are using Dreamweaver

From the insert menu, select > media > Fireworks HTML In the folder where you saved the spliced image, load in the HTM file that is the same name as the file name of your image Click OK to load the code

You will now see that your image has been put back together again without any join marks.

Topper's tip: export for whole or parts of the sliced image

Part 3: changing the image
As a final thing, you can if you want load up your paint package and individually change each section of the image. All you need to do is load it in and change it. It really is that simple.