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.
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.
Make another layer to refine the sketch now and use the previous one as a guide by reducing its opacity.
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.
Keep at it until you finalize.
Add flat colors to everything manually. In this case, I used white and turned the background grey.
And of course, our warrior doodle needs some friends too.
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 🙂
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.
Now let’s work on lights and reflections.
And finally, rest of everything.
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.
Now drop the PSD data for this file into Flash and set everything as following:
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.
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.
And the game turned out to be something like this 😀
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:
https://play.google.com/store/apps/details?id=com.zedsaid.game.sketchbook&hl=en
And here’s the link for iPhone and iPad users:
https://itunes.apple.com/us/app/doodle-rush!-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.
