Finishing the Inkscape Illustration

We now step back from our work to admire it.
But...
The mouse is a patchy and muscular bugger, and we don't want that.
The colours are inconsistent (all different), the skin is too dark
and the small pink areas are incomplete.

Now remove the colour patches that are unncessary, or merge patches together by double clicking on them and stretching the paths until they overlap. Synchronize the colours of the patches by selecting several patches using SHIFT-CLICK and using the "Stroke and Fill" dialogue with the colour sampling pipete tool (bottom of vertical toolbar). Adjust the skin colour using the same dialogue. Finally, create a layer called "pink" and create the pink details such as the nose and foot.

The above corrections take time, but you know how to make these corrections after going through the "dark patches" part.
You could be asking yourself now: "Why did you say to emphasize the mouse's musculature?". Its better to be overly specific (and make a Schwarzenegger mouse) and then remove details, than to make a formless blob. But its your call - perhaps it would have looked cuter if we made the patches more smooth.

A note about synchronizing the patches' colours and reducing the overall number of colours: the less colours we have, the smaller our GIF and JPEG files will be. These web formats use compression, and a repetition of colours can be compressed better.

Adding a Caption

If you'd like to add a caption, you should go to the text tool which is next to the "Stroke and Fill" button (it looks like the letter "A"). A dialog pops up, and you can choose the font and size. Text should be on its own layer.

I did not like the letter spacing of the font. I manipulated the spaces by selecting the text and going to PATH->STROKE TO PATH. This turns the text to a collection of paths that you can tweak. I selected a letter at a time and moved them around.

Exporting the Illustration

To convert this SVG illustration into a GIF of JPEG file, select the entire mouse (without the background picture). Set "Export Area" to "Selection". After you export, you will get a PNG file (another web standard image, which is intended replace JPEG and GIF), convert it to GIF using photoshop. I recommend the Imagemagick Image Suite, a free suite of tools for converting and manipulating images. If you have the latest version of Photoshop, you can save the mouse in its native SVG format and use Photoshop for converting the SVG directly.

Comparing .SVG and .GIF

One of the oft-proclaimed benefits of vector graphics is that their file size is much smaller than "raster graphics" (such as GIF). This is true with vector graphics in PDF and PostScript files, but is it true in this case? The GIF image is 9.44 KB in size, while the SVG image is 39.9KB in size. It appears that SVG will not replace the versatile GIF format anytime soon.

Note: the underlying mouse picture and the gray square were removed from the SVG before it was saved. There is no "dead weight" in the image

Can Your Browser See SVG?

The image on the left is the finished SVG illustration, and the one on the right is the finished GIF illustration. If you see both, then your browser supports the SVG format.

Final Words

If you liked this tutorial (which you just LOVED if you stuck with it up to this
point, unless you are a masochist :-) ), vote for it on the arts forum
from which you found out about it. Or bookmark this page:

I am the creator and owner of the mouse illustration's copyright. I permit the use, distribution and creation of derivative works for commercial or non-commercial purposes from the illustration. It'd be nice if you linked to my site in return.

I permit the distribution of the text of this tutorial, unchanged, for non-commercial or educational purposes only.

Man gets scammed by Ion Labs of Florida