On Monday I posted a new drawing of a sheriff on the main site. I wanted to use that drawing to give a peek into how one of my pictures progresses from sketch to main site.
Disclaimer
Might as well get this out of the way. I am not an artist, though I play one on the Internet. This is how I draw pictures circa March 2005. I am sure my style will change as I improve, experiment, and learn new techniques. I eagerly welcome any critiques you may have on how to make the drawings or the whole drawing process better. You can either leave them in the comments or contact me directly.
I hope someone out there finds this post useful.
Tools
Setup
I start out with a very rough sketch, usually a particularly promising notebook doodle. Because I do not have, nor particularly need a flatbed scanner, I take a picture of the drawing with the macro setting on one of my digital cameras. I do not have to worry about quality because I am going to be tracing over the lines anyway.
I take the digitized picture into Photoshop where I crop the image and play with the contrast to make the lines more visible. Again, quality is not the issue. I save the modified picture in a dedicated directory where I keep all the files relating to a particular drawing. By the end, I usually have seven or eight files in the directory: the "scan", the Illustrator line art, the high-resolution TIFF of the line art, the Photoshop document with all the layers of the final drawing, the high-resolution TIFF of the final drawing, the web version, and the web thumbnail.
I open the sketch in Illustrator and resize it to fit the page. I then make the layer a template, which lightens the drawing and makes the layer uneditable.
Finally, I make a new layer above the template layer to contain the line art.
One annoying quirk of Illustrator is that it does not save brushes between sessions (as far as I know). Every time I trace a drawing I have to create a new brush. Here is how to do it:
- Click the Brush tool

- Click the "New Brush" button in the brushes palette
- select "New Calligraphic Brush" on the dialog that pops up.
- I use a circular brush set to 4 points with a variation of 2 based on the pen pressure.
I have found this size scales well and offers the best balance between the cartoonishness and detail that I want. I have heard of professional cartoonists using multiple pens per drawing, but I have not tried that yet.
Line Art
With a brush in hand, so to speak, I can start drawing. I have found three main benefits to tracing in Illustrator:
- It automatically smoothes lines. This makes the drawing look very clean and precise. Illustrator adjusts the smoothing and number of waypoints based on the speed of the stroke and the zoom level.
- One can adjust lines with amazing precision using the direct selection tool
.
- Undo, undo, undo! No need to erase or worry about ruining a drawing with a stray pen stroke.
I use the original pencil lines only as very rough guides. I will often depart from the lines or hide the sketch and completely redraw a portion. I tweak continuously throughout the drawing process. That is the key to drawing in Illustrator. Move a line, scale entire sections, tweak a pose. For example, I moved the sheriff's head to the left and made it slightly larger than the original drawing.
I switch to the pen tool
when drawing inorganic objects such as the sheriff's badge and shotgun. While the brush tool allows one to make sweeping freehand curves, the pen tool is perfect for hard, machined edges. The pen tool takes some getting used to, but it is very powerful once one gets the hang of it.
I initially draw angled objects horizontally then rotate them into place. It is much easier to make horizontal rather than angled lines parallel. I use Illustrator's "Smart Guides" to further assist in aligning the parts of the drawing. Smart guides allow one to snap objects automatically to lines extending from another object. They are a huge help. You can turn on the guides by going to "File" > "Preferences" > "Smart Guides".
Once I think I have finished the line art, I select the entire drawing and flip it horizontally. This gives me a unique point of view on what I have made. More often than not, subtle misalignments or skewed lines seem to appear. They were there all the time, of course, but looking at a drawing in a different way helps me discover mistakes that I would have missed otherwise.
After some final tweaks, I go to "File" > "Export", and save the line art as a TIFF file. I used to export at only 300 DPI, but since I started printing drawings, I have moved up to 600. I do not turn on antialiasing because I need crisp lines in which to add color. At that resolution antialiasing is invisible anyway.
Colors
This part is easy compared to the line art. I open up the TIFF file and right away save it as a PSD. Then, I use the wand tool
to select all the black lines. This is easily done by unchecking the "Contiguous" option at the top of the window. I cut the lines and paste them into their own layer. I choose the paint bucket tool
and fill the background layer with the blue (CCCCFF) I have used in the background of many of my pictures. I create another layer below the line art layer but above the background. This will be the color layer. Using the bucket tool again, making sure the "Contiguous" and "All Layers" options are checked, I start coloring the drawing.
I use colors from the "Web Spectrum" color set. It has a good variety of bright colors, and they are organized nicely. To use a color set, open the "Swatches" toolbox by clicking "Window" > "Swatches", click the little arrow at the top left, and choose a set that you like.
After coloring, I have three layers: background, color, and line art. The drawing looks very plain. Time to add shading.
Shading
If drawing the line art is the hardest and coloring the easiest, then shading is the most fun. I really enjoy seeing the drawing progressively take on depth.
I break out the pen tool once more and set the foreground color to black. I draw the first shadow, in this case the top of the sheriff's hat.
The pen tool will create a new "shape" layer. I move this layer below the line art but above the color layer. I right-click and select "Rasterize Layer". This creates a normal layer of pixels where the shape used to be. This will be the shadows layer. In the dropdown box at the top of the layers box, I click "Soft Light" as the blending mode. This allows the base color to show through.
As I draw more shadows, I merge them down ("Layer" > "Merge Down" or ctrl+e) onto the base shadow layer. For additional depth, I usually add a second layer of shadows in the same manner. Finally, I add the shadow on the floor.
The sheriff looks better at this point.
Highlights
There are two types of highlights: specular highlights such as on shiny metal and normal highlights on the bright side of clothing. I make both in the same manner as shadows, except using white instead of black. Specular highlights have a normal blending mode while normal highlights use "Soft Light".
Finishing Touches
The drawing is complete, but there are a few small matters to fix before it is ready to post on the main website. First, I had reversed the drawing without reversing the buttons on his shirt. A hard-bitten sheriff of the Old West cannot be seen wearing a woman's shirt. I mirror the drawing horizontally. Second, I tweak the opacity of the shadows and highlights until they look right. This usually ends up being 50-75% on shadows and 45-50% on highlights. Finally, I save a high-resolution TIFF for posters and a resized version with a border for the website. The thumbnail is just a section of the drawing that I have resized to be 80 pixels on a side.
The Final Product
Thus we have the finished drawing.
It is Monday, the day I had to have all four of the items on the top list completed. I did it, and with minimal pain. I even finished the OS projects early, giving me a Friday away from the computer. Numerical analysis took two evenings. The parser ate up my entire Sunday except for a few hours before bed during which I made a few Industrial Roundtable logos. The following is a sampling of the eight I packaged for the committee to choose from:
I hope they like one of them enough to adopt it for next year's job fair.
In previous semesters I would get a short rest after cresting a wave of work such as this one. Not this semester. The todo list on my planner has grown despite completing those four assignments. My goal is to have everything done by Friday in time for spring break. Then I get my rest.
Update
Eric tells me they decided to go with someone else's design. Oh well.
I met my counselor yesterday afternoon to schedule classes for next semester. She pointed out that I have been so busy because I am taking 19 credit hours. The unexpected addition of the research project kicked me up from my original 16. I also found out that I could graduate with both majors next semester if I were to take 20 hours. I knew my progress report was filling up, but I did not realize I have come so close. Pretty amazing.
I am cerainly not going to kill myself with 20 hours, so I planned to spread my classes between two incredibly light semesters next year. For the first semester I will be taking only four classes, totalling just 13 credit hours: differential equations (finally), software engineering, game theory, and Solar System astronomy (as opposed to the extrasolar astronomy I have already taken). The second semester is still very open. My counselor mentioned I could even be a part-time student if I wanted to save some money. I would much rather take one or two of the interesting CS classes I have not had space for before. Graphics, cryptography, databases, programming languages— who knows?
It will be grand. I will have plenty of time to work on my personal projects and on getting into grad school.
Update
I postponed software engineering until my final semester. It may be offered as a graduate-level course by then, which would satisfy one of my honors requirements. I am going to take Programming Languages in its place.
Update #2
I was unsually equivocal about this schedule. I did a lot of thinking about what-ifs over spring break. What if the graduate software engineering did not come through? I would have to take the 400-level class along with another graduate-level course. If I also wanted to take one of those interesting CS classes, I would have three CS courses that semester. A bit much, especially for my last semester.
I also asked myself how 13 hours would feel. I have learned from vacations that I am not happy with a small amount of non-pressing work hanging over my head. It circles around and around through my unconscious, grating on my stress level even when there is no real need to complete it right away. That would be my entire year.
I decided to take software engineering after all, pushing me up to a more normal 16 hours. I feel it will still be a reasonably light semester due to astronomy.
The schedule now contains programming languages, software engineering, differential equations, game theory, astronomy. I am looking forward to it.
I take back what I said about getting a bit of a rest from work. I came out of the woods only to find myself knee-deep in a sticky swamp of new assignments. Aside from the last of the 15 goals and a large bug to fix on the OS project, I now have at four other large assignments on my plate:
- The next OS project. It is due at the same time as the revised due date for the current project. Fortunately, I hear it will take at most two hours to complete. We have to build a simple threaded program. Easy.
- Numerical analysis problems. These assignments take entirely too long for the number of questions. Last time, two questions took me three days. I joked with Eric that it was almost as bad as his normal ChemE assignments.
- A parser for the research project. Lee, Chris, and I are all in the same OS class, so The Big Shell Project has monopolized most of our time. We have designed a language syntax with the help of our advisor, but I am ashamed to say we have not had a chance to code anything until now. I am writing the parser that will create our internal object structure. Ahhh... memories...
- Industrial Roundtable logos. Eric is a member of the Purdue Engineering Student Council which runs the Industrial Roundtable job fair. My new Buy Stuff page prompted him to recommend my design services to the IR committee. I have to provide them with a portfolio of options by Monday. If they choose my design, I will get a small fee and my creation on all the literature for the event. That would be quite cool. Would that make me a professional graphic designer?
All this in addition to at least a half dozen personal projects, each of which deserves a post of its own:
- My class notebooks have yielded a handful of drawings that I want to retrace, color, and post. At the top of the pile is a sheriff to accompany the gunslinger.
- I hope to unveil an addition to this weblog after spring break. Failing that, before summer break. It combines my affinity for introspective statistics and data visualizations with a desire to play with Javascript's magical XMLHttpRequest object. XMLHttpRequest allows one to create truly interactive web applications. I have big plans for this project.
- I have not forgotten that I promised to add categories to my posts. This and many other incremental code changes will one day come to pass.
- There are at least three books that I am currently in the process of reading. One, William Hope Hodgson's The Night Land, happens to be online. I have two others on my shelf, and many, many more perpetually on my wishlist. I recently got a library card for the West Lafayette Library, so my shelf will probably grow while my wishlist slowly diminishes.
- I have kept a growing list of future weblog post subjects in my Palm. I hope to start working through that list, too.
- I still have not used my birthday present. I have picked a company with my father's help. I still need to sign up with one of the many online brokers in order to buy the actual shares in it. Dad has also spoken with a financial advisor and family friend with whom I plan to roll some old savings bonds into mutual funds. All that will surely have to wait until spring break.
I have always believed that one should do things rather than complain about the things one has to do. However, I am doing quite a bit at once, so I think I am entitled to a little bit of complaining. I wish that first list would go away, giving me time for the second.