How To Hand Draw Different Kinds Of Animals Illustrated Drawings

sixteen min read
Graphics, Illustrator, Photoshop, Sketching

Quick summary ↬ Have you lot tried cartoon animals from circles? It can exist quite a claiming, especially if you can only employ a particular amount of circles. Dorota explains how she created 13 animals with only 13 circles.

If you can brand a bird out of circles, then you lot can probably make all sorts of animals. I wanted to add something more design-based to my portfolio, so I made that my personal challenge. The thought was to draw animals from exactly 13 circles, and I decided to match that number by making 13 animals. This makes for a nicer title for the project, and information technology helps to get others to share it around the web, too. Knowing what you want to create early helps, because and so all you have to do is figure out ways to go far happen.

The cartoon claiming mostly consisted of three Adobe applications: Photoshop, Illustrator and Later Effects.

Farther Reading on SmashingMag:

Beautiful Photoshop Illustrations By Artists Around The World
Drawing A Cartoon In Illustrator
Create a Cute Fiddling Tiger in Illustrator
How To Create A H2o Lily In Illustrator

Getting Started: Sketching

I prefer to sketch things on paper first, simply you can do and so digitally likewise. First, I chose some animals that I didn't call up would be extremely difficult to draw. And so, I chose prominent features of those animals to focus on. I besides Googled logos, designs and illustrations of the animals to see what features other people emphasize. When limited to xiii circles, you lot can't fit everything! For example, with the monkey, all I could fit were the ears, the long tail and the outline around the eyes, leaving me with few circles to play with, just that's OK.

While sketching, I kept track of the number of circles I was using, counting one for every bend. If I had too many circles, I would examine them to see if ii curves could somehow come from i circle. For case, in the part of the giraffe below, the orangish circle serves as both the acme of the left horn and the lesser of the ear:

drawing challenge — (View large version)

More than afterwards leap! Continue reading below ↓

Illustrator

Later I had a sketch I was happy with, I photographed it or scanned it to my calculator.

Before I began, I decided on a size for the project. This is important for consistency and to keep things moving quickly in Photoshop and Later on Effects. I chose 8 × 10 inches at 300 DPI (or PPI), just in instance I decided to impress them after, considering that'due south a common impress size. I also felt the ratio would be adept to turn them into animated GIFs later.

Here are the first steps to have in Illustrator:

Open your sketch, or drag or paste it into your sized document. Select the sketch, and click Ctrl + ii to lock information technology in place.
Draw circles using the Ellipse tool (L); to make perfect circles, hold Shift while dragging. You tin notice the ellipses by holding or right-clicking the Rectangle tool. Select your circle(due south), and set the fill to none, and cull a minor stroke to piece of work with. Hide the sketch layer once you've finished by clicking the centre.
Select all of your circles by enabling the Selection tool (V) and dragging from i corner over the unabridged screen. Resize them to the size y'all want the animal to be in the document. This is of import if you want to save fourth dimension later.
With the circles however selected, we're going to make a fill-in by clicking Ctrl + C, so clicking "New Layer," then clicking Ctrl + F. This pastes in the exact same location. Hide the backup layer.
Click the Shape Builder tool (Shift + Thousand), cull a fill color (removing the stroke), and click in the parts of the circles that you want to fill in.
Once you lot're happy with the shape, isolate all the filled shapes from the circles by clicking on one and and then going to menu "Select" → "Same" → "Fill Color". Once they're selected, you tin simply re-create them, select & delete everything in the certificate (we backed upward the circles), and press Ctrl + F to bring dorsum just the filled shapes.

Instead of the Shape Builder tool in step 4, you lot could also utilize the Live Pigment Saucepan tool (K), which allows you to move the circles safely while keeping your area filled in, and so you lot would aggrandize at the very stop.

