"The Girl With the Dragon Tattoo" Illustrations

As a total spur-of-the-moment, just-for-fun experiment, I took a whack at rendering Lisbeth Salander and Mikael Blomkvist, the lead characters from the recent "The Girl With the Dragon Tattoo" film.

I found a few photo references for each character, and just started laying down basic shapes in Freehand. I challenged myself to keep the shapes as primitive as possible, to see if I could still render a recognizable likeness. I kept the images very formal, so the face structures are completely symmetrical.

At first, Lisbeth's eyes and nose ring were round, but they stood out as the only curved shapes, so I went back and replaced them with flat shapes later. Restricting the shapes this way seemed to work - it kept the style cohesive.

I kept the colors limited, and allowed only one level of highlight and shadow for each colored surface. The backgrounds were pulled from the eye colors.

Detail - before and after grunge.

When the images were finished, I pulled the vector shapes into Photoshop (keeping them as Smart Objects, so they could be resized - even larger - without any quality loss) and added some texture. The grunge layers were free high-res files that I found online. The layer modes were set to Multiply. Lisbeth's  texture looked perfect as it was (it had a nice natural gradation - darker at the edges and lighter in the middle), but Mikael's needed some erasing in the center, so as not to obscure his face too much.

And that's it. Here are the final pieces:

UPDATE: It looks like the style is sticking around:

Corkboard

I've been thinking about a way to share friends' projects for a while now, and I finally went ahead and built one. Check out my corkboard.

I knew I didn't want to build a traditional portal. Whether it's a bunch of images in a grid, a combination of text and images (like blog posts), or a gallery with sequential images with one large/featured image and a bunch of thumbnails or navigation - I didn't want anything like that.

There's something interesting that happens when you have a disorganized collection of stuff. I wanted to create something closer to the physical, tactile experience hunting through a pile of old records, or photos, or a messy section of a store. Summaries are nice sometimes, but it's a different experience getting a small glimpse of something, then jumping into it with with no other preparation. That's what I wanted to make.

I searched through existing free or pay versions of this kind of this kind of interface, but none were customizable to the degree I wanted. I did find some existing drag and drop galleries, but none of them allowed the user to click on the image and open a pre-defined URL (and not a larger version of the image). Had I found a solution like that, I probably would have went with it.

Instead, I built a custom app in Flash. I've created Flash/XML galleries before, but this was more complex because it's dynamically duplicating images based on the number of items in the XML list instead of filling in a bunch of pre-defined spaces. From a technical perspective, making sure all of the elements had been loaded before the animations began was the biggest challenge. Once I had that working, the majority of the technical work was done.

I wanted a tactile experience, so I created an animation effect where the image lifts when initially grabbed - it rotates a bit, the shadow lightens and moves further away from the white border, and the tack lifts of and gets slightly larger. Subtle stuff, but it adds to the physical feeling of the app. This created some technical issues - the "drag" button is under the "view" button (the center of the image) and rotating it sometimes caused it to rotate away from the mouse,  causing it to get stuck. Some careful motion tweening fixed this. A little "pop" sound helps sell the tack removal/inserting effect. I kept the description under the image really minimal - only two or three words will fit, depending on their length - and I used a handwriting font (even with a bit of a blur effect) to keep the interface looking less digital and more analog.

I photographed all of the elements on my iPhone, then assembled them in Flash. As each movie clip is duplicated, it's given a random horizontal and vertical position, rotation, and one of three possible tack images. I made the corkboard image tile in the HTML (after removing the seams in Photoshop), and enlarged the Flash file to 100% so that the elements could (if their random start positions or dragging allowed) go beyond the bounds of the window. I'd considered adding a border around the Flash file itself, and making the HTML a wall element (like wood grain) but this effect - filling the window completely - worked out closer to what I was going for.

