About "Six Ponies"

This page is about how we made Six Ponies. We'll start by discussing the technical and artistic challenges of the web and how we cope. Then we'll decribe how to design images that work effectively within these limitations by using the .gif file format. We'll explain the sketch,scan, and trace method for making detailed drawings that bucket fill cleanly, how to make efficient gradient fills, and the hand antiailiasing method for reducing the number of colors in an image.

Although we used The GIMP, a free graphics editor for Linux and other forms of Unix, the techniques in this article apply to other graphic editors such as Photoshop. This tutorial assumes that you are familiar with how to do basic operations with your graphics editor.

challenges of the web
The primary technical limitation of the web is bandwidth: many viewers are using slow modems or reach your site over congested international lines. Although hypertext works best with a response time under one second, the web doesn't come close. All isn't lost -- if you work hard to shrink the size of your images you can still provide an intense experience, however, you need to keep the total size of your page, images and all, under about 20k.

A second problem is color. We ran a survey from August to November 1998 of visitors to our page Stars in VRML and found that at least 20% of our viewers are using 8-bit color or worse. JPEG files often dither adequately, but GIF files with large areas of one color dither terribly unless you conform to a group of 216 reliable colors.

Finally, viewers' screen sizes vary. According to our survey, at least 20% of web viewers have a 640x480 screen. With all of the browser chrome enabled, the space left for your page is appalingly small. We felt terribly constrained by the small size and decided it would be OK if Six Ponies was slightly larger than the screen in 640x480.

