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.
Great article. Have a extremely good month!