• We are STAs
    • Daniela Caballero
    • Leilani Cabello
    • Lorena Chiles
    • Marissa Devivar
    • Luisa Matzner
    • De’sha Bass-McClellan
    • Adrian McKee
    • Thang Truong
    • Carrie Wang
  • We were STAs
  • STA Presentation
    • STA Presentation 2017
    • STA Presentation 2016
  • Testimonials
  • Resources
  • Home

STA Blog

Ashley Solano

Ashley Solano

HOW TO GET FOAM A FLAT DRAWING TO A 3D CARICATURE

May 5, 2011 By Ashley Solano

In this tutorial, well be going over how to take a flat drawing (left) and make it into a 3D caricature (right) in Illustrator. This illustrator assumes you know how to use the pen tool.

STA WikiWikiWiki imageSTA WikiWikiWiki image


This tutorial is divided into 5 different parts

1. Basic Shapes

2. Using Swatches

3. Adding Gradients to add depth

4. Adjusting your gradients

5. Specific Tips: Hands

BASIC SHAPES

1. First begin by setting your main drawing at a lower opacity (about 70% should do) Lock down original drawing layer so that you dont accidentally move it etc.

2. Make outlines of the basic shapes using the pen tool, making sure they’re all closed so you can fill them in with color later. Right now, color doesn’t matter, so just color-pick it or choose at random.

STA WikiWikiWiki imageSTA WikiWikiWiki image

Tip: Make good use of layers to separate certain regions of your drawing (for example: hair, face, shirt, etc).

Tip 2: Avoid making single shapes for big parts of the drawing. For instance, I used three separate shapes for Libby’s hair. This will help in the future when adding gradients.

3. For symmetrical shapes like circles or squares, be sure to use the elliptical or rectangle tools to make them as precise as possible. For Libby, I didn’t use the elliptical tool for her pupils, but I did use it for the eye shines, which I added to the illustration after tracing everything.

STA WikiWikiWiki image

USING SWATCHES

This next step will help make adding gradients much easier for you.

1. Choose your basic colors: I chose orange for her shirt, dark brown for her hair, and a light cream color for her skin.

2. Make sure swatches is open (window>swatches) and drag your colors one by one to your swatches. This will give you a color palette for later.

STA WikiWikiWiki imageSTA WikiWikiWiki image

3. Now pick colors for your gradients. First start with your base color, than make it darker (or lighter). Notice the different shades in my swatches.

4. Once you’ve done that, drag that to the swatches like you did for the base colors.

Now your color palette is ready.

ADDING GRADIENTS TO ADD DEPTH

Adding gradients is an easy way to depth to your illustration. It makes the shadows and contours of your shapes pop out without being too drastic. It can be found in window>gradients. It can also be easily opened underneath the color picker.

For this example, we’re going to do Libby’s hair.

1. Highlight the piece you want to fill with a gradient (in this case, Libby’s bangs). Then, click the gradient button on the left.

STA WikiWikiWiki image

Normally in Illustrator, this takes your shape and automatically makes it in a black/white gradient. And usually, it’ll be on the black/white setting.

2. To change the gradient color setting to RGB, click on the gradient toolbox, and double-clicking one of the mini boxes underneath the gradient.

STA WikiWikiWiki imageSTA WikiWikiWiki image

2a. In the dropdown menu in the right corner, click RGB.

2b. Click out to exit this menu and do the same for the other box to make sure it’s on RGB setting too.

3. Now that your settings are in order, double click one of the boxes underneath the gradient again, doesnt really matter which right now. This will open up your color palette. If your palette is not showing, click the swatches button on the left.

STA WikiWikiWiki image

4. Choose your color from your color palette. In this case, it’ll be dark brown for the base color of Libby’s hair. After that’s done, exit that menu by clicking out of it.

5. Now click the other box on the gradient. This will be for the shadows of Libby’s hair. Using the same steps used for the base color, choose the shadow color (even darker brown).

STA WikiWikiWiki image

Libby’s bangs don’t go from just dark to light; it’s goes from dark to light and back to dark. So

6. To add one more gradient, click on the gradient scale. This will add another box that you can fill. Do this for the other dark side of the hair. You can move the colors around so that it’s in the right order.

Here, Ive moved the lighter gradient towards the middle to make room for the third color.

STA WikiWikiWiki image

Now Ive added the third color.

STA WikiWikiWiki image

ADJUSTING YOUR GRADIENTS

STA WikiWikiWiki image

Libby’s bangs’ highlights are horizontal, not vertical. (Notice how awkward that looks) So fix this by changing the angle.

Use the dropdown angle menu in the gradients toolbox. You can change it by either entering a number between -180 and 180 or by sliding the triangle left/right. Its usually easier just to use the slider at first.

STA WikiWikiWiki imageSTA WikiWikiWiki image

Now the highlight runs at the right angle.

Tip: Another way to adjust your gradients are the diamonds above the gradient scale. This adjusts how the gradient transitions: it can either be a gradual change or an abrupt one. Feel free to mess with it and find out what looks best.

