Drawing in Anime Studio

Exclusive offer: get 50% off this eBook here
Learning Anime Studio

Learning Anime Studio — Save 50%

Bring life to your imagination with the power of Anime Studio with this book and ebook

$26.99    $13.50
by Chad Troftgruben | March 2014 | Open Source

This article is written by Chad Troftgruben, the author of Learning Anime Studio. Anime Studio offers a large selection of tools to help you craft the perfect character, environment, or prop. This can be a bit overwhelming if you are unfamiliar with Anime Studio's interface or drawing on a computer. This article will help ease you into the process.

In this article, we will cover the following topics:

  • Mouse versus tablet drawing
  • Vector and raster graphics
  • The Draw and Fill tools

(For more resources related to this topic, see here.)

Mouse versus tablet drawing

If you're accustomed to drawing traditionally with a pen or pencil, you will discover quite quickly that drawing with a mouse requires a different skillset. The way a mouse moves, the difference in control, and the lack of intimacy can really take some time getting used to. While initially overwhelming, it is possible to map your mind towards mouse drawing.

A graphic tablet is like a digital drawing pad that allows you to sketch on screen using a utensil that resembles a pen or pencil. What's nice is that Anime Studio was built to work with certain graphic tablets, thus making Plug and Play easy.

We will be creating cartoon assets with a mouse. This is the most universal way as most users have this accessory for their computer. In addition, we cover both freehand and point drawing styles. We will be majorly using point drawing.

Learning about Wacom tablets

Wacom is a very well-known brand of graphic tablets which work well with Anime Studio. This is because Smith Micro Software teamed up with Wacom while building Anime Studio to deliver seamless compatibility. What's great about Wacom tablets is that they correspond to the amount of pressure you apply to your lines. For instance, if you apply a lot of pressure at the start of a line and then end the line with light pressure, you will see a difference in width just as you would with a real pen or pencil. This option can be turned off in Anime Studio, but most artists welcome it. If you're interested in tablet drawing, Wacom has many different tablets varying in size and features. You can visit www.wacom.com for more details. The following is the image of a Wacom tablet:

Understanding the basics of vector and raster graphics

Before we begin drawing in Anime Studio, it's important to understand the differences between vector and raster graphics. Anime Studio allows you to output both types of graphics, and each has its strengths and weaknesses.

Vector drawings are created whenever you use a drawing tool in Anime Studio. This is also the main format for Adobe Flash, Toon Boom, and Adobe Illustrator. Vector format is a popular choice and has been dominating the Internet cartoon scene for several years.

The following image is an example of a vector image. Notice how all the lines retain a sharp quality.

Vector graphics tend to have smaller file sizes compared to equivalent raster graphics. This not only makes streaming embedded Shockwave Flash (SWF) easier, but also keeps your project files lower in size, thus freeing up more space on your hard drive and cutting down on load times.

Raster or bitmap images are made up of pixels. Common file types include JPEG, BMP, PNG, and GIF. Basically, images you take with your camera, found on the Internet (at least the majority of them), or created in Adobe Photoshop are raster graphics. Raster graphics can be imported into Anime Studio and used for different functions. While they can contain great detail, raster graphics have many disadvantages when it comes to animation. As they are pixel-based, if you enlarge or zoom into a raster graphic past its original size, you will lose the image's quality. They also tend to bloat project file sizes up; this is due to the pixels needing more information to display the image.

Many artists do find raster images worthwhile; additionally, you have the ability to convert raster images into vector graphics if desired. This method is called tracing, and while it can be useful, it's definitely not 100 percent effective, especially when trying to make the image work with animation. The following image is an example of a raster graphic. Compare it to the previous vector image. Note how the raster graphic appears blurry or pixelated in comparison.

Now, you must be wondering which image type is the best. There is really no right or wrong answer to this question. It all comes down to personal preference and what you plan to do with your cartoon. We will explore a few uses of bitmap images, but the primary focus will be on creating vector art through the drawing tools.

Exploring the Draw and Fill tools

