A complete Illustration job for a website, done on the iPad

Benjamin Rabe

Design by Moonlight

Joey Livingston is an avid fingerpainter who has been around quite a while, but to my own worries had turned a bit silent over the last weeks. Turns out he was busy with one of the most complete and impressing illustration projects done on the iPad that I’ve seen so far.

(I met Joey in a small café at the back of our minds for a little interview.)

Joey, you just relaunched your own website, Commotion Creative, completely illustrated on the iPad. What was your job in it?

I was the illustrator with the iPad. 🙂 Actually, it was my task to oversee the whole project. I did all the illustration work, designed the look and feel of the site, and did much of the writing.

My partner, David Egerton, offered a lot of helpful criticism, did some of the writing, and designed some of the layouts for the content below the masthead.

Carry the One

Can you tell us a bit about the process: what came first, wireframes or illustrations? Did you do scribbles beforehand? And what apps did you use?

(The waiter approaches our table, but Joey simply shushes him off.)

The idea for the illustrations came first.  Then I did some thumbnail sketches and a couple of final proof-of-concept pieces to convey my ideas to Dave.

The concept was simple: Work is Play. Dave and I are both kids at heart. We’re very professional in our processes and the polish and pride we take in our work, but once we get to know our clients, we love to watch the walls drop, we love to kid around with them, and surprise them, and make them happy. Work is Play. And that’s where the kids building websites came in, because they instantly convey to people who we are: We love our work, we love to play, and making our clients happy is the best part of the fun.

I used Brushes for all of this, thumbnails and final concept pieces. The advantage of using Brushes for the whole process, thumbnail to final, was that once I got a page full of quick thumbnails doodled out that I liked, I could duplicate that document, erase all of the thumbnails but one, then blow the remaining thumbnail up, and use it as a loose guide in the background, to draw the initial lines of the final piece. This could’ve been accomplished if I had used two different apps, but it would have required more thinking than I like to do.

After we both agreed that the illustrations would work well, I designed a user interface that would compliment them.

How long did the illustrations take you?

I lose all concept of time when I’m painting, so it’s very hard to judge. It seems like most of the pieces took anywhere from 3 to 5 hours to complete. A couple, like the boys throwing web pages at each other in the footer, or the shelf at the bottom of the content on many of the pages, probably only took 1 or 2 hours.

The one exception was the piece I entitled “The Workshop”, which appears at the top of the “Our Process” page. That illustration was a beast. If I had to guess how long it took me, I might say 30-40 hours, but I really have no clue.

I went through numerous passes just to get all of the line work sketched out and cleaned up.

Then I imported a screenshot of the website so I could choose colors that were complimentary. Once I had the foundational color scheme worked out, I began to block in the colors for everything, and then went back and added shadow and highlights.

All of the illustrations went through some aspects of this process, but precision was far more critical for this painting, since the composition would fill the entire masthead. Oh, and it was my favorite piece, so that might have had something to do with it. 🙂

When and how did you decide for a format you were going for?

One of the initial concept pieces that I did is the one I entitled “Design by Moonlight”, which depicts a boy sitting with his laptop under a tree at night, designing a website.

That was my favorite piece at the time, so when I designed the user interface for the site, I put it in the masthead, and used it to gauge how tall the masthead should be.

Incidentally, the cliff that the tree and boy are sitting on was not in the original piece, and the idea of “moonlight” was an accident. The light on the tree is from the laptop, not the moon. The moon came in as an afterthought as I was trying to come up with a background for the illustration by playing with some effects in Photoshop, and happened to come across a combination of effects that looked nice. To me, it just looked like the colors of the sea at night; it didn’t make a lot sense to the picture, but I just thought it looked nice. But Dave pointed out that it looked like moonlight. It all just started clicking together from there.

The starry background was an obvious next choice, and once a nice starry background was created, the composition literally demanded of me that the boy and tree be on a clliff. So I took a screenshot of what I had so far, which was just the boy and the tree floating in front of the stars, and I imported the screenshot into Brushes for reference. Then I put a layer above the screenshot, and painted the cliff to match the lighting on the boy and tree, and from the moon, and I chose colors for the cliff that complimented the user interface. Then I trashed the screenshot and exported the cliff with a transparent background, brought it into Photoshop, and put the boy and tree on top of it. It all came together quite well. We liked the starry background so much, that it soon became a semi-consistent theme across the whole site. Dave literally pulls the website up in the evening, and stares at it, because it relaxes him! Really, it’s hard to convey just how strange he is.

Dave & Joey

Getting back to your original question about size/format. Once I had everything composed for the home page, which is where Design by Moonlight went, I took some measurements of the masthead area, where all of the main illustrations were planned to go, and I created a new Photoshop file that matched these measurements, which was 960 pixels wide and 370 pixels high, and put black borders on the top and bottom of it. Then I saved the Photoshop file as a JPG file and sent it to my iPad to use as a guide. Then every time I started an illustration, I imported the guide into the first layer, and drew on layers above it. This didn’t actually give me exact measurements, because the iPad screen is 1024 pixels wide, and I would import the guide and make it fill the screen. But I didn’t need exact pixel measurements at this stage; all I needed was exact proportions, which is what this guide gave me. I wanted to make sure that when I scaled the composition down to fit in the masthead, that everything would fall into place correctly. And that’s what happened, thankfully.

