Ah, the power of MSPaint.exe. (Just realized there's a Ms. Paint pun in there somewhere. How many years have I been using this?)

I'm writing a Markdown editor. Its super-original name is MarkUpDown. (I'd originally thought I'd name it MarkUpMarkDown, but emailed John Gruber to see if that was kosher, since that really is too close to Markdown, and he objected to CommonMark's original name, "Standard Markdown". No response, though I could see how "Standard" seems presumptuous in a way I trust a bad pun like MarkUpDown is not.) I used Fiverr to get some icon artwork made, and it was pretty good. Just one problem that didn't occur to me until a few weeks later.

It's not MarkDownUp, it's MarkUpDown. /sigh

I have the psd, so I, in theory, could make my own lossless changes (I spent a little more than Fiverr's $5 to get that, but not much more), but when I tried, the export from the Gimp was super pixelated.

I really like the Gimp, I do. I used it to create the animated gifs on my MarkUpDown home page. But sometimes it takes a lot longer to figure out than it's worth to get something simple done.

^{(I'm suspicious I should pay $1500 for a good Gimp training course and watch that pay back insane dividends over the rest of my career, but I also don't want to get to be known as "the image hack guy" either.)}

Anyhow, I put together a request for my Fiverr guy, and included an image I'd hacked in Ms. Paint (and then Skitch) to show what I needed changed. Took me a little longer than I would've thought, but showed what needed to get done.

And then it hit me: That image on the right didn't look half bad. If I didn't hear back (and I didn't. He at least temporarily closed shop shortly after I left the request), I figured I had another option. If I took a little more care to line the arrows up where they were initially, I'd have something.

Not too shabby for a few hours' work (I actually did this and three other images, two of which were wider than tall and required some more serious editing), right?

Looking at it again, it looks like the down arrow needs to go a little further towards the edge to match the original, but I think I'm okay with it.

I'll blog about figuring out badges and icons and naming conventions for Visual Studio later, perhaps. Right now, I'm going to relax in my reasonable success with crazy mspaint.exe.

(You might wonder if the Fiverr design copied the "Markdown icon" too closely. I don't think that's a problem -- it was designed, and copylefted (actually put into the public domain), by Dustin Curtis.)

Labels: fiverr, gimp, images, indie, markupdown, paint

I wanted to create a simple animated gif to give users of MarkUpDown, my Markdown editor, the impression that yes, Virginia, there are keystroke commands for all of the fancy-smancy html editing tricks the application contains.

That is, Ctrl-B inserts two asterisks to either side of the selected text, etc, and in my app, there's also nonstandard Markdown but common markup stuff like Ctrl-U for underline and Ctrl-Shift-H for -- get this! -- highlighting your html code. (I know, not a huge deal, but it's still really nice when coding blog posts.)

Here's the finished product:

Not horrendously shabby, though it probably took me 90-120 minutes to get it all happening. So how do you do it? (Okay, okay, how did I do it?)

How to create cropped animated gifs in The Gimp

1. Create the raw images.
   • I made three image series for each keystroke command I was highlighting
   • First with a highlighted word
   • Second with keystroke command overlaid
   • Third image with the results.
2. Import into The Gimp with "Open as Layers"
3. Put in the order you want, first on the bottom, apparently.
4. The magic happens here: Select Image >>> Canvas Size
   • Pro tip: Making another image, I remember that I first reduced the canvas size to a middle size when I was making a small image. That black box is really small in step 5. For me, then, the canvas resize was a two-step process, first to a small size that'll be useful in the resize box, then the final, precise crop.
5. Reposition the full image so that only the parts you want to show are in the smaller black box.
6. You can preview the animation with Filters >>> Animation >>> Playback
7. Select File >>> Export As
8. Type in a filename that ends with .gif and click Export. You'll see the following:
9. Click Crop.
10. Make sure you save as an animation, and probably also set a default time for each frame.
11. If you need to specify different delays for specific frames, you need to rename those specific layers.
    • It's obviously easier to set them "all" with the "Delay frames when unspecified" option
    • See examples in step 3, where I've got (800ms) etc at the end of layer names. Strangely, that's how you set them.

Voila. Now you have an animated gif, cropped precisely to the section of the images you wanted.

Sources:

• Gimp.org "Simple Animations" Step 3 (for timing)
• YouTube.com, Ben Langhinrichs's "Make-A-Meme: Scale, crop and add text to an animated GIF in Gimp 2.8" (30 seconds in)

Labels: gif, gimp, howto