Slice Images For The Web In Gimp

Here's how to slice an image into multiple smaller images for use when designing web graphics. This is useful when preparing small parts of an image to be combined into tables or css stylesheets in your html code.

The key to doing this is placing guidelines on your Gimp image, preferably before you build your web page in Gimp. I've demonstrated slicing using a quick example web page design below.


Screenshot of web page building in Gimp before slicing

Here's a quick example web page built in Gimp. I have placed four guidelines on the image before beginning, and aligned everything to those. Do this by clicking on the ruler to the left or the top of the main image, and drag towards the centre of the image. Then, things should align themselves by snapping to those guidelines. I've added numbers on, just to illustrate what happens to the different slices. Obviously, if this was for a real web page, we'd use 1 pixel width pngs for sections 4, 2, 6 and 8 and use repeat-x or repeat-y for efficiency.

Image transform guillotine screenshot


Next, select Image -> Transform -> Guillotine. This will slice up the original image and create a new image for each area separated by the guidelines. So, for the example above, we get 9 separate images. (Although, we don't need the middle one, as it's just a white square). Each image will still contain all the original layers, so you can merge/save them each as you want.

Finished Example

Ok, a bit of a pointless example, but it illustrates the slicing method. The slices have been put back together using CSS divs.

This example is using 9 divs
Page Updated 30/10/09