STEP ONE: Research, Research, Research!!!

I can honestly say that I spent about 2 full days just researching every zoo game title screen or box cover I could find. I had around 35 samples and had to go through each one and determine why they were successful or unsuccessful, why the artists made the choices they made, and what principles I could apply to my splash screen to make it fun, energetic, exciting, and enticing. It was pretty overwhelming but totally necessary. Check out a few that I came across in the course of my research.

You'll see that the above three examples (as well as most others researched) are more or less paintings. We made the choice to create vector artwork for the splash screen for a couple of reasons. First, we like being able to size and resize, then size again. If we wanted to make a Tap Zoo billboard, we could. Second, it flows better with the style of the game since the Tap Zoo assets are all originally rendered in vector programs like Adobe Illustrator or Adobe Flash.

STEP TWO: Concept Sketches

To determine which animals I should include in the splash screen, I first researched a little further and found the most popular wild animals (Tiger, Lion, Horse, and Giraffe were some of the top). I also included some that I thought displayed a range of animals (insects and birds) since Tap Zoo does have the largest variety of animals (by far!) out of all the zoo games.

Keep in mind that each artist has his/her own technique and works their concept sketches out differently ... so just use whatever works best for you. I start out with general shapes of where animals should be and try to keep in mind how I will be directing the movement of the viewer's eye through the piece. It's key to keep design in mind throughout the entire process!

Then I go over that with a rough "shape drawing" of each character to determine how he or she should be positioned and where they should be looking. I already kind of have that idea in my head when working on the initial 'general shape' sketch (above), but this is where I solidify it.

I'm constantly evolving the piece, not only in quality, but in design as well. See how I added the snake in and brought the dolphin and tiger in closer to the center group of animals? I also added a bush to the center group. These were all conscious choices to direct the viewers eye around the image.

STEP THREE: Rough Sketch

After conception I move into the Rough Sketch phase of the concept art. This is where I flesh the characters out. I like to have really clean rough sketches because, in this situation, these are the first images that my bosses see. For me, these sketches need to be as concise as possible because I personally feel that to get a good grasp of the piece as a whole, you have to have a clear idea of what's going on in it. I think this is doubly true when showing your sketches to producers and executives (the ones who were making this decision in my case), because unlike artists, they're not familiar with looking at a sketch for what it will be. They're looking at it for what it is. That's an important thing to remember because it can get really frustrating when you sketch something out really loose and rough and they say something like, "Yea, just make it look good," and you come back with something they hate because you both had a different vision. So I like to stay clear and concise in my roughs.

Here are some of the 'rejects' ...

Notice how the 1st one is drawn slightly better and fleshed out a bit cleaner? Trick of the trade. =) You can generally use your abilities to sway your bosses into liking one concept (the one YOU want them to like) better than the others if you just put a little extra effort into making that one look better. It's a simple thing that most artists in the industry will admit to doing.

It's also worth noting that in this stage of the process, animal reference photos definitely come in handy! =)

STEP FOUR: Colour Concept

I only did one pass at this because I generally like to flesh a piece out first, then go in and manipulate the colours. But I needed something to show my bosses. =P Surprisingly, they were pretty on-board with most of the colour choices (which were awful due to having to temporarily work on a cheap monitor!) ... just basically wanted me to brighten it up a bit.

At this point, there were also some changes made to the line work and overall composition of the piece. The monkey's hand position changed, the ranger's hips and shirt were altered, the bee was replaced by some background elephants, more bushes were added, and flying birds were added to the distant sky.

A few comments made about the colours in this step of the progression were that the ranger's skin tone was a little desaturated, the sky colour was too desaturated and dark (I was also asked to add light beams to stay within the Tap Zoo style), the horse's spots made her look a tad reptilian, the lion could use a little more contrast, the snake looked a bit like a candy cane, the contrast between the colour of the foreground bushes and background bushes could be played up a bit more, and the grass could use a bit more of a gradation in the background. I also decided to do some additional colour enhancement in the overall piece.

STEP FIVE: Final Rendering

Ah the finish line's in sight. =) The end product!

As you can see between comparing this piece and the last, there were still quite a few changes made - even to the original line work! Take note of how the monkey's body drastically changed. The parrot also sticks out from the treetop a little more.

So I hope you all enjoyed taking an in-depth look at the process behind the new Tap Zoo splash screen. It's a wonderful opportunity I've been given to be a part of such a fantastic team and it's awesome that I can share some of the knowledge I'm gaining here. =)

If you've not yet played Tap Zoo (or any of Pocket Gems' other amazing titles), do yourself a favor and download it here:

View the full catalog »

Hopefully by now you've already heard about a fantastic new side project that Allison (founder of Brown Bair) has been working on titled "Save Stanley". She likes to stay on her toes creatively - so when she's able to, she warms up before diving into an illustrative day with a short narrative (either written by Allison or suggested by others).

Want to stay up to date with the Save Stanley project? Visit the official site!