Sometimes the curves I sketched didn't perfectly form a circle, so I'd have to go dorsum and movement a few curves around or change their sizes. If you merely want to suggest some shapes in your animal (rather than beingness explicit), you may have to add more circles. For example, sometimes I would want an area to be cutting out, such equally the inside of the fox tail. Other times, I would want an area to be a different color from the remainder of the shape, such equally the toucan's beak. There are many ways to create separation.

At this point, I had the fauna (still in pieces), a hidden layer with the circles, and a hidden layer with the sketch.

Sometimes, at this point, I would turn the animate being into ane solid shape. To do this, select the beast, open the Pathfinder console (in the menu, "Window" → Pathfinder, or Ctrl/Cmd + Shift + F9) and click the "Unite" pick. The paths might have small flaws, but you lot can usually fix those using the Direct Selection tool (A), which allows you to click individual anchors and paths to easily motility, modify or delete them.

Frequently, yet, rather than turning an animate being into a solid shape, I would add a bit of shading using gradients. I would often add these to i section of the animate being, and I would use the same method as above to select a couple of pieces of an brute and merge those pieces into ane (often, my animals would be in two or iii pieces by the cease).

In this example, yous can see that I used different shading methods on unlike parts of the monkey. In a higher place the monkey'southward eyes, I used the Mesh tool (U) to go a gradient that follows the curves. A fast way to add a mesh is to click an object and go to "Object" → "Create Gradient Mesh." I'm non an expert with this tool yet, and then my effort is more of an experiment.

Underneath the monkey's face up, I simply used a regular slope. A fast way to apply a gradient to an object is to click the object and press the menses key (.). So, in the menu, go to "Window" → "Slope" to open up the Gradient console and change the settings of that gradient.

Because I knew I would be bringing the animals into Photoshop after, I simply shaded them with shades of gray. This mode, if I wanted to use dissimilar blending modes with colors and textures, the hues that I chose would be retained.

Photoshop

Create a certificate in Photoshop of the verbal size as your Illustrator certificate (this is to make things like shooting fish in a barrel and is not a requirement). I also stayed with the RGB colour space because my focus is the web, but I can ever convert to CMYK afterward if I want to print. Before bringing in the animals, I would create the background get-go.

I started with the colors. There are many ways to create gradients. I started with a white background and and so but stacked a few transparent layers of lightly brushed colors. Sometimes I would further tweak the colors using an Adjustment Layer such as "Curves" (experiment to find what works best for you).

Once you've got the colour gradients downwardly, it's time to add together some texture! I experimented with many different textures that I downloaded online — you can find many by searching for terms similar "gratuitous paper texture." There are as well some nice textures on Subtle Patterns, only they're usually small image tiles meant to be repeated, and I personally don't similar repeating ones.

I frequently used a subtle newspaper texture every bit a base and so used other textures to bring out more light and nighttime speckles. It's easy to bring out speckles from a texture using Curves or Levels. All of my textures are overlaid using unlike blending modes, as well every bit past experimenting with opacity.

Below are the dissonance layer and the texture image that I used for the background higher up:

And below are the layers for the background, forth with my settings for each Curves layer. The really crazy curves were the ones I used to bring out different parts of the textures, such as the speckles.

As I said, experiment with Photoshop'due south functionality until yous're happy. Here are the layers for this background, starting from the bottom:

a blank white background;
lightly painted colors at a small opacity using the castor;
racket ("Filter" → "Noise" → "Add Noise") at a 41% "Overlay" blending fashion, sometimes enlarged or blurred;
a texture layer with "Color Burn";
a Curves adjustment layer clipped to the texture layer, to create a high contrast for the speckles in the texture;
a texture layer again, rotated to a different position and a "Colour Burn" of forty%;
a Curves layer clipped to the texture, this time bringing out the textures in a different fashion;
a bluish layer set to "Divide" at 37%;
an overall Curves layer to brighten the unabridged image (including the monkey).

One time my background was fix, I brought in the creature every bit a smart object. Use smart objects whenever possible. I just copied and pasted the animal from Illustrator. Considering the documents are the aforementioned size, the fauna should be pasted into Photoshop at the same size. I didn't resize the animal in Photoshop, so that I could easily align the circles in a farther footstep.