As we start working with the drawing tools in this article, it would be best for you to have a new document loaded up so that we have room to play around. In order to do that, navigate to File | New.

New documents always open with a vector layer on the right-hand side Layers Panel, labeled Layer 1. This is perfect for us as all of the drawing tools require a vector layer to be used.

Some drawing tools have features that can be adjusted at the top of the Anime Studio window. We will refer to this area as the top bar.

The drawing tools are located on the left-hand side of your screen by default. The tools we will be looking at are divided into two panels: Draw and Fill. If you go in order while learning these tools, it may make sense, but we're simply too free-spirited for that. We will be going back and forth between these tools as some of them directly benefit the usage of others.

Drawing shapes and lines with the Add Point tool

The Add Point tool allows us to create lines and shapes using a series of points. All of Anime Studio's tools work with a point system, but this tool arguably gives you the most control in this regard. Points can then be moved or deleted depending on your needs. The following screenshot shows the location of the Add Point tool on the toolbar. As you can see, it looks like a curved line with a point at the end. You can also press the A key on your keyboard to select the tool.

To get started, perform the following steps:

  1. Go to the top of your toolbar and click on the Add Point tool. Next, you will find a few options just below your File menu at the top of the Anime Studio program window. This is your top bar area. Please make sure Auto-Weld and Auto-Fill are both selected (this will be indicated by a check mark next to the corresponding option).

    Autowelding ensures that the two points we are joining will snap or weld together. Autofilling ensures that once two points are joined together to complete an enclosed object, the drawing will fill in with the colors from your Style palette. Try deselecting these options and redoing this exercise later on, to see what happens!

  2. On the right-hand side of your screen is the Style palette. Right below the title, you will see two colors, each labeled with Fill and Stroke. Click on the Fill color swatch and select a color of your choice from the options given. With the Color Picker window, you have the ability to click on a color, adjust the color range, modify transparency, as well as adjust your colors numerically for precise control.
  3. Once you have selected your color, click on the OK button.
  4. Now, select the Stroke color swatch and repeat the preceding steps. Try to pick a different color than that of the fill. The following screenshot shows the Style palette and Color Picker:

  5. Move your cursor somewhere on the blank canvas. Click and hold down the left button of your mouse, drag in any direction, and release. You should now see two points connected with a link. Now, we are simply seeing an outline, or reference for this object. No physical line has been created yet.
  6. Place your cursor on one of the two points. When correctly placed, your Add Point drawing tool will be highlighted in green.
  7. Now, click and hold down the left button of the mouse and drag anywhere to add to your line. If you keep the left button of the mouse pressed and move the point around, you should notice that the placement of this point affects the line curvature from the other two points. If you don't like this effect, you can always select the Sharp Corners option on the top of your window to create perfectly straight lines from point to point. Release the left button of the mouse once you've found a spot for your point.
  8. By repeating the preceding steps, you can continue to add interconnecting points to create an object; complex or simple, the choice is yours. If you desire, you can add points in between other established points by simply clicking on the line that interconnects them.
  9. To complete your object, you must overlap one point over another. Click the left button of your mouse, hold it, and drag the mouse to your first point.
  10. Once the area is highlighted in green, release the mouse button and notice how the object fills in with the colors you have selected from the Style palette. Have a look at the image in the following screenshot for an example:

The Add Point tool offers a lot of control and is popular with mouse users. It may take some time to get used to, but if you prefer precision, practice will definitely pay off. This tool will be used quite a bit when we start drawing our assets. However, there are other tools that can get the job done, which we will be exploring momentarily.

Freestyle drawing with the Freehand tool

The Freehand tool allows us to draw in Anime Studio as if we were using a pen or pencil. This tool is a favorite amongst tablet users as it allows for absolute freedom of movement. It offers benefits for mouse users as well, especially if they plan to create a sense of stroke width variation. Just keep in mind, even though you can draw freely with this tool, you will still be creating points to make up your lines and objects, just like the Add Point tool. Just note that since Version 10, points will be hidden when using freehand drawing tools, to make the workspace less cluttered. In order to view and edit the points, you will need to select the Transform Points tool. The Freehand tool is the first tool in the second row (it looks like a pencil). You can also use the F key on your keyboard to select this tool. For your reference, you can see the location of this tool in the following screenshot:

