How I Brainstorm With Doodles

For newer readers who missed this the first time around, I thought I’d repost this…

Few illustrations are done without preliminary brainstorming. Some begin as sloppy little doodles done on anything from napkins, to envelopes, to whatever scrap of paper is handy when an idea comes around.

On top is the thumbnail that served as the basis for the final drawing. below that is the final menu page illustration.

Sometimes I’ll spend time on a rough sketch, and other times I just want to come up with some very rough compositional idea, so I’ll noodle around with sloppy little thumbnails. These aren’t the kinds of things many artists want you to see, because they’re not pretty, and, in fact, are embarrassingly bad from a rendering point of view. But their purpose isn’t to look pretty, so don’t judge them too harshly.

Furthermore, when time is critical, I’m even less inclined to draw anything beyond chicken-scratches. Yes, many have been horrified to find, after selecting me to be on their Pictionary team (in hopes that having an artist on their team would ensure a landslide victory), that I draw sloppy little stick figures just like anyone else.

Around the beginning of May of 2012, because the current project at Ayars Animation was a bit ambitious and was taking far longer to finish than we had hoped, Frank Ayars and I discussed the idea of doing smaller projects. I suggested that I take a week or two off so that I might attempt to complete an entire picture book in that time. If you knew me, you’d know that’s pretty ambitious; not because I illustrate slowly, but because I tend to get bogged down in the minutiae of a picture, and I spend far too much time in details that can hardly be appreciated by anyone.

So I decided to do a book with, what would be for me, a rough illustrated style. Basically, this meant I’d do a fast color over an acceptably clean drawing. It’s actually what a lot of printed children’s books already look like, so we’re not talking about rushed or bad art. I just wouldn’t take the time to make it too polished. The irony is, I often tend to refine all the charm out of my looser drawings, so illustrating a book this way could actually render pretty good results.

Overall, I had to come up with a character, write the text, and illustrate it in a format which I could then hand over to Frank Ayars for implementation. I also put together a small pdf with storyboards and instructions on how the app-user interactions might work, how the articulated characters would move, etc. I also had to design any necessary navigation items and such. I think I spent a couple of days just thinking of what to write, bouncing ideas off my wife, and receiving creative input from my oldest daughter.

After that, I began noodling around with the design of the menu page. The thumbnails you see in this post were made while working out a composition for the menu page of the app. I designed the character of Retro loosely off of the two other characters you see here, which I had created around 2000 A.D. (I added “A.D.” so readers don’t confuse it with some other year 2000).  The one character on the left was a character called The Flooglemop, about which I had actually began writing a story way back, as well. I was writing that story all in verse, and I realized how stupid a decision I had made in attempting to write such a long story that way, so it never saw completion. The other character was just a doodle done for fun.

Though the entire book app is done in a very loose style, it actually turned out quite nice. For the record, from the decision to embark on the project to the time I handed off all the completed assets to Frank Ayars, it was about ten days. It was nonstop work, and I felt like I had given birth, only without the resulting stretch marks.

Be sure to follow us on , Twitter, and Instagram

Thumbnails: An Economic Approach To Design

I did a previous post about how I brainstorm with doodles, and it was such a big hit with all three of my readers that I decided to revisit the topic.

The purpose of thumbnails is to work out ideas in an economical fashion. There’s no point in wasting time with an elaborate drawing, only to find out the composition doesn’t work. So what are the uses of a thumbnail?

Point-Of-View (POV): There are a lot of ways to view a scene, and a lot of different camera angles from which to choose.

If you look at the first thumbnail for the scene above, it was a straight-on POV. We see the same thing on stage, because a live performance pretty much only allows for that perspective. Because artists are not limited to this, it’s sometimes thought too simplistic a POV, but many artists use it successfully. Illustrators like John Bauer or Maurice Sendak pretty much used a straight-on POV, and they produced beautiful scenes. Basically, it’s okay just as long as the individual elements are still composed in an interesting way. In any case, I later used an overhead POV for the page above.

Relationships: Thumbnails can also help you determine relationships. In the scene above, I juxtaposed a close-up of the main character’s large head with little bees. Another effect was to bring the main character’s head through foliage, such that the daylight behind him produces a halo of light, further drawing the viewer’s attention to him. I used this same halo effect below.

Viewer’s Eye Flow: You can use thumbnails to determine how you want the viewer’s eyes to move across an image. In the illustration above, the viewer is first drawn to the main character (halo effect, remember? It says, “Look at ME”). From the starting point of the main character, your eyes drop straight down, working your way to the larger crabs on either side, flowing up the seaweed, back toward the main character. Guiding the viewer’s eyes this way can help them see things in a certain sequence, perhaps from most important element to least important.

