I often found myself in a situation where I had several elements of a web page layout together in one big, multi-layered GIMP image. I can see how those things on a website interact visually and can move them around, change a bit here, change a bit there, etc. But every time I wanted to update my website layout from the big image I had to convert it into a gazillion small images with images consisting of several elements next to each other. I was really suprised that I did not find any plugin which would ease my problems. There where some slicing plugins which made prepared image slices to be displayed in an ugly table based html - no thanks, I'm over that.
So I wrote a small python fu plugin for The GIMP. It saves the layers of a multi-layer image to separate files. The Image to the right shows a simplied example of how the layer names were setup for to save them to the images in the blog layout.
The plugin extracts a file name from every layer name. file names must end on ".gif", ".jpg" or ".png". Layers which refer to the same file are merged before being saved to the file. The file names cannot contain spaces. If no file name is found in a layer, it is ignored.
In the example to the right, the six layers are saved to the images "thought.png", "code.png" and "background.jpg"
Update:
Added another feature which helps to setup target images which consists of several source layer horizontally or vertically spread over the size of the destination image.
The layer names can contain the coordinate of their upper left corner in the destination image. e.g. "foo bar.png [0,64]" which would refer to the destination image "bar.png" and move the upper left corner of the layer to the coordinates x=0, y=64.
I added the source image for this layout as further demonstration. You can load it into the GIMP and use the saveLayer plugin to generate the destination images into a folder of your choice.
Useful Gimp-plugin: Save Layer separately...
I often found myself in a situation where I had several elements of a web page layout together in one big, multi-layered GIMP image. I can see how those things on a website interact visually and can move them around, change a bit here, change a bit there, etc. But every time I wanted to update my website layout from the big image I had to convert it into a gazillion small images with images consisting of several elements next to each other. I was really suprised that I did not find any plugin which would ease my problems. There where some slicing plugins which made prepared image slices to be displayed in an ugly table based html - no thanks, I'm over that.
So I wrote a small python fu plugin for The GIMP. It saves the layers of a multi-layer image to separate files. The Image to the right shows a simplied example of how the layer names were setup for to save them to the images in the blog layout.
The plugin extracts a file name from every layer name. file names must end on ".gif", ".jpg" or ".png". Layers which refer to the same file are merged before being saved to the file. The file names cannot contain spaces. If no file name is found in a layer, it is ignored.
In the example to the right, the six layers are saved to the images "thought.png", "code.png" and "background.jpg"
Update:
Added another feature which helps to setup target images which consists of several source layer horizontally or vertically spread over the size of the destination image.
The layer names can contain the coordinate of their upper left corner in the destination image. e.g. "foo bar.png [0,64]" which would refer to the destination image "bar.png" and move the upper left corner of the layer to the coordinates x=0, y=64.
I added the source image for this layout as further demonstration. You can load it into the GIMP and use the saveLayer plugin to generate the destination images into a folder of your choice.
Plugin Sourcecode | The source image for the layout of this weblog