Hither are the layers I used for the monkey:

a monkey smart object;
a postage stamp of only the background (Ctrl + Alt + Shift + E), clipped to the monkey, at "Multiply";
another postage of groundwork, clipped to monkey, with a "Hard Light" of 34%;
some other stamp of background, clipped to the monkey, with "Multiply" set to 34%;
a Curves layer, clipped to the monkey, to brighten it up;
a "Hue/Saturation" layer, clipped to the monkey, to make the hue a more blue-purple.

Here are a few points in the evolution of the monkey:

Illustrator Again

It'south nigh fourth dimension to animate! I blithe in Afterward Effects, although many programs will exercise it (Photoshop has some basic animation capability, too).

Use "File" → "Place" (Shift + Ctrl + P) to place the Photoshop file in Illustrator equally a linked object; this way, if you lot need to make whatsoever changes in the Photoshop file, it will automatically update in Illustrator. Placing the file in the elevation-left corner ballast works all-time, from what I've seen. Next, bring back your circles past unhiding the backup layer nosotros created. You lot may have to drag and change the guild of the layers to stack the circles on top, and you might have to realign them to your animal if information technology has moved.

I decided to stoke the circles with a dashed line. I did this by selecting the circles, clicking "Stroke," checking "Dashed line" and specifying the size of the dash and the size of the gap. I used 5 points for the nuance and 3 points for the gap.

In case you need to slightly resize the circles, select them and use the width ("West") and height ("H") boxes on meridian to change the size in small increments. Make sure the chain in the heart is activated, to maintain the proportions.

I had to put each circle on a separate layer so that I could animate them in After Effects. I simply created 13 new layers, then dragged a circumvolve into each one. Your file will look like this:

Subsequently Effects

Beginning, download and install Ease & Wizz, which will make the movement of our circles a scrap more interesting — moving in dull, speeding up chop-chop, and catastrophe slow over again. This is a "proper noun your price" script, so you could technically download it for $0.

Without the script (left), and with (correct). (View large version)

Showtime a new project, go to "Import" → "File" (Ctrl + I), and select your Illustrator file. But brand certain where information technology says "Import equally Footage," y'all modify information technology to "Limerick — Retain layer sizes."

If the composition doesn't open right away, double-click information technology in the "Project" tab. If you're planning to resize the limerick, brand sure to click the little gear icon to the correct of it.

It might also be a proficient thought to choose an animation frame rate before starting ("Composition" → "Limerick Settings"). I chose xx frames per second because I knew my blitheness would exist quite short and would loop. If you're working with a longer blitheness, you should lower it, considering blithe GIFs with a high number of frames can end up being too big in size.

Select all of the layers except for the layer with the background; right-click and cull "Create shapes from vector layer." These are the shapes nosotros'll be animative. The original Illustrator layers should however be in that location, but their visibility should now be off.

Cull a shape layer, and click its contents; to the right of it, where information technology says "Add," select "Trim Paths." First, I gear up "Finish" to 0%. Clicking the stopwatch virtually "Offset" or "End" will activate the keyframes for that action and turn blue. A keyframe will be created at that betoken, depending on where your indicator is placed. It'll exist a small diamond. I prepare mine to "Start 0%," which fabricated my circle invisible, and I moved it down the timeline to where I wanted my circles to start animating. Motility your indicator downwards the timeline, then change "Starting time" to 100%; you lot'll see a new keyframe appear automatically.

Depending on which direction you want the path to disappear (clockwise versus counterclockwise), yous might have to start with "Start" or "Stop." Beneath is an example of what I did to brand the circle be invisible at first for a moment, appear into the frame, suspension, and then disappear in the direction that it appeared. The timing isn't what I used for my project — information technology's just an example.

Hither is the breakup of my keyframes:

Starting time 0%
Outset 100%
Outset 100% and End 0%
End 100%

