Learning Adobe Illustrator by manually tracing: Jango Fett Pt. 1

Learning Adobe Illustrator has been a goal of mine for well over 15 years now, ever since I stopped working at Adobe. It has proceeded in fits and starts.

I am currently working on manually tracing Jango Fett. Why Jango? For one thing, the reference photo I have is a good pose, but more importantly, being a lifelong Star Wars fan, drawing Boba Fett is something I would only do when I know the result is going to be really good. Episode I-III are impossibly bad, so I might as well start there, as there’s no emotional connection with those characters.

Why manual tracing? Illustrator is a strange tool. Using the brush tools in Photoshop (a la digital painting) seems to be more intuitive for many. You just pick a brush, and draw or paint, and what you see is what you get. Illustrator, however, is based on vectors, and vectors are a non-obvious abstraction. Even when using Illustrator’s pencil tool, the result differs from the drawn curve in often maddeningly subtle and important ways.

So, while I think there is room for freestyle sketching in Illustrator, I think it’s bread and butter is in more precise “construction” with curves. DKNG’s work is a great example of what’s possible here. It’s high quality, but I would not call it spontaneous or sketchy. Vector art is rigid and laborious; architecture folks would call it tectonic.

As such, perhaps if you’re really good, you can draw in Illustrator starting from a blank canvas, but for many, the process starts with an underlying sketch or reference, which is then traced. Sometimes the sketch is your own, and sometimes the reference material comes from elsewhere. You can try using auto tracing tools, but your mileage will vary. Manual tracing is a fundamental skill, both to improve your understanding and intuition for drawing with Bezier curves, but also to get a result that is suitably precise and good.

One aspect of learning Illustrator that I found daunting in the past was trying to get from blank canvas to finished artwork in one conceptual leap. That didn’t work, so being a bit wiser now, I’m breaking down my effort into stages.

  1. Get principle curves down on the artboard. They don’t have to be perfect, but they should be in the ballpark.
  2. Fix up any issues with how curves connect and intersect, so that the overall construction is coherent
  3. Start making fills and coloring
  4. Once it starts looking good, trim and tighten up the lines

So far, with my Jango Fett drawing, I have finished stage 1:

Side by side
In context

So far, not bad. As I’m making a line drawing, I’m not intending to precisely capture the 3D geometry of the original. So I’m still working out some simplifications to the connectivity of the lines and shapes. See for example the right side of the helmet. Some elements are kept 3D, and some are flattened into lines, so I’m still making some choices on how to make it work together. Also, the convexity of the lower right side of the helmet is too much. And so on.

Furthermore, I’m not constrained to the original. It’s just a movie prop, and some finer details look crude and somewhat unimpressive up close. So I am free to tweak and embellish if the end result still works.

That said, the overall look is definitely there, so I’m happy with that. And I’m also happy to have made it this far with a drawing! So there you have it, learning Illustrator by manually tracing.

Version 1.2 of Moderately Austere, a personal blog WordPress theme, has been released

Version 1.2 of Moderately Austere, my personal blog WordPress theme, has been released to Github.

What is Moderately Austere?

Moderately Austere is a fork of the Twenty Seventeen WordPress theme. Themes are GPLv2 or later, and forking was the natural way for me to start evolving the theme in new directions (as opposed to starting a theme from scratch).

I initially forked Twenty Seventeen to remove usage of vh units, which causes stuttery scrolling on mobile. I really dislike that phenomenon, and I don’t think the mobile browsers (Chrome and Safari) are going to remove their “resize viewport on scroll” behavior any time soon.

What’s more, I plan to keep making other tweaks over time. Version 1.2 is one such set of tweaks.

What’s new in version 1.2?

See the README.txt for the summary. I want to highlight two changes.

The first highlighted change is adding a CSS box shadow to the logo element. I use the logo to display a square profile image. As you can see in the following image, without the box shadow, the profile image is too flat on the header. With the box shadow, the profile image has a pleasing amount of depth.

The second highlighted change is changing the site font from Libre Franklin to Open Sans. The following image shows that the two fonts are nearly indistinguishable:

Libre Franklin is slightly blurrier. Otherwise, most people won’t notice the difference. I’ve used Open Sans on my earlier pre-Wordpress website projects, and I like it.

So there you have it! For 1.3, I want to tweak the headers (font weight, size, etc), and start exploring a different front page approach.

Post Update

I recently updated my post on how to write good blog posts. You can read the updated version here.

In this new version, I get much closer to capturing the points I want to get across. I use these guidelines as I write new posts and edit older ones.

Happy reading!