For this exercise, you can keep the document you created for the Add Point tool open. If you need more room to draw, feel free to create a new document. If you would like to save the current document to work on later, go to File and click on Save before creating a new document. Now, let's start drawing!

The following steps will guide you on freestyle drawing with the Freehand tool:

  1. Click on the Freehand tool. At the top, where you have your tool options, be sure that Auto-Weld, Auto-Fill, and Auto-Stroke are checked. Before trying this tool out, let's check out some of the other options we can adjust with the Freehand tool.
  2. At the top, to the left-hand side of the Auto-Fill and Auto-Stroke settings, is a button labeled Freehand Options. Click on the button and a new panel will appear, as shown in the following screenshot:

  3. The Variable line width options allow you to change how the Freehand tool acts according to the pressure from your graphic tablet utensil. You can choose None, which will create a line with a consistent width; Use pen pressure, which detects how hard you are pressing on your tablet when drawing and adjusts the width accordingly (hard for thick, soft for light); or Random, which will randomize the line width as you place the points down. These options will work with a mouse, with the exception of the Use pen pressure setting.
  4. In the same panel, you can also adjust the percentage of variation of line width. The higher the percentage, the more dramatic a shift you will have for your line widths. Finally, you can dictate if you want your freehand lines to taper at the start and end. This can be useful, especially if you're using a mouse and want to simulate the freehand pressure-sensitive look.
  5. Once you have picked the appropriate options, let's start drawing! Place your cursor on the canvas, preferably outside of the other object you drew with the Add Point tool, hold down your left mouse button, and drag to create a line. You will notice that whichever settings you picked in the Freehand Options panel will be reflected in your line.
  6. Since we have selected Auto-Weld and Auto-Fill, we can automatically create closed objects. Try drawing an oval with the Freehand tool. Your beginning and end points should snap together, creating an enclosed and filled-in object. You can view an example of a line and shape with the Freehand tool in the following screenshot:

If you are drawing with a tablet or are familiar with traditional drawing methods, the Freehand tool may be a better choice over the Add Point tool. As we start to draw characters and props, the Add Point tool will be referred to a lot. However, don't be afraid to use the Freehand tool in its place if that's what you're more comfortable with. You can always combine these tools too. The more options you have, the better!

Learning Anime Studio Bring life to your imagination with the power of Anime Studio with this book and ebook
Published: May 2014
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Creating perfect shapes with the Draw Shape tool

While we have the ability to draw whatever we want with the Add Point and Freehand tools, sometimes, being able to easily draw a specific shape can help save time. The Draw Shape tool allows us to draw different shapes, including rectangles, ovals, and stars. The tool looks like a rectangle, oval, and triangle overlapping one another, as shown in the following screenshot. You can also use the S key as a shortcut for this tool.

Like before, you can keep the same document open if you have room to draw, or you can create a new document. Let's start drawing shapes!

The following steps will guide you to create perfect shapes using the Draw Shape tool:

  1. Go over to your toolbar and select the Draw Shape tool. At the top, you should have six shapes to choose from. Pick a shape that you would like to draw, select Auto-Stroke and Auto-Fill if you wish to automatically fill in your shape, and place the cursor on a blank part of the document.
  2. Click and hold down the left mouse button, then drag to create the shape. Depending on where you drag, the appearance of the shape will alter. Releasing the button will create the shape, apply your stroke, and fill the settings if you have those corresponding options selected. Now, you will have a shape drawn like the image in the following screenshot:

While we can draw shapes with the Add Point or Freehand tools, the Draw Shape tool can streamline the process. You can always use the Add Point tool to add points to your shapes to create more advanced objects.

Are you looking to create a perfectly proportionate shape? When using the Draw Shape tool, hold down the Shift key on your keyboard. This will lock the shape, so you can draw a perfect square, circle, triangle, or star.

Adjusting your bends with the Curvature tool

