Crilley's Getting Started...

[markcrilley]

Hello friends,

I've just started dipping my toe into the web comic waters with a short comic diary of a recent trip to Japan. Thanks in advance to anyone who wants to check it out and offer tips/advice, etc.:

http://www.markcrilley.com/

Comments on the content are welcome, but I'm particularly interested in the technical aspects of the viewing experience folks are having. Are the panels too small, too large? Which of the two versions (the thumbnail on the right, or the simple link) is preferable? Is this 'part one' long enough to be considered a satisfying part one?

With any luck this will be just the first of many projects I can put online in the years to come. Thanks for any insights you can provide!

Best,

Mark

[kaos_de_moria]

very nice, story and drawings. looking forward to see more.

2 problems:
1st small font has no anti-alising
2nd edges semm rough, check this thread for more explanation:
http://www.zwol.org/forum/viewtopic.php?t=1346

kaos

[Greg Stephens]

I concur that the infinite canvas layout and storytelling is just fine, but the images suffer from .jpeg compression. Since you're using a limited color pallette, you may wish to consider using .png files, which can preserve the details of the image while providing a comparable file size.

The comic is one large .jpg file, which you may want to consider splitting into smaller files. If you do one image per panel, then you can control how compressed each image is, thus adjusting the compression to match- Panels with many details don't compress as much, but retain the details while panels with larger flat, detail-free areas can compress more. Though most of McCloud's morning improv comics show this technique, I think his Zot! Online (Chapter One here) is the closest to what your comics looks like in terms of panel placement and usage of trails.

I think the size of the lettering is fine so long as the .jpg compression problem is cleared up a bit. It really looks good so far and a little file optimization could make it look great.

The thumnail on the index page is really cool, and will probably get more people to view the comic. I haven't seen that approach too much.

[kaos_de_moria]

i do agree with greg in all points, except on the font issue. the font seems even more scrambled than the rest of the picture. therefore i conclude that your software does not anti-alise (how do you write this word?) at 6 points or smaller. but of course i could be wrong. i think greg has more expertise.

on the point of splitting the picture into multiple pictures. this always has two sides. the smaller each picture, the more files you have. each file has a header and therefore a certain size already without the actual data. in this case of course a lot of white is actually part of the picture and uses space, even if it is just white. i didn't realise that it is one picture as it loaded immediately. but if you'd like to enhance the quality it would make sense to split the pictures as otherwise the loading could be slow on non DSL connections.

kaos

[Greg Stephens]

There's a larger version Mark links to at a Geocities page where you can see the lettering more clearly. It's not a font, so I'm leaning toward .jpg compression being the cause of what makes it look the way it does.

[William G]

Geeze, it makes me wish I had the money to head back to Japan for the ChuSeok holiday that's coming up at the end of the month and visit my old flame before she gives birth and her fiance finally locks her away in the kitchen.

[Guest]

Thanks for the replies, Kaos, Greg, and William! Forgive my ignorance, but what does the '.png' stand for? I've got an older version of Photoshop (3.0, believe it or not!) so it may not be an option for me at the moment.

Quite right, Greg; if someone ever devised a font as crummy as my own handwriting, I'm sure no one would use it, myself included! :')

Thanks again for the input and encouragement, friends. I've got a much more ambitous project in mind, and will hopefully begin work on it soon.

Best,

Mark

[markcrilley]

Just a quick note to clarify the 'guest' is me; forgot to log in, sorry!

Mark

[kaos_de_moria]

oops, missing the insider knowledge. but anyway, about the font. i thaught it's a nice lettering and was already going to ask, what it is.

there is many freeware and shareware applications, which support PNG. problem is, not every application does the compression as well as others. try graphic converter if you use a mac.

(http://www.lemkesoft.de/en/graphcon.htm)

kaos

[Greg Stephens]

Thanks for the replies, Kaos, Greg, and William! Forgive my ignorance, but what does the '.png' stand for? I've got an older version of Photoshop (3.0, believe it or not!) so it may not be an option for me at the moment.

Essentially, a .png file is a currently popular alternative to a .gif file. Your version of Photoshop may not support saving as .png, but I'll bet it can do .gif files, so .gif may be gthe way to go. You can read about .png files here. Until last year, the .gif format was actually protected by a patent and it appeared as though it wouldn't be a useful standard, so many people were advocating .png as a free and open alternative. Now, the use of .png over .gif is recommended because the .png format is technically superior to .gif, offering more features. If you can't use .png, however, .gif should work.

The important thing to keep in mind is that .jpg images are compressed in such a way that the image will suffer in clarity when compressed too much and if you edit and re-save a .jpg file, it is prone to degrade and look worse over time (exactly what we thought digital media would protect against!). .gif and .png files don't work the same way, so you can safely edit and re-save them without the same loss in quality. Because of this, .jpg files are described as using "lossy compression" while .gif and .png are referred to as having "lossless compression."

There are also two useful features provided by .gif and .png which .jpg files lack: transparency and palettes.

What transparency is should be mostly self-explanatory, though how to use it may not be and .png has much more advanced capability in this regard. Scott McCloud uses partially-transparent .gif files in almost all of his online comics.

Color palettes means that the image will be limited in the colors it uses. This can cut down on file size tremendously, especially for comics like yours where the color range is limited.

As an experiment, here is a .png version of your comic (based on the Geocities version, which has some of the panels - panel 5, notably- in slightly different proportions than in the MarkCrilley.com version). This is slightly larger than the MarkCrilley.com version, and the file size is also slightly larger as a result- but not much larger- and most of the lines appear smoother. I was trying to make an example that was exactly the same proportions as the MarkCrilley.com version, but then I noticed that, starting with the larger Geocities version, the panel positions and sizes were different. I came up with a much smaller file size, but the image is smaller as well, proving nothing. Ideally, if one starts with the same scanned source image, a .png or .gif file will handle this image much better than a .jpg file will. .jpg files have their place, but for art like this, paletted, lossless formats are something to think about.

Quite right, Greg; if someone ever devised a font as crummy as my own handwriting, I'm sure no one would use it, myself included! :')

