Learn to Draw on iPad

Greg Pugh
Learn how to draw a cute alien on the iPad!

Learn how to draw a cute alien on the iPad!

It’s a pretty safe bet that most developers outsource most of the art for their apps – programmer art is often said with a laugh for a reason!

But with a little bit of know-how, a good software package, and some decent instruction, there’s no reason that you can’t learn to draw some of your own art for your apps.

In this tutorial, you’ll learn to draw on iPad by making a cute alien creature. Along the way, you’ll learn:

  • Some great tips on creating a rough guide sketch
  • Choosing and manipulating your drawing tools
  • Adding shading and highlights to your drawing
  • And even sharing your masterpieces with the rest of the world!

By the time you finish this tutorial, your skills in programmer art will level up. So let’s get started!

Getting Started

In this tutorial, you will be using an iPad app called Sketchbook Pro.

You might be asking, “What’s the reason for using Sketchbook Pro? Why not use Adobe Photoshop, Illustrator, or even Flash?”

Good question. But unless you’re a hardcore illustrator, you don’t really need to invest a lot of money in graphics software. Sketchbook Pro is really affordable, and is available on all of the major platforms (it also has a free version, which I’ll get to in a minute):

Another great feature is that any Sketchbook Pro files created on one device can be opened on any other device that has Sketchbook Pro installed. For instance, you can start a sketch on your iPad and open it later on your MacBook to add the finishing touches.

If you’re not sure you want to pay for the app just yet, you can use Sketchbook Express. It’s free, but it limits the number of features, layers and tools that you can use. Its user interface is also laid out just a little differently.

You’ll see why upgrading is worth the price, but you can definitely use the free version to follow along with almost everything in this tutorial and see how great drawing with Sketchbook is. I will point out the cases where Sketchbook Express is different so that free users can still follow along.

Choosing Your Drawing Instrument

Finger vs Stylus

To draw in SketchBook, you can either use a stylus or just your finger. For this tutorial, you will be using your finger, since I suspect that most of you budding artists don’t have a stylus yet!

If you do eventually decide to get a stylus, know that there are a lot of styli for mobile devices that range in price from $1 to $100.

In my experience, you tend to get what you pay for when it comes to styli. I use a Wacom Bamboo stylus; it has a substantial feel and a decent length.

There are even pressure-sensitive styli that vary the brush stroke width by the amount of pressure you apply as you draw on the screen. Personally, I can’t justify the high cost for these — I’d probably just lose it anyway.

All right, then! Is your drawing finger all warmed up? Great – it’s time to create your first rough sketch.

Creating Your Rough Sketch

Open up Sketchbook Pro on your device, and tap the “+” symbol in the upper-left to add a new drawing. Choose 768×1024 from the list of stage sizes displayed, as shown in the screenshot below. If you are using Sketchbook Express, you won’t have a choice of sizes – it will just open a new drawing.

1

You’ll notice that each stage size selection displays a number in a circle. This refers to the number of layers that you can have in your image. The larger the stage, the fewer layers the device can handle. Not sure what layers are in Sketchbook Pro? You’ll get to that soon enough — for now you’ll start by creating a rough guide sketch.

Sketchbook Express users won’t see the tools on the left, or the palette on the right. You will only see the toolbar on the top. The extra toolbars are really handy, but don’t worry – you can get by without them!

When many people see a great illustration, they often imagine the artist drew complex shapes and lines from the start. However, this is rarely the case. All objects in a drawing can be broken down into simple shapes, which is how you’ll start creating your alien.

To start, select the pencil tool on the left (in Sketchbook Express you’ll find it by tapping the brush icon at the top, then choosing the pencil image) and draw an oval in the middle of your canvas. It doesn’t have to be a perfect oval; just loosely sketch a rough oval about the same size as one shown in the screenshot below:

2

If you’re not satisfied with your oval on your first try, simply tap the undo button and try again. You’re not looking for professional quality here; you’re just creating a rough guideline to represent the body of your creature.

Now draw three rough circles above the oval to represent the eyes. Your drawing will look a little like a paw print, as shown below:

3

Again, don’t worry about making it look great; these guidelines won’t be in the finished product anyway.

