My friend asked me for a little 88x31 badge to add to their site, so they could link to mine. I thought it would be a cute little project, so I installed LibreSprite, a free and open source sprite program. It was available in my distro’s repositories, so installing it was quick and easy.
After launching it for the first time, I was able to quickly create a new file. The UI is clean and intuitive. LibreSprite is a sprite creation tool, seemingly aimed at game developers, but it seems like it will comfortably allow work with a 88x31 canvas, perfect for my needs.
After creating my canvas, the tools were familiar and easy to understand. I turned on the pixel grid to better understand the space on my canvas and I got to work.
After finding a font that looked good, I opened another canvas in LibreSprite, scaled down a picture that my lovely partner drew of me, and then copied that over to the original 88x31 canvas. I put my portrait in as the background layer, put the text on a middle layer, and put a 4 pixel border on the top layer, covering everything at the edge like a mat.
Then, I found that this software has built-in animation settings! That’s absolutely fantastic, I remember a lot of these being animated back in the day. Lots of scrolling text and flashing images. I’ll go ahead and make the stripes of the border move outwards.
It only took a few moments to animate the border, and I think it looks nice! The software has a great UI theme, it kind of reminds me of Paint Tool SAI in that much of the user chrome isn’t just gtk/qt/winforms/system theme. There’s something really charming about software that has its own, very different looking UI. I love FL AND Ableton for this. Anyways, I really like how the portrait looks scaled down like this:
After looking at it for a while, I decided I wanted to see more of my horns. After moving things around, I eventually decided to mask off the horns and delete everything on the boder layer on each frame. LibreSprite made it easy! I tried making the text move, but I think it’s a little too frantic when I do that:
I’m pretty happy with how easy this was, and I can’t wait to make more of these 88x31 buttons using LibreSprite! I’m really glad I didn’t have to reach for proprietary software like Photoshop to get this done. I wish the GIMP was easier to use, but I really don’t have great experiences with it. Krita is great, but not for small canvases like this, at least in my experience.
What a fun evening! The finished button should be on the bottom of every page on my site now :3
