{"id":2018,"date":"2009-11-19T13:36:54","date_gmt":"2009-11-19T12:36:54","guid":{"rendered":"http:\/\/www.bitvolution.com\/?p=482"},"modified":"2009-11-19T13:36:54","modified_gmt":"2009-11-19T12:36:54","slug":"web-design-tutorial-scripting-gimp","status":"publish","type":"post","link":"https:\/\/www.tomfotherby.com\/blog\/index.php\/2009\/11\/web-design-tutorial-scripting-gimp\/","title":{"rendered":"Web Design Tutorial &#8211; scripting Gimp"},"content":{"rendered":"<p>In <a href=\"http:\/\/www.bitvolution.com\/web-design-tutorial-centered-area-with-drop-shadow\">a previous tutorial<\/a> we went through some tedious steps to generate 3 images that could be used to create a page shadow. The great thing about <a href=\"http:\/\/www.gimp.org\/\">the GIMP<\/a> is that anything you can do with a mouse and keyboard, you can also do <a href=\"http:\/\/www.gimp.org\/tutorials\/Basic_Perl\/\">via script<\/a>.<\/p>\n<p>We will generate the following images automatically:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.tomfotherby.com\/blog\/wp-content\/uploads\/2009\/12\/aBlankCanvas_2.png?resize=255%2C168&#038;ssl=1\" alt=\"Demo of what we will generate\" width=\"255\" height=\"168\" class=\"aligncenter size-full wp-image-619\" \/><\/p>\n<p>Why script it?<\/p>\n<ul>\n<li>It allows us to tweak settings and quickly re-generate the image to see the results. For example, we can ask ourselves, &#8220;I wonder what it&#8217;d look like if the shadow was a bit bluer?&#8221;<\/li>\n<li>We can automatically generate multiple images (including, for example, a image suitable for a CSS sprite).<\/li>\n<li>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 &#8211; so you can adapt to use rounded corners in the background image by changing 1 line of the generation script.<\/li>\n<li><em>Mice are evil<\/em> &#8211; why involve a mouse when all we need is a keyboard?<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p>To install the necessary Perl gimp extension in Ubuntu, do:<br \/>\n<span class=\"iconTerminal\">sudo apt-get install libgimp-perl<\/span><\/p>\n<p>Save the following file as <em>\/home\/yourhome\/gimpTesting\/drawShadow.pl<\/em><\/p>\n<pre class=\"brush: perl; title: ; notranslate\" title=\"\">\n#!\/usr\/local\/bin\/perl -w\n\nuse Gimp &quot;:auto&quot;;\nuse Gimp::Fu;\nsub img_uni {\n    my ($outPath) = @_;\n    $width       = 960;\n    $height      = 60;\n    $colorWhite  = &quot;#ffffff&quot;;\n    $colorOfBorder = &quot;#f00000&quot;;\n    $colorBlack  = &quot;#000000&quot;;\n\n    print &quot;Outputting to: \\&quot;$outPath\\&quot;\\n&quot;;\n\n    # Create a new RGB image\n    $img = gimp_image_new($width, $height, RGB);\n\n    # Create a new layer (with alpha channel)\n    $layer = gimp_layer_new($img, $width, $height, RGBA_IMAGE,&quot;Layer1&quot;, 100, NORMAL_MODE);\n\n    # Add the layer to the image (-1 means insert above the active layer)\n    gimp_image_add_layer($img, $layer, -1);\n\n    # Paint the entire layer transparent\n    gimp_drawable_fill($layer, TRANSPARENT_FILL);\n\n    # Select a rectangle inside the image and paint it with black\n    gimp_rect_select($img,10, 10, 940, 40,CHANNEL_OP_REPLACE, 0,0);\n    gimp_context_set_foreground($colorOfBorder);\n    gimp_edit_fill($layer, FOREGROUND_FILL);\n\n    # Shrink the rectangle and paint it with white\n    gimp_selection_shrink($img,1);\n    gimp_context_set_foreground($colorWhite);\n    gimp_edit_fill($layer, FOREGROUND_FILL);\n\n    # Add a drop-shadow of the current selection\n    script_fu_drop_shadow($img,$layer,0,0,15,$colorBlack,80,0);\n\n    # Merge visible layers\n    $layer = gimp_image_merge_visible_layers($img,0);\n\n    # Output the file as a png image\n    file_png_save($img,$layer,&quot;$outPath\/pageShadow_vertSprite.png&quot;, &quot;$outPath\/pageShadow_vertSprite.png&quot;,0,9,1,1,0,1,1);\n\n    #\n    # Split the image into 3 (top, middle, bottom)\n    #\n\n    # Add 2 horizontal guides\n    gimp_image_add_hguide($img,20);\n    gimp_image_add_hguide($img,40);\n\n    # Guillotine the image into 3\n    (@newImageIDs) = plug_in_guillotine($img,$layer);\n\n    # Save each of the guillotined sub-images as pngs (just in case we want them?)\n    $layer2 = gimp_image_get_active_layer($newImageIDs&#x5B;0]);\n    file_png_save($newImageIDs&#x5B;0],$layer2,&quot;$outPath\/topShadow.png&quot;, &quot;$outPath\/topShadow.png&quot;,0,9,1,1,0,1,1);\n\n    $layer3 = gimp_image_get_active_layer($newImageIDs&#x5B;1]);\n    file_png_save($newImageIDs&#x5B;1],$layer3,&quot;$outPath\/edgeShadow.png&quot;, &quot;$outPath\/edgeShadow.png&quot;,0,9,1,1,0,1,1);\n\n    $layer4 = gimp_image_get_active_layer($newImageIDs&#x5B;2]);\n    file_png_save($newImageIDs&#x5B;2],$layer4,&quot;$outPath\/bottomShadow.png&quot;, &quot;$outPath\/bottomShadow.png&quot;,0,9,1,1,0,1,1);\n\n    #\n    # Create a horizontal Sprite by concatenating the 3 images\n    #\n\n    $horzSpriteImg = gimp_image_new($width*3, $height\/3, RGB);\n    $longLayer = gimp_layer_new($horzSpriteImg, $width*3, $height\/3, RGBA_IMAGE,&quot;Layer2&quot;, 100, NORMAL_MODE);\n    gimp_image_add_layer($horzSpriteImg, $longLayer, -1);\n\n    # Copy and paste top shadow image\n    gimp_selection_all($newImageIDs&#x5B;0]);\n    gimp_edit_copy($layer2);\n    gimp_layer_set_offsets(gimp_edit_paste($longLayer,0),0,0);\n\n    # Copy and paste edge shadow image\n    gimp_selection_all($newImageIDs&#x5B;1]);\n    gimp_edit_copy($layer3);\n    gimp_layer_set_offsets(gimp_edit_paste($longLayer,0),960,0);\n\n    # Copy and paste bottom shadow image\n    gimp_selection_all($newImageIDs&#x5B;2]);\n    gimp_edit_copy($layer4);\n    gimp_layer_set_offsets(gimp_edit_paste($longLayer,0),1920,0);\n\n    # Merge visible layers\n    $finalLayer = gimp_image_merge_visible_layers($horzSpriteImg,0);\n\n    # Output the horizontal sprite as a png image\n    file_png_save($horzSpriteImg,$finalLayer,&quot;$outPath\/pageShadow_horzSprite.png&quot;, &quot;$outPath\/pageShadow_horzSprite.png&quot;,0,9,1,1,0,1,1);\n\n    # Return the image (not really necessary because already outputted)\n    return $img;\n}\n\nregister &quot;shadow_template&quot;,&quot;Create drop-shadow sprite&quot;,&quot;A helper script&quot;,&quot;Tom Fotherby&quot;,&quot;Bitvolution (c)&quot;,&quot;2009-11-13&quot;,&quot;&lt;None&gt;&quot;,&quot;&quot;,&#x5B;\n         &#x5B;PF_STRING,&quot;outdir&quot;,&quot;Output directory path&quot;,&quot;or use -output argument&quot;]\n        ],\\&amp;img_uni;\n\nexit main();\n<\/pre>\n<p>To run this script, do:<br \/>\n<span class=\"iconTerminal\">perl drawShadow.pl -o \/home\/yourhome\/gimpTesting\/junk.png -outdir \/home\/yourhome\/gimpTesting<\/span><\/p>\n<p>It will output several image files to the directory specified by the <em>-outdir<\/em> flag. See <a href=\"http:\/\/www.bitvolution.com\/web-design-tutorial-centered-area-with-drop-shadow\">the previous tutorial<\/a> for an example of how the files can be used in a webpage.<\/p>\n<p>References:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.gimp.org\/tutorials\/Basic_Perl\/\">http:\/\/www.gimp.org\/tutorials\/Basic_Perl\/<\/a><\/li>\n<li><a href=\"http:\/\/www.linuxjournal.com\/article\/9677\">http:\/\/www.linuxjournal.com\/article\/9677<\/a><\/li>\n<li><a href=\"http:\/\/www.foo.be\/docs\/tpj\/issues\/vol4_2\/tpj0402-0017.html\">http:\/\/www.foo.be\/docs\/tpj\/issues\/vol4_2\/tpj0402-0017.html<\/a><\/li>\n<\/ul>\n<p><em>Software versions used: Ubuntu 9.04, Gimp v2.6.6, Perl v5.10.0<\/em>.<\/p>\n<p>If you found this post useful, please <a href=\"http:\/\/www.diddydonation.com\/donate?link=http:\/\/www.bitvolution.com\/web-design-tutorial-scripting-gimp\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.diddydonation.com\/static\/images\/icons\/onepenny.png?w=620\" \/> Donate 1p<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[92],"tags":[78,95,91,26],"class_list":["post-2018","post","type-post","status-publish","format-standard","hentry","category-tutorial","tag-graphics","tag-perl","tag-thegimp","tag-ubuntu"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2018"}],"version-history":[{"count":0,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2018\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}