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:

Demo of what we will generate

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?

Read on…

In this tutorial we are going to create a very basic “blank canvas” webpage which has a central white cut-out with a drop shadow effect. Our “page” will be 960px wide, floated in the center of the browser window:

Tutorial end product

aBlankCanvas
Click to enlarge

Real-world example

a non-blank Canvas
Click to enlarge

Read on…