1. Open a new document (RGB color) in Illustrator. Use the ellipse tool [L] to draw four circles like the ones shown below: two flesh-colored cirles, and two black ones. Make sure the stroke weight is relatively thick, to keep with the standard look of Potterpuffs (you can use a weight of anywhere between 5 pt and 8 pt).




2. Switch to the pen tool [P] and change your fill color to whatever color you want your Puff's shirt to be. In this case, I chose maroon ('cause we all know how much Ron loves maroon...hehe). Draw two sleeves over the flesh-colored circles you drew in the first step.




3. Change your fill color to a trouser color (I chose brown here) and draw pant legs over the two black circles.




4. Change your fill color back to the shirt color and draw the torso.




5. Now it's time to draw the head. Switch over to the ellipse tool [L] again and use the same flesh color you used on the hands to draw an oval that's nearly the same height as the entire body.




6. Next come the eyes. You'll only draw one eyeball here (as you're going to copy and paste the one eye to make an identical one). Again with the ellipse tool [L], draw four circles of different sizes like the ones shown below (in descending size): 1 white circle (with black outline), 1 blue circle (or whatever color your Puff's eyes are), 1 black circle, and 1 tiny white circle (it doesn't have to be outlined in black as the outline will be hidden in the background of the black circle it's on top of). Once you've positioned the circles in their proper place on the head (using the selection tool [V] to move them around), select all 4 circles (again with the selection tool, holding down the Shift key to select multiple objects), and copy & paste them. Then move those circles to their proper place on the Puff's head.




7. Draw the Puff's hair next by using the pen tool [P] and changing the fill color to the color of your Puff's hair. I'm working with orange here, as Ron's obviously a ginger-haired kid.




8. NOTE: Might as well point out now, for those who aren't familiar with vector graphics, that you can use the direct selection tool [A] to click on any anchor point and drag the nodes in any direction in order to achieve the look you want for your drawing. When an anchor point is selected, it will be solid. If it's not selected, it will be white inside (see example below).




9. Switch to the brush tool [B] and draw a mouth. Use the brush tool as you would a regular paintbrush, and with a short sweeping motion, create a teensy mouth (happy or sad...you choose). I also chose to add a golden "R" on his sweater, using the text tool [T].




10. Once everything looks good, you're ready to export it to Photoshop, where you'll be adding the shadowing and saving it in a Web-ready format. First, switch to the rectangle tool [M].




11. Draw a rectangle around your Puff. It doesn't matter if your rectangle is filled or not, as it's going to disappear in the next step...




12. With the rectangle selected, go to Object > Crop Marks > Make. This lets the program know which portion of the artboard you actually want to save. You don't want all that extra white space around the Puff, after all.




13. You should now have these little marks outside each corner of your Puff.




14. Next, you're going to export the file to work with in Photoshop.* Go to File > Export...



And save the file as a TIFF. Leave the default compression settings as they are.



At this point, you're done with Illustrator. DON'T FORGET TO SAVE YOUR ILLUSTRATOR FILE! Even though you exported the drawing to Photoshop, you still need to save your Illustrator file as an AI file so that you can always go back and play around with the anchor points, colors, etc.

*If you don't wish to add shadows to your Puff, just export your drawing as a JPEG and bypass the rest of this tutorial.


15. Open your TIFF in Photoshop. Select the magic wand [W] tool.




16. In your Layers palette, (a) create a new layer and (b) lower the opacity to 30%.

(a)   (b)


17. Here's where you do the shadowing. Using the magic wand [W] tool and working on the Background layer, select certain areas at a time to shadow. For the head, click on the white and colored parts of the eyes (but not the black circle!) and on the entire face.




18. In the Layers palette, select Layer 1 (the layer that's at 30% opacity) and, using the hard brush tool [B] set at 40 px (could be less if your drawing is smaller, or more if your drawing is bigger) and with a black foreground color, paint the highlighted areas so as to create a shadow on the Puff. Choose a single light source (I always choose the upper left-hand side as the light source) and paint shadows according to that. Deselect the areas you just painted by pressing Ctrl + D.



Continue step 17 and this step (remembering to work on the Background layer when selecting areas, and then switching to Layer 1 when shadowing areas) until your Puff has sufficient shadows.


19. Next you'll want to flatten your image.*



*If you want to play it safe, before flattening the image, save the document as a Photoshop (PSD) file with layers, in case you need to fix the shadowing later.


20. Once the layers are flattened, you can save the image as a JPEG, PNG or GIF. If you wish (and as is probably preferred), you can resize your image before saving it for the Web. The Puffs that I post in this community are usually no bigger than 400 pixels in height.

This tutorial took me hours to put together (taking countless screen shots and resizing them), so I hope some of you can benefit from it! I hope it wasn't too confusing. =] I really suck at teaching. Haha! Happy drawing, fellow Puff fans!