During the development, I also discovered a bit of code that allowed bitmap (raster) images in Flash to smooth - that's always been a problem in the past. That's always been a compromise when using raster elements in Flash - when the .swf is presented at anything other than 100%, or when individual images within the file are presented at any other size or rotation than their default (100% and no rotation), the images look jagged. The new code worked great - I'm glad someone worked out a solution. Unfortunately, it's executed within the Flash application, so it doesn't help the dynamic images. I did more searching and discovered the .forceSmoothing property - not sure how I missed that before, but by adding one line of code I was able to make all the externally-loaded images look beautiful. That was very satisfying. I was worried that it would slow down performance, but after playing with the app after the update, I didn't see any noticeable slowdown.

I also randomized the depths of the elements. Initially the pieces were all coming in in the order of the XML file, so the earlier images were always buried. After trying and failing at randomizing all of the duplicated movie clips after they were created, I used the "sleep on it" method and instead randomized the order in which they were loaded from the XML-created arrays into the duplicated movie clips. That worked out much better, and now any project stands an equal chance of being at the top or bottom of the pile. And once a project is dragged, it moves to the top of the pile anyway.

After I had the basic app working for a couple days, I made a couple big tweaks. When I started the project, the images were much larger, but because the number of projects kept increasing (to 117, at the time of this posting) I had to reduce their size. I went back and created three buttons at the bottom of the page that allow the user to resize all of the elements to 70%, 100% (the default, of course) or 130% of their original size. This definitely helps when trying to dig in deeper, making sure more of the elements are visible - or, conversely, letting the user see larger images, though with much more overlap for a messier experience.

I played with the site more and added two more features. The first was stack/unstack option, turned on and off with two separate button. The stack throws everything dead center, and lets the user sort through the images one by one. The unstack button throws everything back to its initial (random) position.

I then added a categories feature. It pops in and out via a button at the bottom center. At first I didn't want to give users the ability to search too easily - and possibly ignore stuff that they might otherwise enjoy when discovering it by chance encounter. But with so many varied projects, this seemed almost necessary for people to really use the app - especially for repeat visits. Users can click All Off, then click on only what they like - or, they can start with All On (the default) and subtract out what they don't want to see.

Keeping with the minimal explanation (think Led Zeppelin IV) effect, I didn't add any extra information to the page. Just a Facebook share button and a little box linking to me for any administrative questions or issues, and it was up and running. I didn't want to give visitors the kind of navigation or explanatory elements most sites have - in the end, this is an art project, and it's designed for exploration more than traditional, sequential viewing/reading.

I may give it its on URL someday - though all the cool ones are taken. If only there was an international domain suffix for .rd, I could see if "www.corkboa.rd" was available. Ah well - have a look at the  corkboard.

The Camp Out - A Jabloo Adventure

I've just finished writing and illustrating a storybook using my Jabloo characters. The story is aimed at kids 3 to 6. You can read The Camp Out online.

I created the Jabloo gang back in 2006, and this was the first story I conceived for them. There's something about the camping out in the woods that's always evoked the idea of creativity for me - maybe it has something to do with telling stories around the campfire, though I don't think I've ever done that.

Since each of the Jabloo characters represents a different creative art (filmmaking, music, acting, writing, and visual art), The Camp Out is about them creating a piece of art - in this case, a monster movie. Yubi, with his video camera, is at the center of this creation, but each of the other characters contributes to the movie as well.

The story was designed as an "adventure" - meaning, it's not an introduction to the characters, so we jump right into their camping excursion. Kind of like an episode of a continuing television series rather than a one-shot, stand-alone show.

I worked backwards with the layout of the book, using Shutterfly's Photo Book sizes as the basis for my design. I went with a 7x9" book, so I opened up Freehand (the now-outdated piece of vector creation software that I used to create Jabloo - and still use daily) and set up a 7x9" document with a bleed area.

It's nice when the hard work is already done!

