Making Art with Text – ASCII and ANSI Art

Many people who have used Bulletin Board Systems, have seen ANSI, ASCII, and RIP Art.

I recently revamped my website to feel more like an old school BBS.  To set the tone, I needed an image that looked like it could have been made back then.

Here are two examples of what ANSI art in the BBS world looked like.  The first is from Tradewars 2002.  The second, is from Legend of the Red Dragon.

Tradewars 2002 L.O.R.D.

In the days of Dial up modems, the time to send an actual image file would have been a long time.  To circumvent this limitation ASCII graphics were created.

###ASCII and ANSI Art

ASCII graphics used keyboard characters to display a picture.  My earliest memories of ASCII art are my father brining Snoopy home for my brother and I when we were littler.  These images are usually monochrome in color.  An example of ASCII Art is the following:

                  XXXX
                 X    XX
                X  ***  X                XXXXX
               X  *****  X            XXX     XX
            XXXX ******* XXX      XXXX          XX
          XX   X ******  XXXXXXXXX                XX XXX
        XX      X ****  X                           X** X
       X        XX    XX     X                      X***X
      X         //XXXX       X                      XXXX
     X         //   X                             XX
    X         //    X          XXXXXXXXXXXXXXXXXX/
    X     XXX//    X          X
    X    X   X     X         X
    X    X    X    X        X
     X   X    X    X        X                    XX
     X    X   X    X        X                 XXX  XX
      X    XXX      X        X               X  X X  X
      X             X         X              XX X  XXXX
       X             X         XXXXXXXX\     XX   XX  X
        XX            XX              X     X    X  XX
          XX            XXXX   XXXXXX/     X     XXXX
            XXX             XX***         X     X
               XXXXXXXXXXXXX *   *       X     X
                            *---* X     X     X
                           *-* *   XXX X     X
                           *- *       XXX   X
                          *- *X          XXX
                          *- *X  X          XXX
                         *- *X    X            XX
                         *- *XX    X             X
                        *  *X* X    X             X
                        *  *X * X    X             X
                       *  * X**  X   XXXX          X
                       *  * X**  XX     X          X
                      *  ** X** X     XX          X
                      *  **  X*  XXX   X         X
                     *  **    XX   XXXX       XXX
                    *  * *      XXXX      X     X
                   *   * *          X     X     X
     =======*******   * *           X     X      XXXXXXXX\
            *         * *      /XXXXX      XXXXXXXX\      )
       =====**********  *     X                     )  \  )
         ====*         *     X               \  \   )XXXXX
    =========**********       XXXXXXXXXXXXXXXXXXXXXX
1978 by Douglas A. Wright

ANSI Art uses IBM’s extended character set, and escape codes to create colored Works of art.  ANSI art was widely used for BBS interfaces, and logos.  There have been artists who can use the 16 color limitations, and the few different texture types available to create really neat works of art.  My Header image started out as an ANSI image, but because ANSI images today have to be viewed through a special interpreter, I converted it to a graphic.

I found that there are tools, which can convert images to ANSI or ASCII art.  This appears to be one of the most common ways to create both ANSI and ASCII art today.  I found that the results of these generators did not give the same results as art made by hand in an editor.

###Creating ANSI Art

To create my Excalibur’s Sheath Header image I went looking for examples of creating Text.  In my searches I came across a person who had taken a font package for an old software for creating ANSI art, and converted the fonts to Figlet.

###Creating the Text

I used the patorjk.com figlet generator to create the Excalibur’s Sheath text for my image.

I was able to preview multiple “fonts” before I decided upon ANSI Shadow, as the font to use.

The font I selected did not have the apostrophe symbol, so I left a blank between the r and s in Excalibur’s.  I later used a comma to place the apostrophe to create the image.

###Drawing the Sword

I then needed a way to draw a sheathed sword using ANSI art.  I used the sixteen colors ANSI editor to create and color my sword image.  This editor allowed me to save a PNG image of my text art, which was perfect for my uses.

###Putting it all together

Once I had the text for the image, and the sword drawn, it was a matter of grabbing a reference of the 16 colors available to the ANSI artist.  I used GIMP to put it all together.  With GIMP I selected the Monospace font, and pasted in Excalibur s, Sheath, and ‘ as 3 different text blocks.  I renamed the layers so that I could identify what they were.  I colored them #XXXXXX.  I made copies of all three text blocks.  Then I removed the drop shadow from all three original text blocks.  I placed them so that they looked their best.  I colored the second set of text blocks #XXXXXX, and placed them so that they were under the first blocks with only the shadow area showing.

The last piece I did was place the sword as a separate layer.  I rotated it, and shrunk the layer to fit.

I feel that I made use of several techniques I learned from looking at existing ANSI art made during the BBS era, and while I used a modern image manipulation tool, and techniques it was the best tool I had available for this project.  There are not many examples of ANSI art on the web, and the tutorials, and documentation left sometimes presume a skill level, or tools I did not have access to.

Written on April 21, 2014