Overview

Adapting Comics for iPhone

Column

Share this column

  • Button Delicious
  • Bttn Digg
  • Bttn Facebook
  • Bttn Ff
  • Bttn Myspace
  • Bttn Stumble
  • Bttn Twitter
  • Bttn Reddit

Happy New Year, everyone (or New Year’s Eve for those dedicated enough to be reading this the day it was posted). In this week’s column I’m going to share with you what I’ve been working on over the holidays; adapting my comics for the iPhone and similar devices. This is an issue I brought up in the last column and now I’m going to take a more practical look at how to actually do it. So if this happens to be your first column of mine because your New Year’s resolution was to start reading Delusions of Grandeur, I would recommend going to the archives and reading the 12/17 column, “Making It Right.” If the topic seems interesting enough, come back here and have a look to find out more.

I managed to convince myself in the last column that reading and making comics for these iPhone devices (is there a word for the device so I don’t have to keep referring to it by one particular brand?) was actually a pretty good idea. So I signed a deal with iVerse Media to make my comics available for the iPhone (also the iPod touch and the Google phone, but I’m just going to use iPhone until someone gives me a general product name). This deal involves adapting the current comics I’ve already developed for print, and more importantly making new comics specifically designed around the iPhone screen size.

This is actually what iVerse is more interested in acquiring, comics made in the screen size format, rather than having comic pages cut up to fit the screen. As I said last week, the new approach to putting comics on the iPhone is to have the story told in a series of screen shots rather than have readers scroll around a page that doesn’t fit the screen. So you can image this would be a lot easier to do if the comic is actually made with this in mind.

But for now, in order to get enough content to sell on these very popular devices, iVerse is happy to accept adapted comics until enough new titles can be designed around the proper format.
And this is exactly what I’m doing, and have been doing for the last couple of weeks. It basically requires you to go into each page and cut it down into a panel or series of panels that fit into the screen size.  It has proven to be more challenging than I thought, but it’s quite an interesting exercise nonetheless.

Let’s look at two pages from my series Adrenaline. First we have a page from the scuba diving adventure in issue 4, then one from the skiing/snowboarding race in issue 6.

   

At first I thought the page from #4 would be much easier to adapt because it’s told in widescreen panels. I thought the series of the four smaller panels might be tricky, but I could always break them up. But I thought the page from #6 would be really difficult with it’s big open panel and the three vertical panels in the opposite shape of the wide screen.

This was my first learning experience. As it turns out, despite the fact that the iPhone is a widescreen, it’s not nearly as wide as most horizontal panels in comics. It’s much more box-like. As a matter of fact, if we placed these screen shots on a normal sized comic, only two of them would fit.

So what a person adapting a print comic needs to do on most horizontal panels is to zoom in on the panel and cut off the sides as much as they can get away with. You can see from the first panel of the scuba page that even after I cut off a lot from both sides, I was still left with a lot of empty space on the top and bottom.

This isn’t ideal by any means since readers are viewing the image on a small screen, so we don’t want to have to make it any smaller. The best thing you can do is to cut off everything you can possibly get away with and then center the image and hope there isn’t too much on either side.

Even on the last panel of this page, which was much taller, I still couldn’t make it fit perfectly.

As a matter of fact, the best fit I had on this page was keeping the sequence of four panels together in one screen shot.

Now, I know this makes each panel pretty small, and I could have made each panel its own screen shot, but this would have really slowed down a part of the story I had intended to speed up. This is why I made them smaller on the original page. For this reason I don’t mind if they’re small on the screen. There aren’t any small details that are important to see.

And one of the great things about this adaption process is that if you’ve kept the lettering on a separate layer, you can put them in after you’ve shrunk down the panels and make them the appropriate size. Sorry, I didn’t do this here because my letterer will do that with the actual files. This is just me in Photoshop showing him how to make the page look. But you can actually keep the lettering at a decent size despite making the images smaller. Of course you need to have the room in the panel for a larger relative balloon size, but I’m a lot less concerned with covering things up in this format.

Anyway, that page is done, and it’s passable even if it won’t look particularly great on the iPhone. But to my surprise, the page from issue 6 actually adapted really well. The big open panel fit really well into the screen size, which as I’ve said, is more box-like than I had thought.

And as an even bigger surprise, look how great the sequence of the three vertical panels looks.

This serves as a good example that screen shots can still be broken down into panels that are meant to be read quickly across the page.

And that was the real benefit of this process for me. It made me think about storytelling and pacing, which will be useful for when I start creating stories specifically designed for this format. I can only imagine how much easier it will be to make a story fit this method when I’m actually aware of what needs to be done ahead of time.

Of course, there is still some room to play around with the layout of each screen shot. While most of the shots will be single images, I’m sure I’ll throw in some different layouts every once in a while, test out what can be done without demanding too much from the eyes of the iPhone reader.

Fabio, my friend and collaborator, who’s doing the art for one of the comics designed specifically for the iPhone, has been trying a few different ideas. Here’s a page that he’s split into two wide panels all the way across the page.

I wouldn’t want to do this too often because it makes for very short panels that will be hard to see. But in this instance it does a great job conveying the speed of the action.

That’s about all I have for you for now. I’m sure I’ll have more to say as I get deeper into this project. It’s definitely worth watching how this iPhone stuff develops.

###

Tyler Chin-Tanner started his own publishing company, A Wave Blue World, and writes and draws layouts for Adrenaline, its flagship series.
© 2008 Tyler Chin-Tanner.  All rights reserved.
Email:
tyler@awaveblueworld.com
www.awaveblueworld.com

Comments

There are no comments yet.

In order to post a comment you have to be logged in. Don't have a profile yet? Register now!

Latest Headlines
Latest Comments
Forum Talk