Flat Illustration Character Design: Mobile Phone User

Hey, Pixels! In this week’s video, I’ll show you how to create this flat illustration of a woman looking at her phone. This illustration style is very trendy and I’ve seen it on many websites and landing pages. It’s also super easy to create yourself. This tutorial was inspired by an illustration found on this website.

Gold Membership

Gold Members, feel free to download all the design assets related to this tutorial below, including the paper sketch, sketch photo and illustrator document:


 
Members-only access. To view content, become an XO PIXEL Gold Member!
 

Step 1: Draw!

The first step in this tutorial is to simply draw! I’ve already sketched this drawing on a piece of paper using a regular pencil.

As you can see, I’m by no means the best at drawing which is why digital illustration is the best thing to happen to those of us that suck at drawing!

So just know that it doesn’t have to be perfect because we’ll smooth out any rough lines in Adobe Illustrator.

Character Illustration Sketch
Character Illustration Sketch

Step 2: Paper to Artboard

Once the sketch is complete, I’m going to take a photo of it with my phone, and then apply a photo filter that will make the pencil lines darker and more defined. Once that’s done, I’ll share it to my Google Drive so that I can easily download it to my computer.

Step 3: Upload & Place

In Adobe Illustrator, create a new document that’s for the Web and select the “Common” preset that’s 1366x768px.

As you can see, I’ve added the color pallet onto the artboard by drawing six color filled circles. Having a color palette right on the artboard makes it easier to add colors to your illustration—you’ll see how later on in this tutorial.

I’ve also placed the illustration photo onto the artboard.

Both the color palette and illustration are on the same layer that has been locked to prevent it from accidentally moving.

Paper Sketch to Artboard
Paper Sketch to Artboard

Step 4: Pen Tool Trace

Select the pen tool. Since we’re going to be tracing the illustration, I’m going to change the stroke color to a more prominent color, in this case, red, and then I’ll increase the stroke weight to 2pt. Now, simply trace over the shapes in our illustration with the pen tool.

You’ll notice that instead of tracing the drawing into one single shape, I’ve divided our illustration into individual shapes into their own separate layers. I’ve also locked each layer once it’s complete so as not to move them around by mistake as I trace the other shapes in the illustration.

Also, instead of using the pen tool to trace the mobile phone, I decided to use the rounded rectangle tool and position it accordingly to easily create the shape of a mobile phone.

Tracing Illustration with Pen Tool

Step 5: Smoothing Tool

Now that we’ve traced our illustration using the pen tool, it’s time to smooth out any rough lines using the smooth tool. Since each shape is on its own layer, I’ll toggle layer visibility on each layer as needed.

Step 6: Apply Color

Select the shape, grab the eyedropper tool (I), and select the color you wish to fill the shape within the color palette.

Right now, the “hair” layer is behind the “body” layer, so I’m going to arrange the layer order so the hair layer goes on top of the body. I’ll also do the same for some other layers.

Color Illustration with Eye Dropper Tool

Step 7: Additional Adjustments

I noticed that the hand area needed some additional adjustments, so by using a combination of the pen tool and the direct selection tool, I adjusted the hand area so that it fits properly on the mobile phone shape.

I’ve also done some additional adjustments to the face, and body shapes.

Step 8: Background Shapes

The last and final step in this tutorial is to add some additional fun background shapes.

First, draw a circle by grabbing the ellipses tool while holding down shift. Color it yellow and place it on the left-hand side of the illustration. With the circle selected, I’ll hold-down option my keyboard to duplicate it, then I’ll shink its size and color it pink.

I’ll also draw a “blob” by grabbing the ellipse tool to draw an oval. Then, I’ll grab the direct selection tool and adjust the anchor points and handle to add prominent curves. Color the circle teal and reduce the opacity to 20%.

I also decided to add three rectangles on the mobile phone and color them so that they look like text messages.

Adding Background Shapes to Character Illustration

Conclusion

There you have it! You’ve just turned this sketch drawing into a digital illustration, right in Adobe Illustrator! Be sure to give this video a thumbs up and subscribe to XO PIXEL for more great videos just like this one. As always, thank you for watching! I’ll see you in the next video.

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.