Drawing: Basic Face / Head Proportions

No, this isn't a drawing class -- but like the "Rule of Thirds" this technique can apply to many of our projects and designs.  Almost everybody who draws a face draws them out of proportion -- usually by placing the eyes too high on the head.

Please follow along with my presentation on the whiteboard so you have a better understanding of facial structures before you begin working on the head in Sculptris.

Notice that if you look at the human skull and divide it into a 4x4 grid, the eyes are directly in the center of the face.

By applying that same division to a human face, we can see that the line appears right on the top of the eyeball in most faces.

You may also notice that the width of the eyes usually equal the distance between the eyes -- and really, on the sides of the face as well.  This diagram shows 5 eye widths on the face.

Another interesting observation is that the center of the eye roughly lines up with the edges of the mouth, and the edges of the nose generally line up with the inside corners of the eye.

Notice in the finished drawing that the same line (now invisible) that ran across the top of the eyes also indicates where the ear joins the head.  Also notice that the eyebrows are not directly centered above the eyes.

You should keep these lines in mind if your figure is not looking directly at you.  Also remember that the head is really skull-shaped with "attachments" (nose, lips, hair, etc.).

While we are on the subject of proportions, this is an interesting general diagram showing human [male] body proportions.  Notice that "one head" is the unit of measure.  At the "second head" the line intersects the models chest -- at the 3rd, across the top of his naval... etc.

And this "sewing guideline" chart shows a few variations to the original.

Finally, here's a video demonstrating the facial proportions:

Flash: Trace an Image

The "Trace an Image" project really helps build skills with the drawing tools and gives us a good baseline for future projects.  Here are the steps I recommend for getting started:

1. Open Flash and create new document (either ActionScript 2.0 or 3.0)
2. Open an Internet browser and find a picture that you would like to copy.
   Although cartoons and line art drawings are easier, I recommend starting with a photo and seeing what effects you can get.
3. Copy the picture (Right-Click and select Copy)
4. Open Flash and Paste your image (Right-Click and select Paste)
5. Go to Modify > Document
6. Click on "Contents" and click "OK"
7. Press CTRL+2 to fill the screen with the largest size possible
8. Create a new layer (the little square "folded corner" icon under your layers
9. Begin tracing your image
10. When completely finished tracing your project, delete your original photo layer.
    Note: You can temporarily "hide" your original photo by clicking to dot under the eyeball on the layer holding the original photo.
11. Save your completed file to your Thawspace
12. Press CTRL+ENTER to test your finished project (this also creates an SWF file)

I would like you to spend today and Friday creating these traced images.  If you complete one quickly, do another one.  You can use these in another project in a few days.

Examples of Traced Images:

In this example, I traced the outline of Charlie Chaplin and cleaned up some edges.  I also took the liberty of adjusting the hair color and adding some details to the coat that weren't in the original picture.

 

In these two examples of Eagles, I replaced the dark brown background with a sky and a flag, respectively.  The point is that you can trace an image and still have fun with the design.

 

Flash: Draw a Picture

Today we will be using the tools in Adobe Flash to draw a picture on different layers.  I would like you to do the following:

• Draw a background:  It might be grass, mountains, and sky... or the inside of a room... or a stage with lights... or a movie theater... or outer space... or whatever.
• Change the name of "Layer 1" to "Background"
• Create a new layer and draw something: It could be a person, a dog, a car, a UFO, etc.
• Rename the new layer to something applicable.
• Save your picture to your Thawspace.
• Go to FILE > PUBLISH SETTINGS and select JPG -- and then click PUBLISH.

Photoshop: Line Art Coloring

Coloring a line art image is basic on the surface, but to really get a quality result [and something you can get creative with] you should begin by separating the black lines from the white page.  Here are some steps to help you through this project:

Step 1: Begin by finding a good example of a line art image.  You can specify in your Google Search that you want large, line art images -- try this search for an example.

Step 2: Do a SELECT > COLOR RANGE and then click on the white area of your picture.  Drag the "fuzziness" up a bit to catch any straggler pixels.

Step 3: Press DELETE and also delete the background layer.  You should see a line art image with a checkered [transparent] background.

Step 4: Create a new layer and drag it beneath the Line Art layer.  Use the paintbrush to put down a good "foundation coat" which you can do without worrying about the lines.

Step 5: Click on the Line Art layer, select the Magic Wand tool, and click on the empty background area.  This should select everything around the object you are coloring.  Now click back on the "foundation coat" layer and press DELETE.  This should clean up the edges of your object (see above).

Step 6: Use your DODGE tool (looks sort of like a round push pin) and a small brush to add some highlights to areas where you would expect to see them.  In this example I assumed the light was coming from the top-left so I added highlights to the top of the dome, the top of the instruments, and along the tops of other ridges.

Step 7: Use the BURN tool (looks like a pinching hand) and a small brush to add "shadows".  I added shadows on the underside of instruments, under the lips of overhangs, under the extending spheres, etc.

Step 8: If you have spherical/rounded objects (such as the circles on the bottom of the Dalek), go to the Line Art layer and select the object(s).  If you have multiple objects (above) hold shift and select all of them.  Then I like to expand the selection a little by going to SELECT > MODIFY > EXPAND and then 1 pixel.  This will allow the new layer to slightly expand beyond the "holes you're putting them in.

Step 9: Create a new layer and use the paintbrush to paint into your selections.  We will add a bevel to these new pieces in the next step.

Step 10: Go to LAYER > LAYER STYLE > BEVEL & EMBOSS and adjust the settings until you get the roundness you want.

Step 11: Add details, textures, colors, etc.

Step 12: You can also add a background and a foreground if you choose.

Here are a couple more examples: