Painting the Web

Draw Me!

Back when matchbooks proliferated about as much as smokers welcome in restaurants, many of the matchbooks would have a picture of a clown or dog or some other character with the words, "Draw Me!" across the front. The matchbooks were put out by various art schools, and aspiring artists would do just that, sending in the result to get an evaluation of their skill. Evidently, to the schools, we all have a little artist in us because few people would be dissuaded from signing up for a course.

Figure 1-1. Matchbook cover with a picture of a dog and "Draw Me!"

One of the "musts" associated with web graphics is that we "must" be artists, or we "must" be designers, or even that we "must" have a degree or specialized training. Creating web graphics does require some artistic ability, but as the early matchbook art schools discovered, there's a little artist in all of us.

While a professional graphic artist may be necessary for many effects, it's not true for all. In fact, there are many effects that can be created with only a minimum of training, a little technology, and a willingness to give something new a shot.

For instance, later in the book I'll cover SVG, a way to create graphics using an XML vocabulary. The approach seems intimidating at first. How does one create a sophisticated graphic from simple primitive elements such as the following?

<circle r="6" cx="24" cy="16"/>

Yet there are by-the-number approaches one can take to make copies of an original design and then convert part or the whole to SVG, using a tool no more complex than a text editor.

Well-known computer technologist Sam Ruby uses SVG icons for each of the entries in his weblog. They're quite nice, and this surprised me a little because I never thought of Sam as a nascent artist. He wrote a post that described how he created the icons, using nothing more complex than vi, a popular Unix text editor.

The steps he followed are:

1. Embed the pattern to be copied or converted into an SVG document.

2. Resize it, if necessary.

3. Trace the areas on the original graphic using a sequence of SVG elements, such as circles and squares.

4. Use SVG paths to outline components of the graphic that don't fit within the existing pattern of other elements, such as circles.

5. Adjust width, color, and position as desired.

6. Remove the original image.

Though Sam didn't mention how he knew where to position the figures and their sizes, they wouldn't be too difficult to estimate from trial and error: change both position and size using the text editor until your copy fits as you want. Once you've captured the pattern in SVG, remove the original image, and voilà, you have your new design.

To simplify the approach, you can print out the original image, place it under graph paper, trace over the design, and use the lines in the paper to plot the outlines of the graphic elements you want to copy, as demonstrated in Figure 1-2. Then it's just a matter of transforming graph points to SVG polyline or path points.

Though having to map from a graph to an SVG document can be a bit tedious, the approach does demonstrate that you don't have to be an artiste to be creative. Of course, it would be nice if we could eliminate the tedious work with a handy tool or utility, but these all cost so much. Don't they?

Figure 1-2. Demonstration of graph-based copying

Tip

See Sam's original post on his SVG approach, with examples, at http://www.intertwingly.net/blog/2007/02/16/Recreational-SVG.