I, for one, like the lettering style, but for the web, it's looking like it might be a little small, depending on what size you intend to make the comic.

[Guest]

Thanks, Greg and Kaos, for the continued feedback and advice.

Wow, Greg, you must be the Patron Saint of Fledgling Web-Comic Creators! Thanks for going to such lengths to show me the benefits of the .png format. I'm going to try redoing the whole thing as a .gif and see if it improves the quality. My official website is severely limited in terms of what I can do on it, so I think I will actually end up putting most of this stuff on the humble Geocities site and just link to it.

Thanks again for all the help. I'll let you know when I get anything new up and running.

Best,

Mark

[losttoy]

Hey Mark, it was nice that you got time to go to the Ann Arbor Book Festival before flying off to Japan to make comics. While I do not visit this board as much as I should, it appears that most everything that i want to say has been said. Thanks guys.


I will make my remarks anyhow. I hate PNG's because they always cause problems. I have to mess around with plug-ins to get them to work and they don't work on all browsers. They are more technical, but GIF's work fine for me. Here is my advice.

? Get yourself a new copy of Photoshop with ImageReady. You would be amazed by all the new features it has, including some vector art stuff that Illustrator would normally do. Also the "Save for Web" and "Save Optimized" features help to easily convert your document into a web image (and ImageReady can even do html, javascript, animation, and other fancy stuff).

? If the larger size looks better and fits on most screen resolutions, then use the larger size. However, my personal preference is to draw a web comic at 750 pixels wide so it will fit better in 800x600 screen resolution. I can see you were trying to make your comic smaller for files size, however there are lots of ways you can save down a file without losing quality. In the end, I always go with quality over speed. The fans that appreciate your work will wait the extra time to see good work.

? Learn how to save down your files. It has been said already you can save with palettes (also known as indexed color) instead of full color. Your comic is using black, white and about three shades of brown. Just think about ppi and bits of information that is getting saved. This brown could be R 165, G 138, B 122, or it is simply A58A7A. Instead of saving each pixel's color, you say upfront that the file has 000000, FFFFFF, A58A7A, CEBEB3 and EBE6E2. That is the benefit of saving as a GIF. Better quality, smaller size. However, if you are using lots of gradients, sometimes a JPG actually saves at a lower size with better image quality. It takes some playing around with to get used to. When using the "save to web feature you can have a 4 up display when saving so you can decide which is the best way to save it. Also when you use the "save for web' feature, it does not save an image preview which is not needed for use online and only makes the file larger.

Furthermore you can learn how to cut up an image to make several smaller images. As suggested, you can use a white background instead of it being part of a picture image. If you save panels separately, you can save them at different levels. I.E.: A panel with color gradients can be saved as a JPG, but the next panel that is only black and white can be saved as a two color GIF.

...

Other comments are I like the thumbnail and hey, nice comic! It actually captures me and I want to read more. Pacing is nice and it gets in the head of the artist as well as the feel of the country. Not bad for a first web comic. In fact I would say it was really great. Keep up the good work!

[markcrilley]

Thanks so much, Lost Toy, for the post and the great advice, and sorry it took me so long to reply. I'm really touched by the time you and others have taken to help me out. I will definitely try to take all these tips to heart as I proceed on the project.

So glad you enjoyed the story itself. It's a very different kind of thing from what I usually do, which makes it all the more interesting for me. I certainly had a lot of fun putting it together.

Thanks again,

Mark

[William G]

I'm going to stick to non techy stuff and again mention how well you captured the land of the hobby rice farm.

[ShadowCaster]

If you're worried about png file size, remember to reencode them with a tool like pngout just before uploading: the resulting image is smaller (in KB) and a pixel perfect copy of the original png.
For example,
getting_started_1_2.png 337 KB-> 267 KB
getting_started_1_3.png 253 KB-> 196 KB

BTW I can help artist willing to optimize their png slightly better than that automatically.
check this old post if interessed