gif versus jpeg
The web has two standard image formats, corresponding to two ways of representing pictures in a computer. GIF files are based on indexed color, painting images out of a choice of 256 colors, possibly (if you're viewing it with a good computer) chosen out of a large set, while JPEG files are based on RGB color that stores separate red, green and blue values for each pixel. The choice between GIF and JPEG depends on the kind of image that you're trying to display. Images with continuous tones, such as photographs work best as JPEGs while drawings with large patches of solid color work best as GIFs.

With a graphics editor, you have a choice of working in indexed or RGB color -- because information is lost when converting from RGB to indexed, it's unwise to switch unnecessarily between the two. Image manipulations such as scaling and rotation work much better in RGB mode, but, as we'll talk about later, you may need to manipulate individual pixels in your image after transforming it if you want to make web-friendly GIFs.

sketch, scan, and trace

Because the ponies' file size must be small, they couldn't be shaded or use many colors. Most of their character had to be expressed with shapes and lines. A thin line permits the greatest detail, so at first I tried drawing directly on the computer with the single pixel pencil, but the mouse is more awkward to manipulate than a real pencil, and the resulting sketches were stiff and unexpressive.
Next, I tried drawing with the the 4 pixel pencil (the next largest brush.) I drew the ponies three times larger than what I planned for the final size, hoping I could draw smoother, more free lines if I had more room to sketch in. Then I shrunk the image. One result is on the left. This was an improvement, but the lines were heavier and choppier than I wanted.

I decided I'd get better results drawing the ponies on paper first, then scanning and tracing them. Lines drawn on paper would be free and expressive, and because I could trace with the smallest brush, they'd be thin and detailed.

	1. pencil sketch Although graphics editors are powerful, a mouse is an akward handful of plastic compared to a real pencil. By sketching on paper first, I was able to get much more natural lines than I would have using the mouse. Use the pencil sketch phase to define major shapes and lines. Don't draw every detail yet. On the left is my pencil sketch of the pony Bird -- here the important shapes are the relative sizes of Bird's head and neck, the angle that they connect at, and the curve of the lead rope. Details can be changed later, but it's important to get the composition of the drawing correct at this stage since it can't be easily corrected later.
	2. red pen To make the image easier to scan and trace, I drew over the pencil sketch with a red pen. With the pencil sketch guiding me over the shapes, it was easy to add details such as rings on the halter and twists in the lead rope. After the ink dried, I erased the pencil line. Then I scanned the images at 72 dots per inch, which is appropriate for web images, and saved the drawings as `.tiff` files.
	3. single pixel black pencil Next I used the GIMP to turn the red lines into solid black lines that I could cleanly bucket fill. I did this by adding a transparent layer above the image and carefully tracing the red lines with black pencil. To evaluate my progress, I'd occasionally make the original sketch invisible. It's important to trace each line evenly at a constant speed, otherwise it will look uneven. It's also important to avoid drawing long, perfectly vertical or horizontal segments -- the exact straightness of such lines looks unnatural in a drawing of mostly curved, jaggy lines. It helps to slightly bend horizontal and vertical lines. If you look carefully at the strap under Bird's throat, you'll see that it's composed of 3 vertical segments offset horizontally by one pixel every 5-10 pixels to break rectangulary.
	4. drop out the background After I traced the lines, I no longer needed the original sketch. To eliminate it, I made its layer invisible and flattened the image. Next I needed to make sure the lines were continuous so I could bucket fill. The resulting outline is a delicate shell, a single pixel wide. Because it is thin and finely detailed, it cannot be shrunk or enlarged. If you try to shrink it, parts of the line will break, making the image ragged and torn. If you enlarge it, the lines will get thick and coarse. Avoid these problems by drawing the originals at the same size as your desired finished image.

fill the shells After picking my colors, I bucket filled my outlines. Sometimes, however, I chose to make patches of color that aren't contained by black lines, as with the cat resting on Sugar's head. If his stripes were enclosed in lines, they would be overwhelmed: there would be more black than orange. When dark lines enclose flat colors, they accentuate the shapes of an image by helping to define the colored shapes and by emphasizing the transitions between them. If the lines are removed, these transitions are more subtle. For example, I removed the black line from the end of Sugar's neck to suggest that the her neck keeps going, even though it isn't all drawn.

efficient gradient fills


`.gif` compression works by abbreviating horizontal segments of the same color. If an image has 10 pink pixels in a row, then 5 green, rather than storing "pink" 10 times, and then "green" 5 times, this information is reduced to "10 pink, 5 green". Logically, then, images with large areas of continous color make very small `.gifs.` Images with numerous or noncontinuous colors, such as gradient fills or antialiased lines, benefit less from compression. Some horse colors can be rendered in simple flat colors, but many cannot. For instance, the body of a bay horse is reddish brown, turning gradually black on its legs and muzzle. I approximated this effect on Olive's muzzle by mixing two colors of dark and light dots. Although I could make a smoother transition with more colors, a two-color dither will compress efficiently. To make hand-drawn dithers look beleivable, you must avoid letting the dots form lines or rectangular patterns, or the transition will look unnatural.

Bird's spots; or, watch your colors I made Bird's spots in a way similar to Olive's muzzle. First I created the major spots by scribbling and bucket filling shapes. Then I blended them into her main coat color by mixing tan and white dots around the edges. I originally drew the the spots on a large image of Bird trotting, and the result was the leftmost image below.

When I made Bird's small portrait, I had to make the spots on her neck match those in her large picture. I couldn't just cut and paste them, though, because her neck is in a different position in each picture. When I cut out the image and rotated it, as seen above, the spots became blurred into intermediate shades. If your goal is to make ultra-tiny .gifs, beware operations that alter the color palette. Many filters, such as rotation, do so. Because computers represent images on a rectangular grid, the computer can't rotate individual pixels, so it blurs them to smooth out their imperfections. (Although I could have rotated the image in indexed color, the results would have been worse, since a computer doesn't have the aesethic sense to accurately place pixels)
Hand antialiasing can be used any time you need to reduce the number of colors in an image. It takes a lot of work, but gives you complete control.

		To make subtle distinctions in color in visible, I first chose two bright colors unrelated to my desired final colors, and bucket filled white areas with blue and tan ones with green. If I'd tried to convert the spots to pure tan and white directly, it would be hard to see pixels that are almost, but not quite, pure white and tan, and the final product would have more than 2 colors.
		I used the pencil to color the remaining pixels green and blue. Although the green and blue areas aren't solid, that's okay, because the almost- blues and almost- greens...
		... show up clearly when I bucket fill white and tan over the blue and green...
		... and then they can be individually penciled over with white and tan.
		Now Bird's spots are the right colors again, and they are correctly aligned on her neck.

summary Six Ponies is an example of what can be done if you think about the bandwidth and color resolution challenges of the web and conciously design your images to work effectively within these limitations. By using the .gif file format, large areas of web safe color, and economical, two color dithers, you can create appealing images that load fast. By sketching on paper and tracing with the single pixel pencil you can make detailed outilnes that bucket fill cleanly, and you can use hand antiailiasing to reduce the number of colors in an image for maximum compressablitily.