Rain App

Rain is a free command line utility designed for minimizing border images for use in CSS, Qt and Android (right now requires small modification after processing). In addition to that rain can split resulting minimized image in three (either vertical or horizontal) or nine parts for usage with CSS in older browsers or any other platform, like Cocoa (see NSDrawThreePartImage and NSDrawNinePartImage reference).

How does rain work

Rain works by comparing pixels in every direction to the one specified as a starting point (center of the image by default). When it finds a pixel of different color that means that we can't minimize any more in this direction. Rain can print out offsets from each border in an easily-parsable and human-readable JSON format (-j or --json flag) to allow manual or automated usage in CSS/QSS files in border-image property. Sample output looks like this:

{"top":50,"right":15,"bottom":15,"left":15}

Example usage

Let's imagine that designer sent us a really nice box that we need to implement in css on modern browsers that looks like this:

original

First of all it's obvious that if we are going to use this as a border-image we have a lot of repeating pixels that will increase file size. Let's minimize it using rain and print out values that should be used for border image.

./rain -jm -o minimized original.png

This is resulting image:

minimized

And these are border widths:

{"top":10,"right":10,"bottom":10,"left":10}

Let's test that we got it right (only works in Chrome and FF):

<div style="width: 300px;
            height: 100px;
            margin: 0 0 15px;
            border-width: 10px;
            -webkit-border-image: url(minimized.png) 10;
            -moz-border-image: url(minimized.png) 10">
</div>

Download

Source code and precompiled binaries for 64 bit mac (10.6+) and Windows are available on github.