Much of Jabloo was already created - the characters with different hand and mouth positions, fonts, colors, even many of the backgrounds in The Camp Out (for the as-yet-to-launch online, interactive version of the story) so I was able to move into the book's creation quickly. I'd spent months analyzing the layouts of my son's books (which contained every imaginable style of layout) and decided on a full-page image every page (with a few exceptions - the first page and a two-page spread), and a limit of two sentences of text contained within a white arc at the bottom of each page.

Dig those crazy vectors!

I put the story together in a fairly haphazard way - writing a few pages, putting the illustrations together (which could take hours or days - even with many of the elements already created), adding a few more pages, changing the sequencing. The story itself is 24 pages, with a few additional non-story pages at the front and back.

I wrestled a bit with how much story detail to include - especially when it came to the movie the characters are putting together. I wound up showing only an indication of the story they were telling. The two-sentence limit on each page was a good natural limit, forcing me to only hint at the monster movie. The reader's imagination adds the details. I think that works nicely. It's a story about creating art, not about the creation itself.

Since Freehand is no longer a current program, and copying/pasting into Photoshop isn't viable (gradients get messed up, and there are other issues), I went through a tedious process of maximizing the Freehand pages on my 30" monitor, grabbing screenshots and shrinking them to get smaller, high-resolution images for printing. Of course, after doing this I found plenty of small things that needed revising or correcting, so I had to repeat the process for many pages. It was still a worthwhile compromise for being able to work with the beauty and elegance of Freehand.

I had a few hiccups when I began assembling the book in Shutterfly. When I was writing and laying out the book, I didn't set the pages up as two-pages spreads, so some of the images (especially the backgrounds) looked awkward when placed side-by-side. For example, some of the hills in the background seemed to run into each other, making the pages seem like they were meant as two-page spreads (that didn't quite align properly) - but with the same characters on each page. So adjustments had to be made to the backgrounds as well.



The next stage was assembling a readable version of the book online. I could have gone with a more straightforward gallery, but the effect of side-by-side pages would have been lost. I found a Picasa-based template online and, after plenty of technical issues, got the online version up and working.

The final printed book from Shutterfly looked great. The only minor drawbacks are a white area on the left of the cover (presumably the digital printing would flake off where it bends back) and the fact that you can't print a back cover (unless I missed that option), so the back of the book is plain white with a UPC code on it. But the printing itself looked great, as I expected from previous Shutterfly orders. And as much as I consider myself a digital kind of guy, I have to admit a piece like this feels different when you can hold it in your hands.

Read The Camp Out now - preferably with a kid or two.

Batman Comic Page

I haven't drawn a comic book page in a long time, but recently I've wanted to develop that skill again. My normal illustration style is pretty cartoony, so one of my goals was to work in a somewhat more realistic style. Another goal was to try a new digital coloring technique I'd just discovered. So this was an experiment more than anything else.

I read a few tutorials just to refresh my brain on drawing a comic book page. This tutorial on drawing Copper by Kazu Kibuishi was the most helpful by far. I discovered it a few years ago and have read it a few times since, but this last time it really got me jazzed up to try doing a comic page. I went out and bought an 11x17" smooth Bristol pad, pre-lined for comic books (something that didn't exist the last time I drew a comic page, fifteen or so years ago), a non-repro blue pencil (never really used those, but I thought it would be nice not to have to erase my pencil work), a new eraser (for erasing pencil errors), process white paint and a brush for errors in the inking (which I never used), a Hunt number 102 Crow Quill nib pen (as mentioned in the Copper tutorial), and Higgins Black Magic India Ink (also mentioned in the tutorial). I also had a few of my handy Tombow brush tip markers handy - I've been using those or similar models since the early 90's.

