Creature Shorthand

A few weeks ago I made this:

Creature Shorthand

Click the image to check it out.

It’s a little hoverable grid of information about creature slang in Magic: the Gathering. I learned a lot in the process.

The biggest challenge was getting the images to transition while maintaining the hover-over enlarge effect. I have now since found out the correct way to do this in pure CSS.

However, at the time I used a kind of hacky solution: I did the transition in GIMP and made the images animated GIFs.

This is actually a really bad idea. The quality is worse than a CSS crossfade and the file sizes are massive compared to the CSS method. On my fast connection the page still takes a while to fully load.

However, I did learn more in the process, about how to do a crossfade in GIMP.

The page I used was this one, but I will repeat the information here for future use if that page ever disappears or I can’t find it again.

First, get the AnimStack plugin. This allows code to be written into layers which is then processed all at once and clever stuff gets done to your image.

Then, get your image in GIMP with one layer for each image to be crossfaded, and another on top. Append to the layers the following code: (The code is the square bracketed bits, the other is the names of the layers.)

Frame [*21]
Layer1 [bg] [x=inc:-5:100] [-;opacity:x]
Layer2 [bg]

Process AnimStack tags (in the filters -> animation menu) and it should all work.

The syntax of the code is straightforward to understand, and I look forward to using AnimStack for other projects in GIMP in future. Though, next time I need to crossfade on a webpage I will use CSS.

This Creature Shorthand page was a valuable project, which greatly informed the design of my website.