Happy Tree Friends in Illustrator

I should have done this tutorial sometime ago as Happy Tree Friends is already a old animation series (it was lauched in 2000), but it still really fresh. As everyone who enjoy this series, the contrast between the cuteness of the characters and the violence and gore that they get into it’s what made this series a classic.

Just in case you have never seen it before here’s a link. Now talking about the tutorial: I decided to not be gore as the series and so this image is way more softer. Anyway, this is a beginner tutorial, so no one should get any trouble on doing it, have fun guys.

Step 1

First of all open Adobe Illustrator and create a 20 x 20 cm canvas.

Later, using the rectangle tool (M) make a blue square on the background.

Using the pencil tool (N) or the pen tool (P) create this round shape on the background, it may look randomic but htis kind of shapes are classicaly used on retro cartoons.

Step 2

Let’s skip to the title, you can grab the typeface used on this link. I wrote the name of the show then outlined the font (command + shift + O / ctrl + shift + O).

I duplicated it and sent to front a version with a orange outline and yellow fill

Step 3

Ok, before going to illustrator I decided to sketch a bit and besides the fact my sketches got really ugly, I got a main idea for the following steps. So, my idea was to make Toothy hugging Giggles strongly almost suffocating her.

I’ve been using the outline view a lot lately, as it make things easier to organize on Ai. Just press command + Y / ctrl + Y to acess this mode. Let’s begin with toothy body, so first let’s draw some parts of his boy using basic shapes as circles, use the ellipse tool (L) for the task. Let’s begin by drawing his head.

His belly and body.

His feet.

His tail.

His ears, use the path eraser tool to erase part of the ellipse, you can find this tol on the pencil tool panel.

The insed of the ear can be achieve using the pencil tool (P).

Use the previous tool to crea the smile, teeth, the eyes and the nose of our buddy.

Toothy got some freckles, create them using the ellipse tool (L).

I used the pencil tool (N) and the pen tool (P)to create the legs of the squirrel.

Organize and group all the elements and get back to the normal view, it’s time to add color.

Step 4

I first made a few hachures on the tail of this buddy.

The logic behind this coloring process it’s wuite easy, as you’re about to see that almost every path will have a outline and fill.

I use mainly the 5pt. oval brush for the outlines.

I created a layer with all the colors I used on each character so you guys can do the coloring process the easier way.

And here’s a rough shadow created using only ellipses, the idea here it’s not to be a perfect shadow as it’s from a childlook cartoon.

And yes, despite all the violence and the gore of the original show I decidd to insert a little more fluffyness on this illustrations so I draw some hearts using the pen tool (P).

Add some light using the brsuh tool (B) with a brighter color.

And spread the love.

Yep, I know what you’re think and dont worry, toothy it’s not handicapped, I just going to make his arms on other layer (command + L / ctrl + L) with the rest of Giggles.

Step 5

Drawing Giggles will be beyond the easy, let’s begin by copying Toothy’s body and rotate him using the selectio tool (V).

You can alos copy part of the head.

As any character on HTF got some characteristics on their face that make then unique and recognizable beside the fact that they all were made from the same default. Giggles got a light section on the face.

I’ve made her with the mouth wide open because she trying to breath, use the pencil tool (N) to draw it.

Do the same thing here.

Add some wrinckles to it using the brush tool (B).

Use the pencil tool (N) to draw the throat, tongue and teeth.

Use the ellipse tool (L) to make the pupil an the eye, you’re going to have to make a little triagle with the pen tool (P) and then use the minus front option to get this kind of 50’s pupil on the character.

Use the previous tool to draw the eyelashes, the dark circle and the wrinckle.

Later just duplicate the eye, reflect it and reposicionate it on the other side.

I must admit I hate drawing arms and hands, but in this case this was not a big deal, as thery are wuite simple in terms of shape. So i just used the pencil tool (N) and a couple of time to do it.

Same thinig here, nothing really difficul, just make sure the positions make sense.

Finally I added some movement lines and that’s it.

Conclusion

Download the Adobe Illustrator File

Download the Adobe Illustrator file used for this tutorial

About the author

My name is Marcos Torres, I’m Graphic Artist from Porto Alegre, Brasil. You can get to know more about me by acessing my Personal Website or by following me on Twitter: @marcos333. You can also see some of my last projects at my Flickr.

Sponsored Links:


Abduzeedo Inspiration Guide for Designers at Amazon

Posted in Blog | Comments Off on Happy Tree Friends in Illustrator

21 Inspiring Examples of About Pages

Advertise here with BSA

About pages are important because they are the place where the user goes to discover more about who/what is behind the site they are visiting. From design studios to apps and online shops, users like to browse a page to find the good old who, where, what, how information about you. And of course there’s many different approaches that can be taken when designing an about page. From the very formal to the fun and creative, it’s important to go the direction that’s fits the personality of you or your company. Today we gathered a some inspiring examples of about pages to show you how different websites are allowing visitor to learn more about them.

FancyRhino

I always like the creative-humorous approach using pictures. It’s nice to see faces behind ideas.

Inspiring About Pages

12th of Never

A nice and minimal approach in a landing page with a “more coming soon” note.

Inspiring About Pages

H-Art

A nice combo of beautiful images and well designed info-graphics to give us more details about their work.

Inspiring About Pages

Oliver Russell

Nice and elegant approach to the “what we do” page. Beautiful typography and colors.

Inspiring About Pages

Doberman

A cool mix of illustrated elements, typography and images to present their work, values and team.

Inspiring About Pages

Playtend

And of course a creative studio focused on encouraging imagination would go for an imaginative about page, well done.

Inspiring About Pages

Pulp Fingers

Another colorful creative approach to present who is behind work.

Inspiring About Pages

Level

A clean who we are page with beautiful colors and typography explaining their ideas and services.

Inspiring About Pages

Pursuit

For a stylish suit shop nothing better then a well suited team page.

Inspiring About Pages

Ghosthorses

Ghosthorses decided to use a nice typography combo to tell us more about their work and the outcome is really nice.

Inspiring About Pages

FO

FO divided their about in two beautifully done parts: who we are – explaining their values, creative force – showing their founders.

Inspiring About Pages
Inspiring About Pages

Fear the Grizzly

Clean and minimalist layout with a few images and texts explaining their work.

Inspiring About Pages

WeMake

A beautiful single page design with a nice about section with text and faces. ;)

Inspiring About Pages

shoplocket

Great colors, textures, typography and icons to explain their work and ideas.

Inspiring About Pages

FiftyThree

Beautiful typography based about page.

Inspiring About Pages

Nelson Cash

Nice images, icons and typography combination to show us more about their work, history and team.

Inspiring About Pages

COOP

For a coworking space, nothing better than using a beautiful background image showing the space. They are also using nice colors and transparency to tell more about their story.

Inspiring About Pages

Trailer Park Truck

A creative and less formal approach to the old and good who we are page.

Inspiring About Pages

Haus

Haus is using a delicate palette with nice images and text in a timeline to present their team and milestones along the way.

Inspiring About Pages

Blind Pig Design

Blind Pig Design counts with a photo of Aaron Awad (the founder) in action and a nice text to tell us more about the studio. They also count with a beautiful textured side bar menu. ;)

Inspiring About Pages

Duggard

And for a super cool website selling vintage stuff nothing better than a vintage about page!

Inspiring About Pages

Posted in Blog | Comments Off on 21 Inspiring Examples of About Pages