There will be times while drawing in Anime Studio when a line or curve isn't shaped quite right. While you can move the points of the line to create the desired shape, the Curvature tool allows us to straighten and bend lines with ease. To have an easier time accessing this tool, refer to the following screenshot. The C key acts as a shortcut to this tool.

We will reuse the shape created with the Draw Shape tool for this exercise. If the shape has been removed, please draw another one so that we have something to reference. The following steps will give you an idea about using the Curvature tool:

  1. Select the Curvature tool from the left-hand side toolbar. Find a point you would like to adjust. Click on the point once so that it is highlighted in red color. Now, hold down your left mouse button on that point. If your shape is rounded, moving to the left will straighten the line(s) that make up the shape. Moving to the right will round the line(s) out. Try moving in both directions to see the different effects.
  2. In the top bar, you have the ability to make a shape completely rounded or pointed by clicking on the corresponding button. This can save time if you are looking to go from one extreme to another. You can see that the star shape in the following screenshot has had the Curvature tool applied to four of its points:

You can create interesting shapes using the Curvature tool. Additionally, it can help perfect a shape's design if you are having issues with moving points around. Be sure to keep it in mind when working on your own projects.

Using the Select Points tool, you can easily alter the curvature of several points at once. All it requires is highlighting the desired points and then repeating the preceding steps.

Altering points with the Transform Points tool

Up to this point, we have applied points to the canvas to create lines and shapes, but what if we want to alter points that have already been applied? The Transform Points tool allows us to select, move, scale, rotate, and delete one or more points. The tool looks like a crosshair and is the second one in your list of the Draw toolbox. The T key acts as the shortcut key for this tool.

If you are a longtime user of Anime Studio, chances are you will recall that moving, scaling, and rotating points consisted of using three different tools. Version 10 has taken these functions and condensed them into one tool: Transform Points. The principles are the same, and you will discover quickly that it can help speed up your workflow, cutting down on time when it comes to selecting different tools.

The following screenshot shows the Draw tool panel with the Transform Points tool highlighted:

You can keep the shape, which we have been using, open for this exercise. If you don't have a shape on your screen, simply create one using the Draw Shape tool from the left-hand side toolbar.

The following steps will guide you to select, move, and delete points using the Transform Points tool:

  1. Select the Transform Points tool from the top-left toolbar.
  2. Try selecting a point from the shape on screen. To do this, simply click on the point. The point you have clicked on should turn red in color, which means it is currently selected.
  3. Holding down the left mouse button on this point, try dragging it around on the canvas. As you alter the point's position, you will also alter the entire line or object that the point is part of. If you want to restrict movement of the point or object to the x or y axis, hold down Shift when moving your points.
  4. If you were to click in the middle of an object (such as an oval) or in between points on a line, you will end up selecting all of the points making up that object. You can tell this by the fact that all the points are highlighted red. This can be useful if you want to edit a bunch of points at once. To deselect your points at any time, simply click off the shape or go to Edit and click on Select None.
  5. When multiple points are selected, you may have noticed new options appear on your top bar. The most used of these are Flip Horizontally and Flip Vertically. If you need to quickly flip an object or points over from one direction to another, definitely give these buttons a try!
  6. Select another point on your shape. Once that point is red, hit the Delete key on your keyboard. The point will disappear. Notice how Anime Studio compensates for this lost point by connecting the two nearest points together. This can alter the look of your shape, so be careful! This method is useful if you want to simplify an object or remove an unwanted point. You can see it really changes the look of our star, as shown in the following screenshot:

What we're using here is a simple shape, but as you start working with your own creations, you will discover all of what we'll be learning here is applicable.

If at any point, you make a mistake when working on a project, simply go to Edit and click on Undo (Ctrl + Z on Windows and command + Z on Mac). You can undo several previous actions. Be careful though as there is a limit to how many backward steps you can take.

Sometimes, it's necessary to alter the size of a drawn object. When using the Transform Points tool, two red boxes will appear around the selected point or object. The second box contains nine points or handles that look like empty circles. You will use these to resize your shapes horizontally, vertically, and proportionally.

