This is the first article in a series about adapting traditional comics into mobile comics, in which Robot Comics creators explain the decisions they made to adapt their own titles.

In this installment, Hermes Pique, writer of Misery Depot, provides a step by step tutorial on adapting a page of the original version of Misery Depot into various screens of its mobile version.

The page

I will be talking about adapting page 5 of Misery Depot, shown below. I chose this particular page because, unlike other pages whose adaptation consisted in simple creating a screen per panel, the result from adapting this page differs significantly from the source material.

Source material

We adapted Misery Depot from high-resolution originals without lettering. Working on non-lettered pages allowed us to resize the panels without worrying about the size of the fonts. Fortunately, we used digital lettering for Misery Depot and we didn’t have to tweak the originals to remove the lettering.

Concerning high-resolution, some panels -like panel 4 of page 5- may end up being larger in the mobile version than in the original version. A high-resolution source is needed to avoid quality loss. To avoid limiting options, the resolution of the image should be big enough so that any panel is larger than the size of the screen.

The source material for page 5 is shown below.

Screen 1

Our first instinct was to start the sequence with the first two panels as they appear in the source. It turned out that it was too much text for the screen, and that the transition from the previous sequence was too sudden. A screen flick is weaker than a page turn, so we decided we had to ease the transition between sequences. To achieve this we moved the first caption to a black screen that clearly indicates that a new scene begins.

Screen 2

To include all the art of the first two panels in a screen we had to fit their width to the width of the screen, reducing their size. The height of the resulting image was smaller than the height of the screen, giving us the opportunity to put the remaining caption without covering the art.

Screen 3

The third panel was the only one that was directly converted into a screen. Some steps of the process don’t require much thought.

Screen 4

A portrait panel followed by two landscape panels were left. Portrait panels are particularly challenging in landscape screens, because they leave most of the screen blank. In this case, we decided to move the caption of the next panel to the blank space of this screen. A fortunate decision because the caption fits this image better.

Screen 5

We conclude with the remaining two panels. The only change here is that we moved the last caption to the previous panel, ending the sequence with a panel that speaks for itself.

Conclusions

While we don’t proclaim that this is the best possible adaptation of this particular sequence, we felt that the result works in different ways than the original version. While adapting this page we learned or reinforced our belief that:

• A panel does not correspond to only one screen and one screen does not correspond to only one panel
• A screen flick is not equivalent to a page turn
• Blank spaces are opportunities to rethink the position of dialogue

We hope you found this tutorial helpful. Let us know what you think about it and feel free to ask any questions by leaving a comment below.

More about Misery Depot

Related posts:

1. Misery Depot definite
2. Misery Depot redux
3. Adapting Comics for the Amazon Kindle Part 1 – Optimizing Images
4. Robot Comics opens call for submissions for mobile comics
5. Where to find free CBZ or CBR comics