Boy with Color Wheel

On some illustrations, this wasn’t necessary. Like the boy with the color wheel, for example. He was going to be sitting to the left of some copy, so all I needed to do was make sure that I painted him big enough to where all that would be required, if anything, was to scale him down. Then I just moved him where I wanted him in the masthead. Proportional measurements were much more important on paintings like “The Workshop”, or the theatre full of kids that went on the portfolio page, where the painting filled the entire masthead.

Do you think doing the work on the iPad sped up the whole process?

Well, for the illustrations, the iPad was my only choice. I have a small Wacom tablet, but you have to look at the computer screen while you’re drawing in your lap, which I used to do all the time in the past, but it’s not ideal. I also used to have a small Wacom Cintiq, where you can draw directly on the screen, and that’s a truly amazing device. The biggest issue I had with it was that it was chained to a computer, and if I wanted to draw on it, my posture, position, and location was very limited. This can feel very constraining on the creative process, at least for me.

(At this point, Joey orders his fifth espresso. The waiter seems reluctant and removes the fake tulips from the table. Once he left, Joey retrieves some new ones from his backpack and puts them back on.)

This is something that I realized when I got my first iPod Touch and began to paint on it. The iPod Touch, the iPhone, and most particularly the iPad, are all amazing art creation devices. But are they as powerful as a Wacom tablet, or a Wacom Cintiq?

In my opinion, the answer is, clearly…no.

Wacoms have pressure sensitivity, and you can paint on canvases with massive amounts of resolution. And the software you have at your disposal, like Corel Painter, which is one of my favorite painting applications, are astoundingly powerful. You can simulate natural media in ways that boggle the mind. In my opinion, there is no comparison. Wacom wins.

But for me, that’s completely missing the point. And this was my epiphany when I first laid my hands on an iPod Touch. Painting on these devices is not about the resolution or pressure sensitivity. It’s not about natural media simulation, and it’s not even about the end result.

It’s about the experience.

This is where the Apple devices shine. There is nothing like holding an iPhone in your hand and painting on it. It’s like painting on air. True, the canvas is very small, but after a few minutes, you forget there is even a device in your hand, you forget about the canvas, and before you know it, there’s just this portal into another universe sitting in your hand, and you just paint. Zooming in and out by pinching, swiping around the canvas with your fingers; this gesture-driven platform is so natural that you forget it’s even there, and soon you’re just lost in this world where you’re creating as you’re exploring. And then there’s the iPad. Simple, light, and beautiful. Take everything that is wonderful about painting on the iPhone, and add this big, beautiful screen. It’s a bit heavier than the iPhone, but it’s no heavier than a sketchbook. And wow, that beautiful screen! It just sucks you right into your painting. These devices are so easy and light in the hand, and they don’t have any wires! You can paint anywhere! Sitting on your couch, standing in the middle of a crowd, lounging on your patio, lying in the park, relaxing at the coffee shop. You’ll lose yourself, lost in time, lost in paint, and suddenly, it will dawn on you how much fun you’re having! You’ll fill up with joy, and a smile will force its way onto your face, you might even giggle. Prepare to be embarrassed if you’re in a public place, because people may start avoiding you. It’s like being a kid again! I’ve owned these devices for at least two years, and this still happens to me all the time.

So when it comes to the experience, iPad wins. And that’s why I sold my Cintiq, because I didn’t have any money, and I wanted an iPad. People called me foolish, they said I was making a mistake. But I had been painting on an iPhone for a year, and in that year I had touched my Cintiq maybe three times. Most of what I loved about painting evaded the Cintiq, and everything I loved about painting on the iPhone was in the iPad. So I knew it was going to be amazing. And it is.

Webpage Fight

So to answer your question, yes, the iPad sped up the process, because I love using it, and once I get started, I can’t put it down. When your job feels like that, you can do incredible amounts of work, and feel like you’ve been playing the whole time. Here’s a secret: You are playing the whole time. But don’t tell anyone, or they may not pay you.

Did you use any other apps, like iMockup for wireframes e.g?

I have iMockup and OmniGraffle. They’re both really great tools for creating wireframes. But once I had done a few illustrations, I had a very solid vision in my head of what the user interface of the whole website should look like. That isn’t always the case for me, but we were fortunate this time. Once I got that vision into Photoshop, Dave and I studied it for a long time, tweaked it here and there, and eventually it evolved into the site you see now.

Are you planning to do some more illustrations for your website?

Absolutely. It was a blast creating the paintings that we have up now. The site might’ve had a lot more before it was done, but you might not have seen it for another year. We had to put a time constraint on the fun, so the site could be completed. Now that it’s completed, we have to move on to some client work and some in-house development for the time being. But we already have several ideas roughed out in sketch form that we think will make great paintings for the site.

Thanks a lot Joey for the interview. Now please pay the bill.

Joey Livingston is a website developer and Illustrator and also one half of Commotion Creative. Plus he has a beard.


7 Responses to “A complete Illustration job for a website, done on the iPad”

Leave a Reply