Now connect the circles to the oval with some vertical lines. Straight lines in drawings convey a serious industrial mood. There’s nothing serious about this alien, so join the shapes with curved lines instead to give your drawing a playful, cartoon-like feeling, as shown below:

4

Now draw two circles below the oval to represent your alien’s hands. Again, connect them to the oval using curved lines, as so:

5

This alien looks to be in need of a tail. Draw a big, swooping curve off the left side of the alien’s body, as demonstrated in the following screenshot:

6

Feel free to make the tail a little wiggly if you like. This is art, after all — there’s no hard and fast rule about what an alien tail should look like! :]

Inside the oval, draw a rectangular banana-like shape for the alien’s mouth, as shown below:

7

The banana shape should take up about half of the space in the oval. You’ll be adding some details inside the alien’s mouth later, so leave plenty of room to work in there.

Now add some smaller ovals to the two rough hand shapes at the bottom of the drawing, as demonstrated below:

8

These ovals will serve as the alien’s fingers — assuming that aliens have fingers.

Now finish off your initial sketch by using some rough circles and curved lines to give the alien some pupils, teeth, a tongue and some cartoonish eyebrows. Your sketch should resemble the image below:

9

That does it for the rough sketch of your alien. Now it’s time to build up the image by using different layers.

Building Your Image With Layers

Layers are used to overlay bits of your drawing on each other, much like pieces of tracing paper stacked one on top of another. Your alien sketch currently consists of one single layer with your rough outline. Since you’ll need to get rid of these rough guidelines later without mucking up your finished drawing, you’ll add another layer to your drawing that will sit on top of the guidelines.

Tap on the “Layers” button in the upper-right corner of Sketchbook Pro, then tap the “+” sign to add a new layer, as shown below:

10

The new layer is transparent, so you won’t notice anything different about your canvas just yet. But now you’re free to go hog-wild with your mad paint skills — without disturbing your guidelines.

Select the brush tool; if you don’t see it on the screen, tap and hold on a drawing tool in the left toolbar, then select the paint brush in the middle of the top row, as shown below. In Sketchbook Express, tap the brush icon at the top, and choose the brush image shown below.

11

With the brush selected, tap on the “Properties” icon in the bottom center of the stage. This will bring up the Brush Properties window.

Tap and hold in the center of the properties circle, then drag to the left and right to change the brush size. Set the brush size to a medium thickness, around 7 pixels as shown in the image below:

12

Now trace the outline of your alien using the brush tool. Pinch and zoom as required to make the image large enough to trace. Don’t worry about the inside lines for now; just focus on making nice, clean lines to outline your alien. Take your time; you can use the undo tool if you need to redo a brushstroke, or even if you need to revert all of your changes in this layer and use a different brush size altogether.

That’s the beauty of using layers. The rough sketch is on the bottom layer; therefore, it isn’t affected by anything you do on the top layer. Your final outline should look like the image below:

13

Now that the broad outline strokes have been made, you can trace some details on your alien. Open up the Brush Properties window again and shrink your brush size by a few pixels. Pinch and zoom as required to trace your alien’s mouth, fingers, cheeks, chin and arms, as shown below:

14

There’s just a few very fine details left to trace to complete the outlines of your alien. Generally, the smaller the detail you’re trying to outline, the finer your brush should be.

Open the Brush Properties window and shrink your brush size down a few more pixels. This time, trace your alien’s pupils, eyebrows, the lines under the eyes, and teeth, pinching and zooming as required. Your final outline should look like the following:

15

Hey — that’s looking pretty good! It’s amazing how a few brushstrokes can take your drawings from simple guidelines to something recognizable.

Adding Colors to Your Drawing

You’ll use another layer to add some color to your alien. The benefit to using layers is becoming quite apparent; each time you shift gears as you draw, adding a new layer allows you to preserve your work from previous layers.

Add a layer to your drawing, and position it between the sketch layer and the outline layer by dragging the layer to the appropriate position using the handles as shown below:

15b

Your brush tool should still be selected; if not, select it from the tool palette. Choose a nice alien green color from the color palette on the right, as indicated below. Sketchbook Express users won’t have a palette; tap the brush icon at the top and choose a green from the color mixer.

16

