Web Design Tutorial – scripting Gimp

In a previous tutorial we went through some tedious steps to generate 3 images that could be used to create a page shadow. The great thing about the GIMP is that anything you can do with a mouse and keyboard, you can also do via script.

We will generate the following images automatically:

Why script it?

• It allows us to tweak settings and quickly re-generate the image to see the results. For example, we can ask ourselves, “I wonder what it’d look like if the shadow was a bit bluer?”
• We can automatically generate multiple images (including, for example, a image suitable for a CSS sprite).
• We can can adapt and re-use the scripts for different websites. For example, one website might use square angular edges, but another might use rounded corners – so you can adapt to use rounded corners in the background image by changing 1 line of the generation script.
• Mice are evil – why involve a mouse when all we need is a keyboard?

To install the necessary Perl gimp extension in Ubuntu, do:
sudo apt-get install libgimp-perl

Save the following file as /home/yourhome/gimpTesting/drawShadow.pl

#!/usr/local/bin/perl -w

use Gimp ":auto";
use Gimp::Fu;
sub img_uni {
    my ($outPath) = @_;
    $width       = 960;
    $height      = 60;
    $colorWhite  = "#ffffff";
    $colorOfBorder = "#f00000";
    $colorBlack  = "#000000";

    print "Outputting to: \"$outPath\"\n";

    # Create a new RGB image
    $img = gimp_image_new($width, $height, RGB);

    # Create a new layer (with alpha channel)
    $layer = gimp_layer_new($img, $width, $height, RGBA_IMAGE,"Layer1", 100, NORMAL_MODE);

    # Add the layer to the image (-1 means insert above the active layer)
    gimp_image_add_layer($img, $layer, -1);

    # Paint the entire layer transparent
    gimp_drawable_fill($layer, TRANSPARENT_FILL);

    # Select a rectangle inside the image and paint it with black
    gimp_rect_select($img,10, 10, 940, 40,CHANNEL_OP_REPLACE, 0,0);
    gimp_context_set_foreground($colorOfBorder);
    gimp_edit_fill($layer, FOREGROUND_FILL);

    # Shrink the rectangle and paint it with white
    gimp_selection_shrink($img,1);
    gimp_context_set_foreground($colorWhite);
    gimp_edit_fill($layer, FOREGROUND_FILL);

    # Add a drop-shadow of the current selection
    script_fu_drop_shadow($img,$layer,0,0,15,$colorBlack,80,0);

    # Merge visible layers
    $layer = gimp_image_merge_visible_layers($img,0);

    # Output the file as a png image
    file_png_save($img,$layer,"$outPath/pageShadow_vertSprite.png", "$outPath/pageShadow_vertSprite.png",0,9,1,1,0,1,1);

    #
    # Split the image into 3 (top, middle, bottom)
    #

    # Add 2 horizontal guides
    gimp_image_add_hguide($img,20);
    gimp_image_add_hguide($img,40);

    # Guillotine the image into 3
    (@newImageIDs) = plug_in_guillotine($img,$layer);

    # Save each of the guillotined sub-images as pngs (just in case we want them?)
    $layer2 = gimp_image_get_active_layer($newImageIDs[0]);
    file_png_save($newImageIDs[0],$layer2,"$outPath/topShadow.png", "$outPath/topShadow.png",0,9,1,1,0,1,1);

    $layer3 = gimp_image_get_active_layer($newImageIDs[1]);
    file_png_save($newImageIDs[1],$layer3,"$outPath/edgeShadow.png", "$outPath/edgeShadow.png",0,9,1,1,0,1,1);

    $layer4 = gimp_image_get_active_layer($newImageIDs[2]);
    file_png_save($newImageIDs[2],$layer4,"$outPath/bottomShadow.png", "$outPath/bottomShadow.png",0,9,1,1,0,1,1);

    #
    # Create a horizontal Sprite by concatenating the 3 images
    #

    $horzSpriteImg = gimp_image_new($width*3, $height/3, RGB);
    $longLayer = gimp_layer_new($horzSpriteImg, $width*3, $height/3, RGBA_IMAGE,"Layer2", 100, NORMAL_MODE);
    gimp_image_add_layer($horzSpriteImg, $longLayer, -1);

    # Copy and paste top shadow image
    gimp_selection_all($newImageIDs[0]);
    gimp_edit_copy($layer2);
    gimp_layer_set_offsets(gimp_edit_paste($longLayer,0),0,0);

    # Copy and paste edge shadow image
    gimp_selection_all($newImageIDs[1]);
    gimp_edit_copy($layer3);
    gimp_layer_set_offsets(gimp_edit_paste($longLayer,0),960,0);

    # Copy and paste bottom shadow image
    gimp_selection_all($newImageIDs[2]);
    gimp_edit_copy($layer4);
    gimp_layer_set_offsets(gimp_edit_paste($longLayer,0),1920,0);

    # Merge visible layers
    $finalLayer = gimp_image_merge_visible_layers($horzSpriteImg,0);

    # Output the horizontal sprite as a png image
    file_png_save($horzSpriteImg,$finalLayer,"$outPath/pageShadow_horzSprite.png", "$outPath/pageShadow_horzSprite.png",0,9,1,1,0,1,1);

    # Return the image (not really necessary because already outputted)
    return $img;
}

register "shadow_template","Create drop-shadow sprite","A helper script","Tom Fotherby","Bitvolution (c)","2009-11-13","<None>","",[
         [PF_STRING,"outdir","Output directory path","or use -output argument"]
        ],\&img_uni;

exit main();

To run this script, do:
perl drawShadow.pl -o /home/yourhome/gimpTesting/junk.png -outdir /home/yourhome/gimpTesting

It will output several image files to the directory specified by the -outdir flag. See the previous tutorial for an example of how the files can be used in a webpage.

References:

• http://www.gimp.org/tutorials/Basic_Perl/
• http://www.linuxjournal.com/article/9677
• http://www.foo.be/docs/tpj/issues/vol4_2/tpj0402-0017.html

Software versions used: Ubuntu 9.04, Gimp v2.6.6, Perl v5.10.0.

If you found this post useful, please Donate 1p.