Regular readers will know that I rarely feature my own projects or work on Lines and Colors, but once in a while I’ll be indulgent (as on my birthday, which happens to be today), particularly if I have a project going that is of interest.
I tend to be involved in many things — web site design, web comics, Flash animation, cartooning, sketching and painting, among others.
I also have a long running fascination with dinosaurs and paleontological art. Recently, I had the opportunity to combine several of those skill sets and interests; and, along with a two friends of mine, programmer Leon Stankowski and artist/sound designer Bruce Gulick, created an application for the iPhone and iPod Touch.
If you ever wanted to put a tyrannosaurus head on a pachycephalosaurus body and add a stegosaurus tail — there’s an app for that! It’s called DinoMixer.
DinoMixer is an amusement, in which kids and dinosaur art fans of all ages can mix and match dinosaur heads, bodies and tails to make crazy mixed-up dinosaurs, or un-mix them to match up the real dinosaurs.
I designed the app and did the illustration for it, which proved to be an interesting process.
Any form of illustration has its intended method of final display, from paperback book cover to CD jewel-box to computer monitor to console game screen. The iPhone is its own display paradigm.
If you haven’t seen one in person, the screen is very nice, it’s 480×320 pixels displayed in a relatively small area, so the the actual pixels-per-inch resolution is sharper than most computer displays (160ppi vs 103ppi or less for monitors) and the color is excellent; so even though the screen is small, the image is detailed and sharp. It’s a nice platform to do art for.
I had to do a little digging to find out the preferred image format. Though the iPhone will display a variety of image files, PNG is the native image file-type for the device. PNG (Portable Network Graphics) is an underrated and terrific image format that allows both a wide color gamut of millions of colors and a full channel of alpha transparency.
Beyond those basics, though, I had given myself a challenge simply in the design of my particular app. To make the dinosaur parts match up, I had to divide the screen proportions into a grid, one that would accommodate the disparate body sizes and shapes of the various animals, and allow them to meet up at critical junctures where the illusion of joining them together could be accomplished. In addition, I wanted the dinosaurs to be relatively large on the screen, and use the small area to best advantage.
Fortunately, I’ve had this idea in one form or another percolating in my brain pan for several years (originally intended as a web feature, in dHTML or Flash), so the grid was a matter of adaptation to the iPhone screen proportions and refinement. But it was still quite a challenge to draw the animals so that they fit the grid, matched against one another and still retained a degree of scientific accuracy (there is no one quicker to notice discrepancies than a 10-year old dinosaur fan).
Once the dinosaurs were penciled to fit within the grid, I inked them, and in saying “penciled” or “inked”, I’m speaking of the digital equivalents, using a Wacom tablet and Corel Painter. I then applied digitally painted color and texture using Painter and Photoshop, in much the same method as I have used for the 15 years I’ve been doing my Argon Zark! digital web comic.
The use of ink lines filled with color wasn’t just a choice from my comfort with the technique, but vital, I realized, to producing the sense of unity necessary to make the dinosaur “mixes” work — the outlines connect precisely at their juncture points and form a whole.
I also took pains to blend the colors to an extent. While I wanted the colors of the dinosaurs to vary, to provide eye-pleasing variety, I also wanted some relationship between them. Though it’s difficult to see in the reduced resolution images, I found that working multiple colors into each dominant color, a technique often used by painters to produce overall harmony, was useful in giving the different colored dinos a bit of additional visual “glue”. Each of the dominant colors had accents and highlights of several of the other dominant colors within them.
In addition, I had to design a background that would showcase the animals and also connect them to the ground with a shadow, one that would meet the feet of all of the different shaped dinosaurs and serve as a universal shadow for all of them.
Lastly, I was not just creating illustrations that mixed and matched with one another, I was creating an application, and interface, with room for branding and functional controls, and the images had to work within that.
The final images, in particular the dinosaur heads, bodies and tails, had to be saved out as set-sized PNG files with transparent backgrounds, that would line up precisely with one another and allow the background to be seen behind them.
I created the original art at a much higher resolution than the target screen (3000 x 2000 pixels), both to give myself lots of leeway in creating detailed art, and to allow for repurposing the images (perhaps for T-shirts or other uses). I do the same with my web comic, create the original art at many times its intended display size.
10 dinosaurs (divided into 30 parts), a background, splash screen, nav bar and application icon later, I’m happy to say the resulting app works well, and has been getting good reviews. The seemingly simple premise took a lot of work (I conservatively estimate 200+ hours just on my part), but part of that was uptake on learning how to design and publish an iPhone app.
You can see the DinoMixer web site here, which includes screen shots as well as a short video, and those who use iTunes can see the DinoMixer app page in the iTunes App Store (link opens in iTunes).
I just submitted a new upgrade version of DinoMixer (v1.1) to the App Store yesterday, with features that include an additional dinosaur, multiple backgrounds and a dinosaur name box that pops up when you match a dinosaur correctly. If all goes well, it should make its way through the App Store approval process and be released in about a week.
Like many iPhone and iPod Touch apps, DinoMixer will be contine be upgraded with free revisions that add features and functionality. In my case, I’ll be drawing and adding new dinosaurs and backgrounds (as well as other features) for weeks to come. I can also update or revise the existing art whenever I want to invest the time and effort. It’s an illustration project with no set end or limit, something that makes it particularly appealing.