I decided to do a page featuring Batman, my favorite superhero - just to make things simpler. Using an existing character let focus more on my style and the page, rather than creating an original character (and likely, a costume) for this project. I can draw Batman almost without thinking. Because the character is so iconic, and I was just winging it and not working from a script with pre-defined panel descriptions, I started penciling with the non-repro blue right on the page, laying out some panel divisions, then adding the character and some backgrounds. Unfortunately, I didn't scan those pencils, but you can get a sense of them from this raw scan of the linework (yes, I'm jumping ahead) - and you can also see that I made the rookie error of inking to the full page size instead of the live area - I'll definitely have to avoid making that mistake next time.

Next, I tried inking using the nib pen, but - unfortunately again - it just didn't feel right. Lest it seem like I didn't give it much of a shot, I actually diverted myself to a few separate pages in the midst of this experiment. Call it laziness, or habit, or comfort, but I reverted to my Tombow brush tip pens, and it just felt right. I like my linework to be bold and that wasn't happening with the nib pen. Though I have to say, working at only 150% of the final size made fine feathering and detail very difficult - especially in the panels where the character was smaller (hey, it's not like your pen tip reduces proportionately to fit). I made many blobby errors that I later cleaned up in Photoshop. I also did thinks like filling the sky in the first panel solid black (see the image above) which I later undid in Photoshop. Here's the eventual result of the inking process, after removing the non-repro blue pencils and darkening the inks until they were almost pure black and white:

And a closeup of one inked panel:

I think I hit the style I was going for - my figure wasn't very cartoony in his composition, but my linework was chunky and varied in the way I like it. I'm not a crosshatchy kind of illustrator, and I don't feel comfortable working with a totally clean line - I think it makes me feel too exposed. I also wound up with many more solid black shapes than I was hoping for, which was somewhat disappointing because I wanted to focus on digital coloring, and that's harder when solid blacks handle much of the shading. Kinda hard to draw Batman without using a lot of black, though. These things are just part of the constant artistic struggle of trying something new vs. knowing your innate style. I've grown comfortable with that struggle.

I did have a problem with the non-repro blue pencil - in some places it didn't let my brush tip (and water-based) ink sit correctly, so I had to clean the linework up later (again, see the first image above). The light blue template lines in the page did the same thing in places, so I think I'll be avoiding both in the future, which is a darn shame - both are convenient. 

For the coloring, I watched a few tutorials on YouTube, this one by Tony Aviña being the most helpful. Even though the style he was demonstrating was something he used more in the past (he said it was the house coloring style for WildStorm Comics), I stuck with this method - starting with dark, flat colors, then adding cuts and gradients - rather than trying a more brush-based coloring technique. I typically work light-to-dark, and I wanted to try a different, more efficient coloring method. Check out the tutorial for details. I can say that by forcing myself to work this way - and not creating dozens of "safe" layers for highlights and shadows - I was eventually making better coloring decisions and getting the page done without constantly making slight tweaks and trying to make everything look consistent. And of course, I used my Wacom Intuos tablet for this coloring work, so things moved along fairly quickly.

I also used Kazu Kibuishi's method of filling each panel with a base color (mine was orangey) to bring all the colors together and avoid them looking too separate and kaleidoscopic (his term). This made it easy to easily experiment with and adjust that global hue afterward. I tried some greener colors, but this orange layer, with the mode set to Hue and at 30% opacity, worked best. It took some time, but the whole coloring process flowed much more than it has in the past for me.

The final colored page:

The only real "special effects" I did beyond the typical coloring method was adding stars in the sky with a slight outer glow, and the shadow on panel two. 

Now, I've been reading some new comics - more than I have in the past decade. In both Sweets by Kody Chamberlain and The Cape published by IDW, there's a strong halftone effect used to add to the tone. I liked how both artists used this effect - the last time I used halftone for illustration work, it was called Zip-a-Tone and you had to cut it with an X-acto knife and place it right on your illustration. And the funny thing was, back then I wished it could be a smaller, finer pattern - and now the style I was going for was the same big, obvious dot pattern effect I'd used in the past. Crazy how things change, huh?

