HRT GeoCities 88x31 Buttons
GeoCities-style 88x31 “Powered by Estrogen” buttons
A big stereotype of late 1990s and early 2000s internet is the little “88x31” GIF buttons. There were thousands of them, advertising things like “Works best in Netscape”, new technologies, and about a billion other things. The ones I’ll be focusing on here are in the format of “Powered by $X”, for all sorts of things like Debian, Macintosh, BSD, and a million other things.
I recently had the thought to make another website using an ancient version Microsoft Frontpage, and had to have some of my own 88x31 GIFs for that, and this article talks about how I made those.
I wanted to go with the typical grey button with beveled edges, like the “Powered by Debian” and “Powered by FreeBSD” badges above, but for different forms of HRT (hormone replacement therapy) medications. so I duplicated the beveled edge style and background color as a base. I also did all of my work at 352x124, 400% of the size to export down to 88x31. Of course it needed to be animated, so I opted to go with a 2mg estradiol pill spinning around in 8 frames with 45° of difference in each. Initially I attempted to render it in Blender using a 3D model, but I gave up after a bit and instead opted to photograph a real one from multiple angles.
The Process
I started by borrowing my spinning spice rack out of the kitchen cupboard and putting paper on and behind it as a neutral background, and set up some diffused lighting gear. For this, I used my Blackmagic Pocket Cinema Camera 4K with a .71x speedbooster and a 24-70 f2.8 lens.
The raw images from the camera came out like this:
Unfortunately, they’re not a great candidate for simply removing the background and being done with it, so I cropped them down and painted the background out with a tablet. The painting was a bit sloppy, but it doesn’t really matter because none of it is major enough that you’d notice it scaled down anyway.
After scaling it down to 56x100 and combining it into a GIF, it turned out like this:
And then I just put it on the beveled background and added the text in to get the final product:
Feel free to use any of these in your own projects without credit, although I’d love to see what you do with them! (twitter, email)
Please don’t hotlink, download the image and host it yourself. I have configured the server to block external hotlinking.
88x31 version | 352x124 version
