DrawDown

Introduction

DrawDown is inspired by John Gruber's Markdown plain text format for generating rich-text documents. As such DrawDown's objectives are very similar to Markdown's; provide an easy to write, easy to read plain text format that creates images as output.

You could think of it as plain-text Photoshop.

DrawDown is available as a command line tool for the Mac for free, or you can choose to support development of the format through the purchase of the DrawDown MacOS app which supports interactive previewing of the resultant images as you work.

Requirements

The command line tool and the MacOS app both require OSX El Capitan or newer

The Basics

Unlike Markdown, DrawDown requires images to work with. By default it will search the directory tree starting from the directory containing the currently being processed file. If we imagine that we have the following simple file-structure

~/Documents/DrawDown/Examples/
 |
 -- basics.dd
 |
 -- Images
     |
     - logo.png
     - background.jpg

basics.dd might contain

AppIcon:
"background"
"logo" 35deg 50,50

Each DrawDown file is constructed of a set of frames, identified by a name followed by a colon. Each line thereafter specifies the contents of a layer (drawn in order). Each layer always starts with the name of the file being used followed by any processing instructions. In this example, the AppIcon frame is built up of two layers. One will contain background.jpg (note you do not need to specify the extension) and then logo.png will be drawn over the top.

After you have specified the image to use for a layer, you can supply any number of processing instructions. In the case of the logo layer there are two, 35deg and 50,50. These rotate the image by 35 degrees and move it across an up by 50 pixels respectively.

Drawdown will then save the frame as a combined image

We might want to colorize the background of the icon, this can also be achieved with a processing command. For example 

AppIcon:
"background" $6688FF             #Use DrawDown blue
"logo"         35deg 50,50        #Add the logo

Would apply a tint to the background layer giving us a colorized icon

There are many processing commands are they are fully explained in the Syntax section.

Note that in the examples given above, DrawDown is not sensitive to spacing between the various instructions. The two principle rules are

  • Each Frame must have an empty line after it (this will be automatically added to the end of the file for the last frame)
  • Each layer starts with no spaces before it

Beyond this, you have no restrictions.

Most importantly you can define as many frames as you wish within a single DrawDown file, and even reference a previously defined frame as a layer in another. For example, we might want to create a small version of the AppIcon frame

AppIcon:
"background" $6688FF             #Use DrawDown blue
"logo"         35deg 50,50        #Add the logo 
AppIcon16x16:
"AppIcon"      16x16                #Resize the finished AppIcon frame to 16x16