The iPhoneTM and most AndroidTM powered mobiles have a screen resolution of 480 x 320 pixels, a 3:2 ratio. As there is a standard size and ratio for print comics, this resolution is quickly becoming the standard of mobile comics. If you are willing to submit a proposal to us, your screens should have these dimensions.
In this tutorial we will offer some guidelines and materials for creating 480 x 320 screens of mobile comics. Bear in mind that mobile comics are a brand new world of possibilities, so we invite you to challenge everything we state in this tutorial and to experiment at your own leisure.
Setting up your document
You can work at any resolution than you like as long as it is equal or higher than 480 x 320 pixels (if your document includes bitmaps) and it maintains a 3:2 ratio (meaning that one of the dimensions is 50% larger than the other). Some common pixel configurations:
- 480 x 320
- 720 x 480
- 960 x 640
- 1200 x 800
- 1440 x 960
- 1680 x 1120
- 1920 x 1280
Only the last one begins to be good enough for print.
Landscape
Landscape screens are such when the width is larger than the height. Below is an example of a landscape screen. The black borders indicate the edge of the screen.
You can use the following Adobe Illustrator template to create landscape screens.
Portrait
Portrait screens are screens where the height is larger than the width. Below is an example of a portrait screen.
You can use the following Adobe Illustrator template to create portrait screens.
Although there is no set rule against using both landscape and portrait screens on the same mobile comic, it has to be very clear to the reader that, after navigating to a screen with a different orientation, he or she has to change the orientation of the phone.
Margins
As shown in the examples above, we recommend using margins of 25 pixels for differentiated elements and dialogue. While the background can take up the whole screen, other elements too close to the edges might be distracting unless there is a particular reason for the element to be there (for example, to imply an entrance) .
Exporting your screen
AndroidTM supports PNG, JPEG, GIF and BMP image format, yet PNG and JPEG are preferred (in that order). Export your screen in PNG format, making sure the export measures 480 x 320 or 320 x 480 pixels.
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.
Related posts:
February 26th, 2009 at 10:09 pm
great tutorial
February 26th, 2009 at 11:11 pm
Thanks for the info for quick set up!
February 27th, 2009 at 4:58 am
Your files output as text.
February 27th, 2009 at 5:04 am
We’ll fix it eventually. In the meantime, right click and save as should do the trick.
March 12th, 2009 at 8:28 am
Awsome tutorial! I want to try this.
March 13th, 2009 at 1:07 pm
Hey very nice blog!!
December 11th, 2009 at 5:17 pm
Hi,
Great tutorial and great service. If you could just add a psd template as many creators work on Photoshop.
June 22nd, 2010 at 11:10 pm
Thanks for the tutorial! A lot of questions spring to mind. I would like to know how to publish a digital comic on the internet so that people can download them to their android phone. How do I combine my png sequence into a single comic-file? What kind of file would that be? If I want to include sound effects or movement, or even the phone buzzer effect (what y’call it?) how do I do so?
Is there a site that helps publishing your comic if you want to make money off it?
And, oh yeah: I can’t find the excact place of a downloaded comic on my android phone. Where do I store my home made comic so that I can test it?
Thanks!
Erik