So you’ve got a Pen tablet eh? And you want to create doodle styled stuff!

You don’t have to look any further my friend… eeh, but you’ll have to scroll down though.

This tutorial will guide you to make your first doodle sketch, your first doodle based animations and your first game design.

Whether you are a beginning designer or a seasoned guru, you should find this multi-dimensional tutorial, much helpful. I’ll walk you through step by step as I make Doodle Art for an endless runner game.

Alright, enough with the jibber Jabbery, lets make some graphics!

We also have these awesome Doodle Fonts.

Step1: What are your thoughts?

Think about your concept and just let it flow. Make it as natural as you can, Doodle Art is all about your personality and what comes out of your pen naturally. You can sketch on paper or straight into Photoshop with your tablet, both are equally fine.

Here I start with a hard brush of 3-4 pixels in width, and turning off pressure. This way my pen works like a Fineliner, perfect for doodling.
Remember, this cannot be stressed enough; make separate layers for EVERYTHING you do. Yes, everything.

Selecting brush for doodle creation

I’m thinking that the main character will be in a weaponized ship. I’ll recreate the sketch along with thinking process.

First the general outline of the idea.

Drawing the doodle ship

Make another layer to refine the sketch now and use the previous one as a guide by reducing its opacity.

Refining your sketch in Photoshop

Remember to use the Scrubbly Zoom while doing the details to zoom in. It’s a great tool to use with your Pen Tablet. Shortcuts most used while sketching are B, E, Z &<Sapcebar> for brush, eraser, zoom and pan respectively.

Controlling Zoom in Photoshop

Keep at it until you finalize.

Finalized sketch

Add flat colors to everything manually. In this case, I used white and turned the background grey.

Our model for the game

And of course, our warrior doodle needs some friends too.

Making additional doodles

If you are wondering whats the deal with the white color inside… this helps in the next stage when we need to color it all up.

Step 2: That’s right, color it all up!

Now just select the layer you whitened up (double click) and give it a color overlay. When done right click it again and select “Rasterize Layer Style”.

Also color all other elements of the character in SEPARATE LAYERS, I just can’t stress this enough 🙂

Coloring your drawings in Photoshop

Now put in the shadows. To make it interesting when you make a layer for shadows (needs to be above the base layer) right click it and convert it into “Clipping Mask”. This way all your colors reamin inside the base layer.

Adding shadows in Photoshop

Now let’s work on lights and reflections.

Adding lights and shades

And finally, rest of everything.

Completing the doodle sketch

After a few hours, we have applied the same kind of coloring to rest of the characters.


Step 3: OMG Animation!

Yep… game design and animations are a package deal and you cannot take only one. So we have to learn animation as well.
For animations, we are using Adobe Flash CS6. But before we move to Flash we need to create separate “limbs” for everything and then flat them out. I have scattered them out in the image below.

Starting Animations

Now drop the PSD data for this file into Flash and set everything as following:

Loading Photoshop layers in Flash

Now comes the complicated part. But we can keep it easy by just remembering the F6 command. We’ll use this command to make 10 frames each.

Adding frames in the animation

Now start animating by selecting each frame and pressing the arrow keys to move the image in that particular frame. Turn off all other objects by pressing the “eye” icon and deal with one layer at a time. To move to next frame press F6 again. To create a bounce effect I usually do it like this.

  • Frame 1: no movement
  • Frame 2: 1 tap of the up arrow key
  • Frame 3: 2 taps up
  • Frame 4: 3 taps up
  • Frame 5: 3 taps up
  • Frame 6: 3 again
  • Frame 7: 2 taps up
  • Frame 8: 2 taps up
  • Frame 9: 1 tap up
  • Frame 10: no movement

Now hit Enter to view the animation in action and make the changes (if they are needed). Repeat for each element in a different way so they all won’t look like synchronized dancers. Maybe the character sitting inside the ship bounces a little less, etc. etc. etc.

In the end, after adding the bullet animation too, it should look something like this:


Tip: You can export all frames in a .png format by hitting “Save as” and saving PNG sequence.

Step 4: Now, the easy part

Well that was it, now we can make all the rest of the game elements by following the same technique. Here’s a look at what I did.


Game Center button

Pause Icon

Left Arrow Button

Play Button

Animated Button

Coin Pack1

Coin Pack 2

Coin Pack 3

Animated Coin Sequence


Sequence 1

Sequence 2

And the game turned out to be something like this 😀

Main Menu

Cha Menu

Game Field

Store Menu

That’s all folks. Now only one thing left to do. Checking out this game in action!

Follow the link to play the game on your Android device:

And here’s the link for iPhone and iPad users:!-delightful-quirky/id866254206

Thank you for reading this, but I have one more request for you. This was my first article here so I’m anxiously waiting for your feedback. Please do use the comments section below.

Pin It