Then, I added the Ease & Wizz effect. Open up the plugin by going to "Window" → "Ease and Wizz" (.jsx). So, highlight and select all of the keyframes, and click "Apply" (I used the plugin'south default settings). The per centum text should now be in crimson. Y'all could likewise drag the plugin window into your toolbar, so that it'due south not floating around.

As well, I used the Rotation tool (W) on the circles to rotate them, so that the animation starts at a different signal, such as the end of the tail, rather than right in the middle of information technology.

You lot can also copy and paste your keyframes into the "Trim Paths" folder of another circle if that blitheness is going in the aforementioned direction that you lot want this circle to go in. I created a clockwise animation and so a counterclockwise 1 (renaming the layer folders to not lose my place), and I would copy and paste those keyframes into the rest of the circles according to how I wanted; for example, the monkey'southward tail would be counterclockwise, whereas the ears would be clockwise.

Once all of the circles are done, you can go to "File" → "Consign" → "Add to Render Queue" (or Ctrl + Shift + /) and render it equally an AVI file (or any video format of your choice).

Turning the video into an animated GIF

Dorsum To Photoshop

To turn the video into an animated GIF, I opened Photoshop and went to "File" → "Import" → "Video Frames to Layers." Once it opens up, I went to "Windows" → "Timeline" (or "Animation") to open the "Animation" tab. In newer versions of Photoshop, you have the option of a video timeline or a frame animation. I chose frame animation.

Considering there were pauses in my animation, each pause rendered every bit its own frame, so I had to delete all of the duplicate frames from each pause in the animation and keep only one frame, but then set the timing of that one frame to a higher duration. You tin avoid this past removing all gaps in your After Furnishings animation and then calculation the pauses back in Photoshop; however, not existence able to see the entire matter at one time might make information technology a lilliputian harder to decide on the duration of the animation. Besides, don't forget to set the looping pick to "forever."

Frames 1, 28 and 53 are consolidated in my example (you could further combine one and 53). (View big version)

Once that's washed, go to "File" → "Export" → "Save for Web" and choose "GIF." Here is where it gets experimental, because I had to play around with the settings to go a good rest of quality and file size. Choosing the best quality will often make the file size mode also big (I try never to exceed 1 MB for a GIF).

I also found that when resizing the image to exist smaller, the color table would modify and would often look much worse (or fifty-fifty vice versa). Here's a play a joke on: Modify the animated GIF to diverse sizes until the colors look every bit best as possible, then relieve that color tabular array, resize it to your desired size, and so load that color table:

All done!

Some Reflections

When I initially created the animals, I didn't brand sure that all of my document sizes were the same, and so I had to resize and realign all of the circles for each beast! Pay shut attention to document size.
I haven't figured out why an epitome loads in Later Furnishings at narrower than 600 pixels, even when the original document is much larger! I have a lot to learn about Afterwards Effects.
I oasis't yet figured out a way to speedily remove extra frames in a Photoshop animation. Maybe amend applications for creating GIFs are out there?

I besides gained some knowledge while working on this:

I've never actually drawn so many animals before. I realized with this projection that you're non really drawing the fauna — you're mainly simply cartoon its features! That takes a lot of the pressure off.
I also realized that experimenting with textures can be extremely difficult and sometimes hit or miss. Start building your texture collection binder early on! I wish I had started years ago.
I discovered the color tabular array trick merely after getting extremely bellyaching when some of the GIFs would suddenly look horrible when I'd change their size past a slight amount (for example, 50 pixels in width). Always be open to discovering tricks, even in the applications about familiar to you!
This was probably my 3rd time making something in After Effects, and then there was a lot of wearisome trial and fault here, also as some help from a friend. It helps having friends who share your passion.

I did many things that could probably have been done more quickly or easily. This was a learning experience. If you have any tips for making these types of animations faster, better or easier, feel complimentary to share in the comments!

Hope y'all enjoyed the animations!