I created a halftone in Photoshop, filled then panels, then (mostly) erased away the parts I didn't want. I tried to keep the halftones to the edge of the black areas, though I did use it for the entire skyline in the first panel. I was very loose with that pattern, and I really like the grungy effect it gave me. In the end I made it dark blue instead of black, and set the layer to Multiply instead of Normal. Try doing that with Zip-a-Tone (don't really try - you can't).

Oh - and I created a subtle texture that I laid over the color. I filled a layer with 50% gray, added a lot of noise, then set it to overlay. It gives the color a little more of a natural media effect, especially when viewed at a large/close-up size.

I composed the text afterward, which really isn't fair - if something didn't fit, I just edited it down. I know - cheating. For the lettering itself, I used Comic Book Commando (regular) on top of some dingy yellow boxes. The boxes were on their own layer, and I gave that layer a Stroke effect (so I didn't have to keep re-outlining them every time I resized a box), and a little inner glow (really a shadow) and a noisy, subtle drop shadow. Pretty ostentatious stuff.

Here's the full, finished page, with the bottom two panels I haven't shown yet:

And a couple closeups of finished panels. You can really see that overlaid noise layer in these.

I was reasonably happy with the final piece. Of course, I found many reasons to work on my sketching, anatomy, backgrounds, coloring... but it was a nice workout, flexing muscles I haven't flexed in a while. More comics to come!

Feller's Baking Company

I developed an identity for a wholesale baking company. This project had an extremely tight turnaround time - the business had to get running in only a few weeks' time - so I got to work quickly.

After giving me an overview of his new business, the owner's only design suggestion to me was a request to use brown and cream. Though I had to make the "cream" color a little darker so that it could stand on its own, I presented six concepts using that color scheme.

The first concept uses thick letters that felt hearty, like freshly baked loaves of bread. I added the cutouts in the letters of "Feller" to suggest the slashes made in the tops of baked goods to release heat. I also created a few smokey shapes in the same blocky style as the typeface, and added a bottom line with end points matching the letters' serifs:

Concept two combines two friendly fonts - one with a prominent, rounded serif, and the other a script that worked well at a small size. I had to tweak a few of the script letter shapes - the lowercase N's originally looked more like U's. I then created a badge-like shape to contain the "Feller", and added some cream rays emanating from behind that shape:

The third concept uses a stencil face for a more rustic feel. I created an image of a cupcake in the same handmade, scratchy style as the text:

The fourth concept is more formal, and uses only type and design elements for an emblematic approach. I also added a bit of a 3D feeling to this concept:


Concept five has a simple, all-type approach. I combined a tall, naive-style typeface with a thicker stencil one. I also reduced the first "E" in "Feller" to fit in the "the", carefully slicing out sections of its vertical bar rather than just squashing the letter, which would have distorted the its shape.

The sixth and final concept uses the same rough-looking font for all of the lettering. I combined some of the letters to create a more unified look:

The client chose the fourth concept - he liked the strong emblematic feel, and liked the fact that this approach had the feeling of a motorcycle company's. But there was one change - the company's name would now be "Feller's" instead of "Feller". I recreated the main shapes, adding the apostrophe S. I had to shrink the height of the top shape to accommodate it.

Because the client liked that dimensional, almost metallic feeling of this concept, I amped it up by adding additional 3D effects to the background of the top shape, and to the letters in "Baking Company". This is the final, full color version - ideal for signage, presentations, advertising, and other uses where colors are unlimited:


I also prepared a simple two-color version of the logo. This might be used for packaging, vehicle signage, letterhead, or other printing processes where full color printing isn't available or financially feasible:

And I also prepared a single-color version of the logo and presented it in a number of colors, on both black and white backgrounds. These versions might be used on product labels, fax templates, invoices, checks, and other instances where the logo does not need to be prominent, and where color printing may be limited or unavailable: