I make a webcomic (CarpeChaos.com for examples), so I produce a lot of images with a fairly extensive amount of text in them. I want to make sure the fonts in those images are as readable as possible. My training on this topic is someone who has read a lot about it online, I'm not professionally trained, so some of my assumptions may be flawed, please point them out. I'm using CS2, but my copy of CS5 is in the mail.

Photoshop is the core of our workflow and our PSDs are set up as several layers of image data and several layers of text. We don't rasterize the text at any point. The text is almost exclusively high contrast grayscale (aka black text on white backgrounds). Each PSD is 2880x3240, but we publish at 960x1080 AND 640x720.

What I know about font rendering tells me that fonts are rendered differently at different sizes, and that scaling rasterized text in images smears them into horrible messes.

With that in mind, I've been a bit of a fascist when it comes to our image mastering process. I never flatten text layers, nor rasterize the text in any other way. My assumption is that Save For Web... in Photoshop does the smart thing by resizing first, then rasterizing the text. Therefore, I use the "Image Size" tab in Save For Web dialog to produce the right sized images. Our jpeg compression is usually between 67% and 87%, although on rare occasion it can go as high as 100%. This produces rather crisp text with about as good of readability as I can hope for in a jpeg.

Unfortunately, this process takes a fair amount of time, and I'd love to dump all our PSDs into a script that generates the jpegs automatically.

I've been playing around with File-->Scripts-->Image Processor but haven't yet gotten results that match doing it by hand. And frankly, from the dialogs, I don't trust that it respects my vector fonts as much as I do.

I'm not opposed to switching image formats to png or something else, it just needs to be web friendly.

So I have two questions for the wisdom of this forum:

1) Do you know any way that I can improve readability over what I'm currently doing?

2) How can I get the same results with less work? Is there a way I can get optimal results from an image processor script?

Here's an example of what I'm producing by hand:
http://imgur.com/9Oho4.jpg
The art is crisp and clear, the fonts are readable and it weighs in at 176k.

Here's what Photoshop's Image Processor script produces with a jpeg setting of "8":
http://imgur.com/sUmjo.jpg
There's some clear compression issues in the art, and the font has some blurry bits (check the capital E in Every), AND it's 203k. It's lower quality, but a large file size!

Here's Photoshop's Image Processor script with a setting of 10 (or was it 9?):
http://imgur.com/LrbGJ.jpg
The image quality is about the same as my hand mastered image, but the file size is over 100k larger! And I'm not even sure the fonts are easier to read.

(Make sure your browser isn't scaling these images to fit, or they'll look much worse than they should)

EDIT: These are the larger of the two sizes. I realize now I should have posted the smaller of the two, but whatever. Just be really anal and give me advice even if you think they're readable.

For a minute I was linking to a jpeg with a bad ICC profile. I fixed it. All the colors match now.

To be honest, at this size it's all exactly the same for my eyes. It's all perfectly fine and readable.

There are a couple of tricks to make your life easier...

Instead of the Image Processing... feature, use the Photoshop action tab to create your resizing scripts. Actions are *much* more flexible. Create an action that opens an image, resizes the image to your target 960x1080, flattens the image, and saves it.

You can use photoshop's batch feature (File->Automate->Batch) to open and process all files in a specific folder using your action, saving them to a second folder. This is really handy because it leaves your source images alone. (Added bonus: Actions can embed Javascript programs. Photoshop is fully instrumented for Javascript.)

With respect to text:

As long as your text stays in a type layer in the source file, then photoshop will do "the right thing" and rasterize the type during the flattening process and not before. This gives excellent results as the type is rasterized and anti-aliased at the right resolution. Never flatten then resize. Always flatten last.

The other thing to look at is which anti-aliasing option you used when creating the text in the text layer. Photoshop has several choices, each name poorly describing what it actually does. Try them out to get a feel for what "crisp" or "strong" means.

With respect to file size:

With compression ratios that work well with art, JPEG renders text poorly. It's just a function of how jpeg works. The perceptual information it throws away to reduce file size is much more apparent in the detail that exist in text.

With respect to output formats...

If you wanted to create a universal mastering format, you can put your bitmaped art into Adobe Illustrator and create the text (and bubbles!) as vector art, and save as PDF. With the right settings, you get a file that retains the art's high resolution in a lossless format, and renders the text properly at any size.

the Illustrator/PDF route is a bit more complicated, but if you're gonna publish PDF files, you can churn them out easily at resolutions appropriate for print, web, etc.

-Jimbo

I find all of your examples very readable. More readable than most webcomic text at that size. So I don't think there's much to worry about as to how it's rendered, as I think you could probably reduce the point size a bit and still have it very readable.

It has been mentioned in a few other threads that mechanical-looking fonts often detract from the look of hand-drawn artwork. I think in your case the squared-off shape of the balloons helps to support the computerized-looking font, and the fact that we are listening to aliens talking (presumably in a foreign language) suggests the possibility that the font choice is deliberate. But considering how compelling and expressive the artwork is, I do find myself wishing for a more expressive font for the dialogue. But this is a very minor complaint.

In terms of readability, your examples are all more than readable.

Thanks for your replies both Jims!

I'll look into Actions today and maybe I can come up with an automated process for this that works as well as hand mastering.

Ok, so I've been messing with Actions in photoshop, and I made one that resizes the image, converts it's ICC profile to sRGB (and flattens it in the same step) then saves it out using Save for web.

To compare the result with what I was making before, I took the original image, converted it's profile, merging only the image layers, not the text layers, then used Save For Web to resize and save it.

Both times I used 87% jpeg compression and included the ICC profile.

I expected the result to be indecipherably identical, but instead the action generated jpeg fonts look weak and spindly. Below you can see the hand mastered version I created on the left. On the right you can see the one created by my recorded action:



What gives with the weak fonts?! It almost looks like the anti-aliasing style is different on each, but both jpegs are created from the same file and I didn't change any of the text between versions. Does anybody recognize what's going on here?

Check out how frail the i gets, and how murfed the a is.

Hmmm...

There might be a couple things going on here, and would require a little experimentation.

I'm guessing Save For Web is using a different algorithm (used to reduce the image) than what the Image Size command is using.

I'm not sure what version of PS you're using, as they've made changes to the Save For Web dialog over the last few releases. I would make sure that they're using the same algorithm for both, so you get an apples-to-apples comparison. If your version of Save For Web doesn't let you pick the algorithm, run away.

I avoid Save For Web because I rather like having fine-grained control over my image workflow. You can do everything that Save For Web does in a Photoshop action, with reproducible results compared to manual methods.

For the gory details, and as service to those wanting to learn more, I give you this:

Photoshop has a couple of different algorithms that that you can use for "resampling" (it's technical name) an image, and they're available in the Image Size command:

Nearest Neighbor
Bilinear
and three flavors of Bicubic (if you're Bicurious...)

Nearest Neighbor does this: For each pixel in the smaller image, it figures out where that pixel would be in the larger image and grab the nearest pixel. It's fast and crude, and generally not to be trusted. If you make a white image with a lone vertical line, one pixel wide. Resampling it with nearest neighbor might miss it completely.

Bilinear does a similar thing, except it averages the color of the nearest block of four pixels and puts the result in the new image. So now your thin line has a fighting chance to be seen, though the average will make it gray. As long as you don't reduce more than 50% this works OK. After 50% (in either direction) things get messy.

Bicubic is similar to bilinear, and uses some obnoxious math, which (for good reason) always made my head hurt at University. But in essence, it's a better resampler because it pays more attention to how the surrounding pixels work together to form an image. It's not an easy thing to explain, but is generally preferred as its benefits outweigh its drawbacks. Photoshop includes three flavors of the bicubic resampler so you can, in effect, pick which drawbacks you want to favor/disfavor when resampling. The standard bicubic algorithm tends to cause "ringing" (noticable on edges, where the transition from dark to light causes a light-dark-light pattern) which is often perceived as additional sharpness. You can take advantage of this sharpening in photography to give "perceptually" excellent results. For gradient based art (like some comics) you might choose the less aggressive bicubic algorithm.

As usual, these algorithms are tuned to specific uses, and when you mix text and gradients and photos all in the same image, you have to start paying attention to what your tools are doing to "help" you.

-Jimbo

I did some experimenting and it turns out it's actually the Convert To Profile (which includes the flattening operation) that's screwing up the results. I'm gonna keep digging and see if I can flatten another way, or perhaps intelligently flatten only the image layers, leaving the text. (Or maybe just hack it, if I can't do it intelligently).

EDIT: BTW, both are set to Bicubic normal.

Part of the problem is that you are doing lettering in photoshop. They claim that typography is vector based in PS, but i've never had any success with crisp sharp text in photoshop. It always looks really bad....It mangles up the type for me and there is really no good way to do it. I'll reluctantly use it for web comps, but I never use PS type for any final work if i can help it.

You'd get better results letting in Illustrator or Indesign and exporting from there. Its an extra step, but i think you'll get much better results.

Also a slight critique....i think your leading is a bit too wide. You can bring those lines together a bit and still have good readability. Don't think just because you are using upper/lower case that you need that much line spacing. The white areas of the word balloon become very prominent on the page and the large contrast area pulls me into those white voids, working against your art.

Can you tell me more about lettering in indesign and illustrator? I don't own a copy of either, so I can't experiment. Is it just intangible "it looks better" kinda stuff? You mention that you still use photoshop for your web comps, why? Just for convenience? Our primary target is the web, so if its a reason other than convenience, it might be relevaNt.

Also, we put the text into our pencils for layout reasons so by the time the art is finished, all the text is present. If I used illustrator or indesign, could it convert the existing text to whatever prettiness it uses or would we haveto scrqp it and start over.

I'm gonna try playing with the leading on a test strip we're doing right now. The comic I used in the examples iis basically out the door, so I won't be able to try it there, but soon!

I find that I get more readable text in Photoshop if I flatten the image before I resize it. The Photoshop font engine doesn't seem to hand the pixel aliasing very well at small text sizes.

It also helps if you use reduction ratios that are even, like half or a quarter. I get a noticeably cleaner image (most noticeable in the text) reducing to 50% than I used to reducing to 40%.

You get much more control over your type in illustrator and indesign, as they are sort of made to handle type. You can't even access the full glyph palette in photoshop so there are dozens of characters in your fonts that you aren't given access to. Working with the type tools in photoshop is very difficult. It makes me utter obscenities to my computer. Its really not designed for anything more than a few words or a logo.

Photoshop sort of homogenizes all your images and type like running it through a blender. Indesign and illustrator allow you to place linked images into documents and then work the type on it separately. You can export it as a PDF with both the vectorized type and rasterized images. You get better quality that way. For me i always make my Jpegs from exported PDFs. I get the best quality that way. PDF's that you make in photoshop are much more inferior to the ones you make in illustrator or Indesign. They don't give you all the compression control tools, and like others mentioned the type engine in PS wants to turn it into pixels which is the worst case scenario for you.

I was talking about web design comps. Sometimes i just have to work in PS...its fast and easy like sketching for me, and the coders like it to help them do markup. Its not my favorite tool, and it takes twice as long, but when working in a collaborative environment you have to play team ball.

BTW. you can access the type controls in photoshop on the type palette. Next or below depending on your version you'l see point size, leading(line spacing), tracking (letter spacing uniform on a whole line.) and kerning (individual letter spacing). You can use all of those to control your type. The interface for those tools is quite annoying in PS and once you get the hang of type in Indesign you won't ever want to go back. In PS if you highlight everything on a type layer and change it, but you have to do it all manually on each word balloon. In Indesign i can set a style sheet so that if i want to change the point size and leading of an entire 200 page book with 50,000 words in it, i can do it in 10 seconds with one click of the button. Photoshop and Illustrator don't have style sheets and other layout/prepress support because its designed to be an art creation tool, not a layout and prepress tool.

Our target format is JPEG, so I'm a little confused about why you brought up PDFs. Are you saying that if I export a PDF with vector fonts, and then use the another tool to produce JPEGs I'll get better font rendering from that other tool? And that Photoshop's type rasterizing is inferior to some other software? Cause either way my fonts are getting rasterized into pixels.

I've had the best success creating JPEGs from PDF's that i created in InDesign. You import the PDF into PS at full size at 300 dpi and optimize for web. I do A LOT of work with PDF so i've learned a lot about how they work and how to control the output. Photoshop PDF's are inferior and considered by a lot of people to be quasi PDF's...there's a reason why PS calls it a "Photoshop PDF". Its a distinction that they make for a reason. You don't have the full control over the compression and the vector and type tools aren't as good as other programs. LIke i said before, PS functions like a blender, with its end goal to turn everything into pixels. Its really the wrong tool for layout and typography jobs IMO, and lots of people think its a swiss army knife when really not.

You can download a free Illustrator trial just to see if it works for you, OR if you want something more open sourced you can try a program called "inkscape" its free and open sourced vector app and supposed to be a really good replacement for Illustrator. I've never used it though, but i've heard a lot about it.

BTW, another option which i don't really use much, but you could try is turning all your vector images into smart objects before you save. That might retain some of the vector-ness. Also are you constantly saving over jpegs or working on uncompressed files like PSD or TIFF? Thats a huge thing, since working with and resaving JPEGS is a disastrous work flow.

Our artists work in a combination of various vector programs and photoshop (photoshop for the coloring I think?) and hand in their work as PSDs. I do some minor tweaking of the PSDs (cleaning blemishes, fixing typos, nothing that Photoshop isn't amply capable of performing) and then save the pages to our various final formats, which include jpeg (for the web) and png (for mobile devices). All future changes come from the PSD, and never any of the lossy formats we produce for publication.

It sounds like you're saying
InDesign-->PDF-->Photoshop-->JPEG
Is the best path from InDesign to jpeg that you've found.

But since we use:
PSD-->Photoshop-->JPEG
to go from our source files (PSDs) to jpeg, it would be silly to use:
Photoshop-->PSD-->InDesign-->PDF-->Photoshop-->JPEG
for the reason of image quality.

So aside from access to better formatting tools, it sounds like InDesign won't improve the readability of our text in jpegs. Unless of course, those tools made me a better typesetter, and then our text would be more readable in every format.

That sound about right to you? Your comments have been very elucidating so far Chris; it's good to talk with someone who's earned their spurs.

thank you for using the word "elucidating" in a sentence. Vocab word of the day.

well basically your work flow is completely different from how i'd handle things. I guess the problem is still with the tools you are using for lettering. Photoshop is OK for it, but there is a good reason why so many print graphic designers will cringe with fear when you tell them that you set type in PS. It just pixelates everything and turns all those beautiful sharp type edges and curves into ragged, fuzzy messes. I view setting type in PS the same as inking with a ballpoint pen but expecting micron/brush quality. Right tools for the job y'know?

I do think that exporting a jpeg from InDesign will give you somewhat better quality than from PS but i rarely do that. My final print documents are almost always in PDF form, so its easy for me to go from that to Photoshop when saving for web or digital spaces. InDesign handles and exports type the best out of all the Adobe products, as well as being the most featured and easiest to typeset with.

Honestly i think you have more a workflow issue than a software settings, tips and tricks issue.

what i do for my comic (that i will put on here someday i promise!!!!) is

art > photoshop/illustrator
lettering>indesign (complicated type manipulation or logos etc in illustrator)
production/layout>indesign>output to various formats.

This is what I'm trying to hone in on.

Are you saying that the font rasterization techniques used by InDesign are superior to those used by Photoshop? That even though I'm producing rasterized jpegs without any vector font data, that the pixels InDesign creates will be better pixels than the ones Photoshop makes?

The reason I'm harping on it so much is that it sounds like you're saying that by shipping PDFs with vector fonts, I'll get better results in print or anywhere where vector fonts are displayed. Which is totally something I understand and agree with. From what I understand of the text rendering (and rasterization) process, what causes the "ragged, fuzzy messes" you describe is the rasterization and compression. Wouldn't that be the same hit I'd take regardless of what software I used? It seems strange to me is that the text rasterization method would be noticably different in different software in the same Creative Suite. Is this what you're saying?

Okay, now you all got me thinking. I make all my lettering and word balloons in PS. (bad) Is there a way to bring all this from PS into Illustrator to finesse it before going to print? Or would I have to start over from scratch if I wanted to run my lettering process through Illustrator?

I need some good old fashion elucidation here! (Somehow I don't sound as smart as Enca when I say it)