Now trace the inside of the alien’s body with the green brush. You may want to use a slightly larger brush for this step; if so, simply bring up the Brush Properties window as before and make your brush a little larger. You don’t need to trace around the eyes or the mouth; you simply need to trace the outside lines of the alien, as shown below:

17

The lines you’ve just drawn create a bounded area which you can fill with color. If you’re a sucker for punishment, you could fill the area by brushing in the color, but there’s a faster way. Tap on the brush icon in the top toolbar and then choose the paint bucket tool, as shown below:

18

Now tap inside the alien’s body. If you joined all of your lines together when you traced the inside of your alien, then the body should fill in entirely in green, as below:

19

If the whole stage turned green, don’t worry! Just use the undo tool and make sure that you’re drawing on the correct layer, and that all of your green brush strokes are connected. If you’re wondering why the alien’s mouth filled in with color, remember that you’re filling the green boundary on this layer only; the black lines of the alien’s mouth exist on a different layer, and don’t affect the actions of the paint bucket tool.

Tap on the brush icon on the top toolbar again and switch back to your paint brush; you’re going to add color to spots that aren’t supposed to be green. Change the brush color to white using the color palette on the right and pinch and zoom so the alien’s mouth fills the screen. Now start carefully painting the alien’s teeth white, as shown below:

20

Once your alien has some shiny white teeth that any alien dentist would be proud of, use the color palette to select a medium red color, and paint in the alien’s tongue. Then select a darker red color from the paint palette and paint in the alien’s mouth. Finally, use a bit of black paint to fill in the alien’s pupils.

Your alien should look similar to the following image:

21

A few carefully chosen details can really bring your alien to life with a hint of personality. Add a few dark green liver spots to your alien’s underside and some white highlights to the eyes, as detailed in the screenshot below:

22

That does it for the basic coloring — in the next section you’ll take things up a notch by adding some shadows and highlights.

Adding Highlights and Shadows

Although your drawing looks really sharp at this point, some highlights and shadows will give it a great deal of depth and make your 2D image pop off the page. These small details are what takes your drawing from the amateur level to something more professional.

Strong contrast between light and dark tones is known as chiaroscuro in the art world — and that’s just what you’ll add to your alien.

Add a new layer between the outline layer and the color layer, like you see below.

If you’re using Sketchbook Express, you’ll notice that you cannot add another layer – you are maxed out at three. But this is no problem – you can delete your original sketch layer since you don’t need it anymore. Add a new layer as usual after deleting your original sketch.

23

The paintbrush tool is far too opaque to add gentle highlights and shadows to your drawing — the airbrush tool gives you the control you need to get the stroke opacity just right. Select the airbrush tool in the tools pane on the left (Express users tap the brush icon at the top to bring up the tools). If it isn’t already in the pane, tap and hold a drawing tool and select the airbrush tool in the top row, second from the left, as shown below:

24

First, add the highlights to your alien. Select a shade of green from the color palette that’s lighter than the alien’s main body color. Using the Brush Properties window, adjust your brush size to about 8 pixels. Drag down from the center of the window to lower the opacity of your stroke to about 50%, as shown below:

12

Now use the airbrush to add some highlights to your alien; don’t worry about staying inside of the lines for now. Brush just inside the dark outline of your alien on the right-hand side of your alien’s major features, as shown below:

25

Note: Confused about where the right spots are to add light? Check out Vicki’s handy shading and lighting guide.

Now select a darker shade of green than what you used on the alien’s body for the shadows. Again, no need to stay in the lines, just worry about adding the shading where it’s needed. Airbrush along the inside of the dark outlines on your alien, as shown below:

26

Now, you can’t really add a white highlight to white, so you’ll approach the eyeballs a little differently than the rest of the body. Pick a light grey from the color palette and add a shadow on the left side of the eyeballs, as shown:

27

To add some shadows and highlights to your alien’s mouth, you’ll need to create two custom colors based on the reds you used to color the mouth and tongue. To create a custom color, tap and hold on the top color in the color palette. When the popup appears, select a darker shade of red by dragging the color selector down towards the bottom of the diamond. Sketchbook Express users will already have been creating their colors this way, since they don’t have a palette.

28

Shade your alien’s tongue around the edges with your new dark red color. Using the same technique as above, create a lighter red custom color by dragging the color selector up towards the top of the diamond. Use this color to add some highlights to your alien’s tongue and mouth as shown below:

29

Your alien’s teeth need same shading treatment that you applied to the eyeballs. Choose the same light shade grey that you used to shade your alien’s eyes and add shadows to each tooth, as follows:

30

Your drawing is just about complete; at this point you don’t need the rough sketch layer anymore. Hide the rough sketch layer by opening the layers panel and tapping on the eye next to the rough draft layer, as shown below:

31

This hides the rough layer from view, and shows only the finished parts of your drawing.

Adding Background Noise

Your alien looks a little lost against that plain white background. Time to add a nice, organic-looking background to your image.

Add a new layer underneath all of your drawing layers except for the rough draft layer, which is now hidden.

If you are an Express user, you are again out of layers to add. However, you also don’t have access to the crosshatching tool we’re about to use, so just skip ahead to the next section, “Cleaning Up Your Drawing”. Or read along and see the cool things you can do if you get Sketchbook Pro!

To move your new layer, use the handles on the side of the layer box to put it in the proper order. Your layer stack should look like the image below (if you are using Pro):

32

The cross-hatching tool will give you a nice textured background for your image. Tap and hold a drawing tool in the tools panel and scroll over to the third pane of tools; each pane is represented by a dot on the bottom of the window. Select the cross-hatching tool, which is second from the left in the top row, as shown below:

33

Increase the brush size as large as it will go in the Brush Properties window and select a dark grey color from the color palette. Fill in the background of your image by making big, diagonal swipes on your image from the top-left corner to the bottom-right corner. Your image should look similar to the screenshot below:

34

That makes the image look a little more finished.

Cleaning Up Your Drawing

Almost done — all that’s left to do is clean up your drawing. Open the layers panel and select your shadow/highlight layer. Next, select the hard eraser tool; if it’s not visible, tap and hold a tool from the tools pane, and select the eraser in the middle row on the far right as shown below:

36

Pinch and zoom as necessary to better see the outline of your alien, and erase all of the shading or highlighting that bleeds beyond the lines, as shown in the example below:

37

Adjust the size of the eraser in the Brush Properties window to make it easier to get into those little nooks and crannies. Take your time with this step; the effort you put into polishing your drawing will really show in the finished product.

Add Your Signature with a Flourish

There! Your nifty-looking alien is complete — it just needs your signature so the world knows who created this masterpiece. Select an appropriate brush, pencil or pen tool and add your best celebrity-style signature.

Once you’ve signed your masterpiece, it’s time to save it and share it with the world. Tap the icon in the upper-left hand corner and then tap Save, as so:

38

Once your image has been saved, you can press the “share” button at the bottom of the app and export it to your Photo Library, iTunes, Flickr, Facebook, Dropbox, Twitter, email, or even print it, as shown in the screengrab below. (Express users will have fewer choices)

39

When you export your image, the individual layer information is saved as well so you can open up your image on your computer and work on it Photoshop or Sketchbook Pro.

Think about the possibilities — you can sketch out your ideas on your mobile device or tablet during your daily commute, and and load it up on your computer later to add some finishing touches. Neat! :]

Where to Go From Here?

You’ve started to learn to draw on iPad, and have made a cool alien – now is your chance to play around and sketch some more!

If you’re looking for some inspiration, why not try drawing some characters from your favorite cartoons, video games, or comics? After all, practice makes perfect.

And if you’d like to see more in this series, please let me know what you’d like to learn to draw on iPad next! And I’d love to see your own creations – if you make anything cool, please post some links to your masterpieces in the forum discussion below.

Greg Pugh

Greg is a mobile app developer, animator, and Flash developer for his company GP Animations. He's also a children's book author and illustrator. When Greg isn’t writing children’s books, he’s playing guitar, watching hockey, and enjoying a dram of scotch with a cigar.

User Comments

