My Workflow for creating ASCII Art

Listen to an audio version of this article, read by the author

I recently made an ASCII art portrait of my friend Matthias. It had been a year or two since I made any ASCII art, so I was a little rusty. I also had a helluva time remembering what tools I used, so I thought I should document my ASCII art workflow here:

Creating the ASCII Art

I use an app called Monodraw to create my ASCII art. It has a nice grid system, plus other handy tools that make it easy to make text based art. It’s good to start with some key feature that you think would work particularly well when represented with text. For Matthias’s portrait, I started with the round glasses, because I knew parentheses marks would work well for those.

Here’s an example of Monodraw’s layout:

Saving the Art For Quick Reference

You can skip this if you like, but I like to export the art as text file and as a png file. You can do this by hitting Command+E in Monodraw. When viewing the art as a text file, remember that you’ll need to use a monospace font; otherwise, the image might have weird proportions.

Creating the Retro Look

This is where things get really cool. When I think of text based art, I immediately think of a black screen with green text. Like the Apple II’s CRT monitor. To get this look, I use a program called Cool-Retro-Term, which is free and has a ton of great retro-themes you can use. This functions as an actual terminal though, so it’s nice to have some basic understanding of how to navigate through terminal.

I usually start by typing “clear”, then pressing Option+Return a few times to move the cursor down. I then select the text art from the grid view in Monodraw and hit Command+C. I go back to Cool-Retro-Term and Command+V the art into the terminal. If things aren’t lining up properly, it could be because the font isn’t monowidth. You can try navigating around the various themes, or “Profiles” in Cool-Retro-Term until you get something that looks right.

Creating the Animated Gif

If you want a static image, you can take a screenshot from Cool-Retro-Term, but if you want to capture that animated scan-line effect, you’ll need to use Quicktime to capture a screen recording. You can also move the cursor around or type something while capturing the screen to make it more dramatic.

Once you have your Quicktime capture, hit Command+T to trim it to the parts you want, then hit save. I then import that screen recording into Gifski, to turn it into a GIF. You might need to play around a bit to get the frame rate and quality you need, while keeping the file as small as possible. Since there are a lot of gradients and moving noise in Cool-Retro-Term, these gifs can run larger than you might expect. As an extra step, you can compress these images using Compressor.io to get a smaller file size.