I'm very new to website design and development and, as an experiment to prove to myself that can do it as much as anything else, I'm currently trying to put together a website which uses graphical buttons with rollover effects on a nav menu, with themed buttons and headers elsewhere on the pages. I'm wondering how people use Inkscape to generate these sorts of images for webpages; what's the process that people go through? I've been working with PNG exports in the main, but what if it's more suitable to use GIF or JPEG instead - it's mighty cumbersome to export images from Inkscape at both the correct resolution and size, and if a small tweak is required then it can turn into a frustrating cycle of trial and error.

How do you guys cope with that and is there an efficient way of working with Inkscape? Tell me about your experiences.

Grid is an excellent aid to get everything pixel perfect, with snapping of course, since you'll want to end up with a nice round number of pixels for every image you intend to export for a website.

Exporting to png is lossless, the only negative thing that can happen is that the size is too big. I use GIMP to save the image in another format if necessary and to reduce the size (there is a Save for web plugin for GIMP).

I'd definitely use grid when making rollover images (where you have all 3 states in one image file).

digital_havoc wrote:I'm wondering how people use Inkscape to generate these sorts of images for webpages; what's the process that people go through? I've been working with PNG exports in the main, but what if it's more suitable to use GIF or JPEG instead - it's mighty cumbersome to export images from Inkscape at both the correct resolution and size, and if a small tweak is required then it can turn into a frustrating cycle of trial and error.

I use Inkscape to generate animated icons, which change to represent state, indicate buttons presses, etc. Here's what I do:

Set all measurements (doc, grids) to pixels (px). Set the page size to final icon dimension.

I set two grids:
The first is a single pixel grid, origin 0,0, usually left blue, always snap nodes to grid
The second is also single pixel, but offset to origin 0.5, 0.5, set red, and with dots instead of lines, always snap nodes to grid.
All strokes set to multiples of a single pixel. Odd numbers (one pixel strokes) draw and snap to the red dots, even numbers to the blue lines. This means your strokes look as crisp as possible on export.

I draw the various icon states in multiple layers, stacked on top of each other, copying and tweaking as I go. Often I've got a base icon with different overlays (animated states) on higher layers. The layer tool is much improved in the development version compared to 0.46.

The icon preview tool can be helpful, but often it doesn't have a rendering of the correct size for me.

When it comes to rendering, because the page size is correct, all I do is select the required layers for a particular animation, and export the whole page for each icon state. In my case, I import them into my application knowing I can simply align and stack the images for an animated icon; essentially the same would apply for layering an animated GIF in the GIMP.

There is no possibility that converting something drawn in Inkscape into a jpeg could be anything other than a mistake...


Looking back at your original posting, it might be that most important advice is to do some preliminary work to get your size/resolution right before you start on the detail.

Thanks for those replies: couple of really useful tips there already. I'm a bit caught because I instinctively reach for Inkscape when it comes to designing graphics of just about any kind, these days, but I find the bitmap export to be a bit quirky; the note about achieving whole numbers of pixels is well received. That's been an issue a couple of times.

I found heathenx's slicing Inkscape images for webpages video tutorial to be of great help, too.

I've recently developed an Inkscape extension to make it much more convenient to align objects to pixels. It eliminates a lot of tedious work for web development or any pixel-perfect digital graphics.

You can find it at http://code.google.com/p/pixelsnap/

I've recently developed an Inkscape extension to make it much more convenient to align objects to pixels. It eliminates a lot of tedious work for web development or any pixel-perfect digital graphics.

Will have to give your extension a try.