Now that you know how to add and adjust gradients, you can apply this to all your other shapes (tshirt, face). Keep in mind it’s not necessary to do it for every single shape (I didn’t use it for Libby’s hair shines or her teeth)

Tip: be mindful of where your layers are. Make sure your detail shapes aren’t covered by bigger shapes on top of them. Adjust the order of your layers to suit your illustration.

SPECIFIC TIPS: HANDS

Hands are a pain in the butt. Here’s one way of illustrating them in Libby’s style.

STA WikiWikiWiki image


Find a reference picture for a hand. Drawings in this case won’t really do. Find a good reference picture that has the same shape and position as the one you want. Skin tone doesn’t matter at this point cause you’ll just be using your color palette.

For this example, I’m going to use a picture I found through google of someone doing the Hook ‘Em Horns signal. (I adjusted the angle to suit Libbys hands)

STA WikiWikiWiki image

1. Start by making shapes for the fingers. Do NOT make only one shape per finger. Instead, do one shape per joint. This will give the fingers more depth and will make them look more natural.

STA WikiWikiWiki image

Ive turned the opacity down on the finger pieces to show the shapes and how they match up with the reference picture.

Tip: Layers. Layers. Layers. You will have a lot of shapes for the hand alone so be sure to make and label your layers (one layer for pinky, one for thumb, another for pointer finger etc).

STA WikiWikiWiki image

Once youre done doing that for all the parts of the hand, youll have something looking like this:

STA WikiWikiWiki image

I even added the nails. Ignore the fact that her pinky and the reference pinky dont line up.

Now its time to add the gradients just like we did with Libbys bangs.

2. Using the same colors you used for the skin, add gradients to all the different shapes of the hands. Take your time with each shape and make sure the gradient angles are correct. It’s a bit painstaking to do this for every shape, but the outcome is worth it.

STA WikiWikiWiki image

Here are examples or good and bad gradient angles and how they effect the hand as a whole.

STA WikiWikiWiki image

Heres how it looks after all the shapes have had gradients added to them.

3. For one final touch for the hands, add lines to accent the knuckles and/or joints. Avoid making lines with the pen tool with a single stroke and leaving it at that. Instead, make a closed shape and fill it in with a solid color.

STA WikiWikiWiki image

I also added accent lines for the nails.

4. Adjust and touch up the hands; this usually means making sure the gradients line up properly and figuring out where to add outlines. Zoom out every once in a while to make sure it looks good at a distance. Sometimes you have to make the hands smaller or bigger dependent on the style of the cartoon. In Libby’s case, she’s got pretty big hands in proportion to her body. But it looks good.

Then you’re done!

STA WikiWikiWiki imageHook ’em!

Filed Under: General

April 21 – 27

April 28, 2011 By Ashley Solano

Site update forDr. Pangle[6]

– Made corner pieces for page borders

– Need to add marble texture that looks random but is actually repeated

STA WikiWikiWiki image

Yoruba Textbook Illustrations [this week: 4.25hrs; total: 28hrs]

– Status: ongoing

– Finally started: boy and girl in science lab talking about what they want to be when they grow up

– Finished two boys at the market; finished two boys talking about health; waiting on feedback from Nathalie

STA WikiWikiWiki image

STA WikiWikiWiki image

Pitch Perfect Pinyin[total: 14.5hrs]

– Status: in progress

– Added in pictures

– Went through units and fixed pronunciation tips to have italics

– Done units: 2, 3, 4, 5, 6, 7, 8, 9, 10

– Unfinished units: 11-12

More than an image, less than a video

Filed Under: 2011 - 2012

April 14 – 20

April 19, 2011 By Ashley Solano

SHORT-TERM PROJECTS

Illustrator Tutorial: Libby, Snake[this week: 0hrs; total: 7.75hrs]

– Status: in progress

-Need to: finish word doc

Site update forDr. Pangle[4]

– Need to: fix top borders on all pages

– If possible: make homepage look more like mockup

LONG-ISH TERM PROJECTS

Yoruba Textbook Illustrations [this week: 3hrs; total: 23.75hrs]

– Status: ongoing

– Made lazy woman skinnier; Added more colors to maps

– New illustrations: 2 boys at the market; 2 boy discussing health; boy and girl talking about what they want to be when they grow up

STA WikiWikiWiki image

STA WikiWikiWiki image

STA WikiWikiWiki image

Pitch Perfect Pinyin[total: 10.25hrs]

– Status: in progress

– Fixed some typos in Unit 4 and 7

– Done units: 2, 3, 4, 5, 6, 7

– Unfinished units: 8-12

LONG-TERM PROJECTS

CV Collection Project [total: 7hrs]

– Status: ONGOING

– Finished Pubs testing

Filed Under: 2011 - 2012

April 7 – 13

April 14, 2011 By Ashley Solano

SHORT-TERM PROJECTS

Summer Language Institute Logo[this week: 0hrs; total: 5.25hrs]

