Splitting images

Ignite uses a fully built-in system for splitting images, using the same model as HTML tables and allows you to automatically:

Double click to easily add columns and rows.
Join and unjoin cells for colspan and rowspan work.
Drag the split divisions to to where you want them.
Table HTML code is generated automatically by Ignite.
Save all the split images in a single click.
Save individual cells with right click action - even different graphic formats.
Import Photoshop files and split your image along your Photoshop guidelines.
Make changes to your original artwork in your graphic program and reimport it back into the same Ignite file. Then save all of the split images again in just one click!

this image has the split guides already in place

Splitting an image
In the example above you can see an image in the process of being divided up ready for splitting. All the split guides have been added by simply double clicking on the rulers surrounding the image and then dragging the split guide to its final place. The three areas of text at the top of the image are going to be mouseovers. Each one is currently split into two or three pieces and each needs to be made into one whole image.

joining cells is simple

Joining cells
With the two cells that make up 'our clients' selected, right click and the context sensitive menu pops up. Join cells will join the two cells of 'our clients' into one. This is the same process as using colspan in an html table. You can easily join cells together to produce both colspans and rowspans. Of course you can unjoin cells at any time too.

setting cell properties

Cell properties
Edit cell properties in the Cell pane on the Inspector. Name the image slice, add alt text and add a hyperlink. All these things will be added to the HTML that Ignite generates. You can also control whether or not a particular image slice should be saved or not. The Cell pane also lets you split a particular cell (as opposed to splitting the entire image) and join or unjoin cells.

Click the New Output button and set up the type of file you want to use for the split images. This one uses JPEGs.

output view

Create your GIFs or JPEGs
In output view the Inspector gives you JPEG/GIF controls, depending on the type of file you've decided to create. The one above is going to be made up of JPEGs so the Inspector shows the JPEG file pane. The Output file pane lets you control the HTML settings. Set your Link base and Image base. For example, if you always store your images in a directory called 'images' (as we do) you can tell Ignite this in the Image base setting. Ignite will then add 'images/' to all the image tags that it creates. The same applies to your links. Click Save this output to have Ignite generate all your new images.

the HTML for the Nautilus split images

Create the HTML
Click the Show HTML button on the Output file pane to open the HTML window. Ignite can either save a whole HTML file for you or you can click Copy to clipboard to copy the table code to the clipboard and paste it into your HTML editor.

And here is the final cut image in its table