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…

It only takes a few lines of Javascript to make a HTML table start rotating it’s rows. Example:

Demo 1

field 1a field 1b
field 2a field 2b
field 3a field 3b
field 4a field 4b
field 5a field 5b
field 6a field 6b
field 7a field 7b
field 8a field 8b

Demo 2 – Job board

Web designer
£140.00
Start Up Stationary Design
£80.00
Flash / XML Menu System
£400.00
Open Source Application Rebranding
£10.00
Website Design/Build
£50.00
Internet Marketing Guru
£40.00
Icon design – Urgent project
£40.00
Looking for a dragon slayer
£30.00
Poster Design
£460.00
Telesales contacting schools
£40.00
Save the cheerleader
£40.00
Recruiting, need a honest liar
£403.00
Chess grand master wanted
£440.00
Gringots gold for sale
£430.00
webmaster of the universe
£240.00
sale of widgets
£450.00
Will code for food
£420.00
waterproof fish required
£4520.00
blind waiter needed
£240.00
fire resistant cigaretes?
£420.00

Using javascript, you need to remove the last row of the table and then insert it in front of the first table row and then repeat continuously.

Read on…