–Waiting for feedback from Cory

Illustrator Tutorial: Libby, Snake[this week: 3hrs; total: 7.75hrs]

– Status: in progress

– Finished writing snake instructions

– Need to: Get screenshots of all the steps and put it into the word doc

Site update for Dr. Pangle [4]

– Added a couple entries on courses page

– Made syllabus pages for said courses

– Updated homepage intro, contact page, and CV

– Need to: fix top borders on all pages

– If possible: make homepage look more like mockup

LONG-ISH TERM PROJECTS

Yoruba Textbook Illustrations [this week: 0hrs; total: 20.75hrs]

– Status: ongoing

– Need to make lazy woman skinnier

– Need to make map with more colors

– New illustration: 2 boys at the market

Pitch Perfect Pinyin[total: 6.5hrs]

– Status: in progress

– Need to finish Unit 4 (do Pronunciation tips)

– Units 2, 3, and 5 are done except for pronunciation tips don’t link to any files yet

LONG-TERM PROJECTS

STA wiki migration [total: 2.5hrs]

– Status: DONE!

CV Collection Project [total: 5hrs]

– Status: ONGOING

– Met with Kate on Monday about pubs testing

– Did pubs testing for 3 hours Tuesday

Walk the dinosaur

Filed Under: 2011 - 2012

March 31 – April 7

April 7, 2011 By Ashley Solano

SHORT-TERM PROJECTS

Summer Language Institute Logo[this week: 0.5hrs; total: 5.25hrs]

– Waiting for feedback from Cory

Illustrator Tutorial: Libby, Snake[this week: 0hrs; total: 5.75hrs]

– Status: in progress

– Need to finish snake instructions, get feedback, then get screenshots and make word doc

Site update for Dr. Pangle []

– Set up meeting for Friday at 3pm

LONG-ISH TERM PROJECTS

Yoruba Textbook Illustrations [this week: 3.5hrs; total: 20.75hrs]

– Status: ongoing

– Need to make lazy woman skinnier; made lines thicker

– Finished maps; also made other versions with shading

– New illustrations: 2 boys at the market

STA WikiWikiWiki image

STA WikiWikiWiki imageSTA WikiWikiWiki image

Pitch Perfect Pinyin[total: 6.5hrs]

– Status: in progress

– Need to finish Unit 4 (do Pronunciation tips)

– Units 2, 3, and 5 are done except for pronunciation tips don’t link to any files yet

LONG-TERM PROJECTS

60 images 2011 Pro Bene Meritis Awards [total: 0.5hrs]

– Status: Done!

– By the time I got to my shift Friday ready to scan, they had already been done by Christine and Camri.

– Rotated, straightened and cropped the images

STA wiki migration [total: 2hrs] – due May 9

– Need to check over for typos and errors; need to do STA 2007-2008 presentation

CV Collection Project [total: 2hrs]

– Status: ongoing

Filed Under: 2011 - 2012

March 24 – 30

March 31, 2011 By Ashley Solano

SHORT-TERM PROJECTS

Summer Language Institute Logo[this week: 1.25hrs; total: 4.75hrs]

– Met with Amy Tues: The only concern was that the vietnamese/communist flag on the beach ball wasn’t sitting well with some people; asked to either push the flag back so that it’s not as prominent or to make the beachball solid colors

STA WikiWikiWiki image

STA WikiWikiWiki image

Illustrator Tutorial: Libby, Snake[this week: 1.5hrs; total: 5.75hrs]

– Libby tutorial: Finally finished the word document.

– Zodiac snake tutorial: Need to finish the basic steps, get approval, get screenshots, and make word doc.

Site update for Dr. Pangle []

– Meeting with Dr. Pangle Tues at 2:15pm cancelled

– Waiting for her to reply so we can schedule another meeting



LONG-ISH TERM PROJECTS

Yoruba Textbook Illustrations [this week: 2.25hrs; total: 17.25hrs]

– Worked on Lazy woman illustration

– New illustrations: 2 maps of Nigeria

STA WikiWikiWiki imageSTA WikiWikiWiki imageSTA WikiWikiWiki image

Pitch Perfect Pinyin [total: 6.5hrs]

– Need to finish Unit 4 (do Pronunciation tips)

– Fixed master css to style pronunciation tips;

– Units 2, 3, and 5 are done except for pronunciation tips don’t link to any files yet

LONG-TERM PROJECTS

60 images 2011 Pro Bene Meritis Awards [total: 0hrs] – due April 11

– pending

STA wiki migration [total: 1.5hrs] – due May 9

– Started moving content for Michael Chen, David Choi, and Gilok Choi from old wiki to new one

CV Collection Project [total: 0.25hrs]

– Met with Kate Monday, got packet from her with instructions

Filed Under: 2011 - 2012

  • « Previous Page
  • 1
  • 2
  • 3
  • 4
  • …
  • 6
  • Next Page »

link to LAITS home page

Video STA Home

© 2023 Liberal Arts Instructional Technology Services | Production Credits