Illustrating the landingpad.org Helicopter

We recently launched Landing Pad, a site featuring the best and most beautifully designed iPad apps. We wanted the logo to be special and memorable - something beyond a type mark. A helicopter played off the idea of the landing pad and we quickly settled on “the one from M*A*S*H”.

Sketching

I found some reference material and started sketching. The sketching phase was particularly important for this illustration because I needed to simplify the helicopter in every aspect. The Bell 47G is a utilitarian helicopter and there are many exposed pieces so drawing it in charcoal helped to not get obsessed with the minute details.

thoughtbot landingpad.org illustration design process

Redrawing in Illustrator

I photographed the sketch, cleaned it up a bit, and loaded it in to Adobe Illustrator. I turned the sketch blue because animators sketch in blue pencils and I think it’s badass. It also helps differentiate your new lines from the sketch.

thoughtbot landingpad.org illustration design process

I made new vector lines using the pen tool, with a black outline and no fill color. A valuable lesson I learned is that I should have drawn full shapes with no open ended lines — doing this comes in handy later during the color phase, since you could easily select entire shapes and objects, not simply the negative space created by the outlines.

thoughtbot landingpad.org illustration design process

Ahh, nice clean vectors. A professor once told me, “Illustrator can magnify to 6400%, so do it!”. Zoom in and make sure your shapes are drawn well and your curves aren’t wonky.

The color phase

I did all of the color in Photoshop simply because I prefer it, but you can color just as well in Illustrator. I kept the vector drawing as a smart layer at the top of my document and switched it on and off to help keep on track but I did stray from it when I saw room for improvement.

thoughtbot landingpad.org illustration design process

I shaded over the flat color by painting in a layer with the airbrush using a darker, more intense version of the base yellow, and blended it using the multiply option. For highlights I used a bright, light yellow and blended it using the color dodge option. Never shade using black and white - it will appear dull, flat and monochromatic.

thoughtbot landingpad.org illustration design process

Details are important - even if they can’t be seen when the final image is scaled down for viewing on the web it will add to the complex gestalt and yield a more sophisticated outcome.

thoughtbot landingpad.org illustration design process

The final illustration

Getting to this point took around 30 hours of work. It’s tedious, but for the sake of the final version it’s worth not cutting any corners. Even the simplest objects had about 5 layers devoted to shading - two or three for the shadows and usually two for a nice, rich highlight.

thoughtbot landingpad.org illustration design process

The helicopter’s reflection in the iPad’s glass was an important element that ties the illustration together. On a matte surface a cast shadow would have worked in the same way to ground the object and give it a sense of resting on a surface. To view a higher resolution version of the final illustration click here.

Incorporating the illustration in to a logo

I wanted the illustration to be the dominant element in the logo, but not completely overpowering. The strong white text helps to balance the type and image together, and putting it on a black background provides nice contrast.

thoughtbot landingpad.org illustration design process

As for Landing Pad itself, we’re looking forward to the official launch of the iPad when we can get our hands on some apps and showcase them on the site. If you are working on an app and want to show off your design feel free to email us at design@thoughtbot.com or submit it directly.

Kevin Burg

FormKeep is a form backend for your static sites. Great with Jekyll or Middleman. No iframes, JavaScript embeds, or CSS overrides. Filter submissions for spam and forward them to other services using webhooks.