Composition: Another principle used above is the rule of thirds. If you slice the image horizontally into thirds, you’ll note the sand occupies the bottom third, while the water fills the rest. This principle is also present in the illustration below. In this case, the image is sliced vertically into thirds, with the main character occupying the far right third, and the bright flamingos occupying the rest.

Another way to slice things up is to divide the image diagonally, and in this case, doing so causes the elements to flow toward our main character. In the scene below, the large branch slices across diagonally. The background tree-line also serve to reinforce that diagonal flow, again leading the viewer’s eye where we want it to go.Below are more thumbnails used to work out composition or character designs. Of course there are many other ways to work out designs, like digitally drawing, slicing, resizing, and moving things around.

Perhaps some of you would like to share different time-saving techniques which economize your workflow?

Be sure to follow us on FacebookTwitter, and Instagram!


Here’s a detail from Ayars Animation’s Cozmo app. Every time I open the app and go to this page, I remember how much work it involved; not just because of the illustrating, but because it had to be done in, like, a bazillion layers in order to facilitate the animating and interactive elements (and if you’ve tinkered with the app, you’d have an idea of what I mean).

Screen Shot 2015-06-15 at 9.55.52 AM

Be sure to follow us on FacebookTwitter, and Instagram!

Ayars Animation’s 3,2,1 Blast Off! Number Book

Get it HERE!

Another Offering by Ayars Animation

Our latest children’s book has been released (find it HERE). It’s a number book for pre-schoolers, and Trinity, my eleven year old daughter, helped me write it. I illustrated this particular app at breakneck speed. Here’s the flyer for it.

More Character Design, Please

As I already noted in a previous post, I created a lot of characters for the Cozmo’s Day Off iOS app. Whimsical robots are always fun to design, and this was one of my favorites. Like some of the others, this character only makes a brief appearance, this time on page 8.Frank Grau Robot Design for Cozmo's Day Off iOS appWhat you have here is a robot dashing across the screen to get his coffee order. When he crosses back again, he’s relaxed as he carries his java fix in his grip. That’s right – even robots like a cup ‘o’ joe on occasion. Don’t you?

Never Let A Good Design Go To Waste

I originally created Cozmo back in the 90’s as a figurine line while working at Cast Art Industries (figurines made up a large percentage of the giftware industry at the time). Besides illustrating and designing giftware, I had various other art-related chores I would be called on to perform, from helping design sets for our catalog photo shoots, to creating a birthday card for the owner’s best friend (when you own your own company, you can get your employees to do just about anything as long as they’re on the clock).

One of the things I was sometimes asked to design were point-of-purchase (or POP) display headers for our products. A figurine POP was usually plastic or cardboard, with stepped rows, and usually had an illustrated header which served as a backdrop to help stage the figurines. When I designed the Cozmo figurines, I also created some rough POP header concepts. Cozmo point-of-purchase display concepts

Fast-forward to 2010 at Ayars Animation, where Frank Ayars and I are discussing what we might do for a second iOS app. I had plenty of intellectual property ideas, one of which was Cozmo, so I pitched that to him. He gave it the green light, and off we went. So there I was about to design a menu page for the app. I really liked certain elements about the earlier Cozmo POP concepts I did for Cast Art, so I looked to them for inspiration, and they formed the basis of what eventually became the final menu page design of the app. Cozmo's Day Off iOS app menu page

All of that to say, if you have a good idea that you’re not putting to use, don’t let it go to waste. If the need or opportunity presents itself, don’t be afraid to reach back in the past for something that can serve you well in the present.

Spaced Out

I designed an awful lot of characters for the Cozmo’s Day Off iOS app, by Ayars Animation. This particular character is on page four (I think), and it only appears for a brief moment on the dashboard screen of Cozmo’s space ship. Ayars Animation - Cozmo's Day Off

Production Backgrounds

And here are still other production backgrounds I illustrated for the Jack and the Beanstalk iOS interactive children’s book app.

Maximizing Assets

Backgrounds aren’t the only things I reused to expedite the art for Jack and the Beanstalk. Illustrating the beanstalk took enough time to warrant creating it as an independent asset. By creating it large enough, I was able to resize it, cut it, edit it, and move it around to reuse more than once. I was able to change it enough that it never looked the same way twice. Maximizing assets like this will help speed you through time-sensitive projects.