Jacob Souva’s process of Puzzld!

19 May 2011

Today I would like to introduce to you Puzzld!, a beautifully illustrated wood puzzle game for children by Windup Rocket apps. It features the stunning artwork by Jacob Souva of Two Fish Illustration. Six wonderful boards come alive at the fingertips of kids. I had the pleasure and honor of interviewing Jacob and ask him about the design process of this beautiful iPhone and iPad app.

The 'Farm' and 'Space' illustration for Puzzld! for iPad

The iPad app game Puzzld! has all the right ingredients to appeal to kids: cuteness, rich color palette and eye for detail. The people of Windup Rocket knew that Jacob Souva's typical illustration style would be a perfect match, but they weren't sure if he would be interested. Jacob stated:

"The client had very little to offer up front. It turned out that I was looking for an excuse to a.) have my work on an iPad b.) do kids related illustration c.) it was summer, and I wanted to do some "fun" work (as opposed to corporate web work, or print design work)."

Were there any hurdles relating to iPad that you had to overcome during the design phase?

The biggest hurdle was probably thinking through not only the illustration (content, age appropriateness, style), but how exactly a young child would interact with the pieces and the UI. Luckily, in my experience kids seem to find iOS very intuitive. They are not burdened with years of frustration from Windows or an old phone OS. We've put a good deal of time into this piece, and we've heard great things from kids as young as 1 understanding how to manipulate a piece of the puzzle.

The Beach illustration for Puzzld!

How was the briefing for this project? Did you get a detailed outline or dummy or some kind of chart that shows the flow and interaction of the game? Or did the client approach with his 'idea' of the game and go from there in collaboration with you?

It all started with an email from Matt. He saw my work on Dribbble and explained what he was after. We agreed to "partner" on the whole of the app, with my main focus being the 6 illustrations and icon development. He would work on the UI, coding and overall app development. I ended up helping with the individual icons that sit on the shelf when the app is launched, symbolizing each puzzle. We wanted it to be simple and memorable for young minds.

The Underwater illustration for Puzzld!

We set up a dropbox folder to share and communicate mostly through email. I'd send him sketches and he'd send me videos of the app in use. Once he added the music - it seemed like magic.

Did you also design the entire graphical skin of the game? Or was your part of the project focussed on all the illustration work?

The idea was pretty simple and one that I could get my brain around easily, as my wife and I have a 1.5 year old who loves wooden puzzles. Matt knew that with the app being so simple that the illustration quality was really important. It needed to be beautiful and rich. My main job was to create 6 scenes that would be different, beautiful, and not too heavily tilted to one gender over the other. We went with: Beach, Space, Underwater (Coral Reef), Jungle, Farm, and Garden.

Like I mentioned above, the UI was mostly handled by Matt, but he asked me for input and opinions along the way.

The 'Garden' and 'Jungle' illustration for Puzzld! for iPad

What was the biggest challenge in this project?

The biggest challenge was probably the process of making the illustrations! I wanted them all to be of a certain quality. That means I needed to really take my time and not rush, even though we wanted to get it out there quickly. I wanted them to look like a "set" - so they needed to have similar stylistic similarities. I didn't want them to look too much alike. There is a certain responsibility to the audience as well. For example, I drew a gorilla for the jungle scene that at first looked terrifying. Everything needed to be safe and fun for young minds.

Can you reveal some of your design process?

My process has been tweaked a lot from when I first started. I've been narrowing and refining things to best suit my strengths and my aesthetic. I start by brainstorming the concept, usually on paper with thumbnails and key words. Once I've picked one that I'm most happy with, I usually knock out a bigger thumbnail with more detail. Sometimes I get ideas for lighting and color at this stage, a very good sign that things are progressing well.

1. Sketching the illustration using the Wacom Cintiq 2. Drawing the illustration from the sketch in Illustrator 3. Shaping and coloring in Photoshop 4. Coloring fine-tuning and adding textures in Photoshop

Jacob Souva's typical creative process shown in 4 steps.

first After the brainstorming, the first step used to be a drawing on paper using blue pencil in combination with a good old number 2 pencil to formalize my line over the blue. However, this project was one of the first ones where I skipped the "pencil on paper > scan" step and created the whole illustration using my Wacom Cintiq 21UX which I bought this year. I still use a "blue pencil", but now it's a brush/color within Photoshop. You hardly see the difference.

The nice thing about the Cintiq is the programmable buttons on the side. I was able to speed up my workflow a lot by setting them up to do common tasks, like group objects in Illustrator, and create layer masks in Photoshop. I don't miss the old way of doing things at all. I still sketch in pencil on paper, because it's almost essential to who I am, but adding this tool has made me more efficient and has added a more human touch to my Photoshop work, as opposed to working with a mouse.

second Then I bring the sketch into Illustrator for shape building. This stage is not fun, as the Pen tool and I have a long history of disagreements. third After I get things built, I drag shapes under my drawing in Photoshop. I really like the combination of sharp, clean vector images with messy pencil drawings. fourth From there, it's a whole lot of masking, color tweaking and collaging textures and images in. I really enjoy this part!

You always work with these very cool textures, is that something you create yourself as well or do go look online for that? Are there any tips or pointers you can give?

star illustration - Nice Job! star illustration - Wowza! star illustration - Hooray! star illustration - yeah! star illustration - Awesome!

This is something that people ask about all the time. It's a combination of textures I've saved (all copyright free) from the internet, or scanned from random found items, or shot with my camera. I usually just experiment with them to get the right color or look in PS. I also "paint" over the top of them to give them depth. I like the "flatness" of texture/pattern combined with highlights/shadows.

The font used throughout is "Prater Script". I choose it for its playfulness. I'd actually discovered it through Typekit for a different, web-based project and thought it would be perfect here.

More of Jacob's work

Puzzld! on iTunes

Comments

  1. 1 nadrahan 20 May 2011

    Thanks for such a nice Post. I really enjoyed and learned a lot from it. Thanks for sharing such valuable Views.