14 Comments

  • Nice tutorial! Could you make a tutorial on how to draw for animations, for example a guy attacking with a sword or a guy walking. It's tough to draw the same sprite in different positions and be a smooth animation or even be the same size.
    hasflesh
  • hasflesh wrote:Nice tutorial! Could you make a tutorial on how to draw for animations, for example a guy attacking with a sword or a guy walking. It's tough to draw the same sprite in different positions and be a smooth animation or even be the same size.


    For animations, I use Adobe Flash. Not only is it specifically designed for animation, but it also allows .png sequence exporting, which can be directly imported into your sprite sheet generator of choice. I'm well-aware that most app developers have no reason to spend ~$1000 on an Adobe Flash CS6 license, but Adobe Flash CC is now available for $20 a month. Would that be something you'd be interested in learning?
    GPAnimations
  • Or were you hoping to do it in Sketchbook Pro? For that you can do a drawing, copy the layer, change slightly, copy that layer, change slightly, etc. Then you would export each layer individually and name them "drawing001", drawing002", etc. You can then import those drawings into your sprite sheet creator of choice.
    GPAnimations
  • That was an awesome tutorial. I did the tutorial and ended up with something that looks approximately like yours! Not bad for someone who can't draw. Need to work on my curves though!

    image.jpg
    iOSBrett
  • iOSBrett wrote:That was an awesome tutorial. I did the tutorial and ended up with something that looks approximately like yours! Not bad for someone who can't draw. Need to work on my curves though!

    image.jpg



    That's awesome! At first glance, I thought you had attached the image from the tutorial.
    GPAnimations
  • Can you do one with Adobe Ideas

    Its a free drawing app!
    mazza
  • mazza wrote:Can you do one with Adobe Ideas

    Its a free drawing app!


    Let me talk to Ray and see what he thinks. I've actually done quite a few drawings with Adobe Ideas, it's a fun app.
    GPAnimations
  • Thank you so much for this tutorial. You've made drawing so easy on the ipad. Keep it up!
    violetpy91
  • Using flash, is there a way you can draw using your iPad as the canvas ? - maybe with Intuos Creative? Stylus.
    smick
  • smick wrote:Using flash, is there a way you can draw using your iPad as the canvas ? - maybe with Intuos Creative? Stylus.


    It might be possible using software such as Splashtop running on both your computer and iPad. Splashtop lets you control your computer from your iPhone or iPad, so technically, you could mirror your desktop to your iPad, open Flash and then draw. Whether or not the results would be desirable, I'm not sure.
    GPAnimations
  • Thanks Ray,
    Now I have the basic idea but I still don't know how to get rid of the cross hair that positions the actual drawing higher than I want to go!!!
    fairgo4all
  • rwenderlich wrote:This is the official thread to discuss the following blog post: Learn to Draw on iPad


    Thanks Ray...how do I get rid of the cross hair x that positions the drawing line higher than my finger?! :?

    Cheers

    John
    fairgo4all
  • Nice tutorial, but if I may throw my hat into the ring. My App, Skribl, is great for developers too. Plus, because it creates in vectors, it's useful for creating buttons and sprites that one might need to resize, reuse, or edit in some fashion later on. In fact, I created all the buttons for my app, within my app. Most of the buttons started out as fonts, that were outlined and deconstructed for to make things like arrows and scissors and such. And it's fantastic to create the objects that will eventually wind up on the tablet in an app, on the app itself, because you can size it appropriately and see what it will look like before exporting it over to Xcode.
    vicshul
  • Excellent tutorial! It's so helpful to developer has never learned painting, like me! I had practice according to this tutorial step by step. My alien is not such cute and good looking, but I will practice more. I appreciate there will be more tutorials like this, show us how to draw more complex roles, cartoons, or even scenes with more background, roles, decorates and the like. Thanks for your helpful tutorial again!
    nova_lin

Other Items of Interest

Ray's Monthly Newsletter

Sign up to receive a monthly newsletter with my favorite dev links, and receive a free epic-length tutorial as a bonus!

Advertise with Us!

Vote for Our Next Tutorial!

Every week, we alternate between Gaming and Non-Gaming tutorial votes. This week: Non-Gaming!

    Loading ... Loading ...

Last week's winner: How to Make a Simple 2D Game with Metal.

Suggest a Tutorial - Past Results

Hang Out With Us!

Every month, we have a free live Tech Talk - come hang out with us!


Coming up in October: Xcode 6 Tips and Tricks!

Sign Up - October

Our Books

Our Team

Tutorial Team

... 52 total!

Update Team

... 14 total!

Editorial Team

... 22 total!

Code Team

  • Orta Therox

... 3 total!

Subject Matter Experts

... 4 total!