You can leave the current document open and use one of your existing objects as an example for this exercise. Making a new document and drawing a shape will suffice as well.

The following steps will guide you to scale points using the Transform Points tool:

  1. With the Transform Points tool selected, click on your object to select it.
  2. Note the two outlines that appear. You will want to focus on the nine open circle points that border the second outline. By clicking-and-dragging on either the left or right points of the rectangle, you will be altering the horizontal properties of the object. If you are looking for a squash effect, you can try holding on the Alt key when moving these points around.
  3. The top and bottom points will adjust the vertical properties, and any of the four corners will allow you to resize both the horizontal and vertical properties of the object.
  4. If you want precise control over the size values, you can enter numbers for both the horizontal (x axis) and vertical (y axis) properties on your top bar. As you can see in the following screenshot, things appear to be squished or distorted:

There will be times when you are working on a project where an object will be too small or big for what you want to achieve. Scaling points is invaluable in cases like this.

Now, let's talk about rotating points. Why would you want to do this in the first place? Rotating can be useful if you need to tweak a portion of a drawing or completely rotate an object. You can keep the document we have been using open. However, if you feel things are starting to become cluttered, feel free to quickly make a new document and create an object with the Draw Shape tool for us to use in this exercise.

The following steps will guide you to rotate the points using the Transform Points tool:

  1. Select the Transform Points tool on your left-hand side toolbar. Select the center of one of your enclosed objects; this will select all the points in this object. Move your cursor outside of the object in between the two outlines. Hold down the left mouse button and move up and down. Notice how the object rotates depending on your mouse position.
  2. If you wish, you can adjust the rotation numerically by entering a number between 0 and 360 on your top bar.
  3. Holding down Shift and rotating will allow you to rotate in 45-degree increments. The image in the following screenshot is the result of point rotation:

Summary

There are a lot of tools in Anime Studio and learning all of them can be an overwhelming process. The key is to pick up certain tools that will be used most (such as the Add Point, Freehand, and Paint Bucket tools) and slowly learn the others as they become needed in your projects. Finally, keep practicing! Like anything, the more you practice, the easier things will get.

Resources for Article:


Further resources on this subject:


Learning Anime Studio Bring life to your imagination with the power of Anime Studio with this book and ebook
Published: May 2014
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Chad Troftgruben

Chad Troftgruben is a freelance media designer who has been working with Flash, Anime Studio, and other various software for a number of years. By applying methods from his cartoon animation and filmmaking background, Chad provides a simplistic yet creative approach to each lesson he teaches.

Beginning in 1996 with a program called Microsoft's 3D Movie Maker, Chad cut his teeth on the basics of animation, eventually graduating to Flash in 2002 and then Anime Studio in 2010. Live-action filmmaking was also a big part of Chad's life as he made short films with his friends throughout high school and college.

In 2007, Chad started providing free online video tutorials on Flash and other software. Since then, his tutorials have been viewed by millions of people, including entrepreneurs, teachers, students, and many others. In 2010, Chad was hired by LearnKey to present their Flash CS5 learning series, which was a six-hour course detailing the entire feature set of the software. Since then, he has been keeping busy with various animation and tutorial projects, such as creating Smith Micro's official Anime Studio 10 tutorial series and authoring for Virtual Training Company.

Books From Packt


Android 3.0 Animations: Beginner’s Guide
Android 3.0 Animations: Beginner’s Guide

 jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

 jQuery 2.0 Animation Techniques: Beginner's Guide
jQuery 2.0 Animation Techniques: Beginner's Guide

 Blender 2.5 Character Animation Cookbook
Blender 2.5 Character Animation Cookbook

Unity 4 Character Animation with Mecanim
Unity 4 Character Animation with Mecanim

 Lightning Fast Animation in Element 3D
Lightning Fast Animation in Element 3D

Instant Silverlight 5 Animation [Instant]
Instant Silverlight 5 Animation [Instant]

 Learning Adobe Edge Animate
Learning Adobe Edge Animate


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software