|Sharp web text with Photoshop|
| 7:27 pm on Jul 22, 2010 (gmt 0)|
Have a logo that consists of text only that I made using Photoshop 7.0. When "saving for web" the image looks okay, but a little bit fuzzy.
Tried playing with the anti-alias properties and still not much improvement.
Is is possible to get super clear/sharp text in Photoshop for the web or is there another process to get this kind of professional/polished look?
| 7:51 pm on Jul 22, 2010 (gmt 0)|
Though I have not tried it, I would be inclined to over-sharpen the image to compensate for the loss of sharpness in the final image.
It's what I do for B/W images that tend to come out slightly washed out when saved for the web, I just make them darker first. ;)
| 7:58 pm on Jul 22, 2010 (gmt 0)|
Tried that and the image comes out a little better but not quite meeting expectations.
| 8:13 pm on Jul 22, 2010 (gmt 0)|
Unsharp Mask might work as well...
| 8:26 pm on Jul 22, 2010 (gmt 0)|
Thanks willybfriendly. Unsharp Mask helps sharpen up the text--contrary to its name!
For top notch results is it best to use a different program, say Illustrator?
| 8:31 pm on Jul 22, 2010 (gmt 0)|
I use Fireworks and have Oversampling, Sharpening and Strength options, does Photoshop provide those? Depending on the background the text is sitting against, I'm able to fiddle with those numbers and get satisfactory results when anti-aliasing text.
I do know what you mean about the fuzziness. The default anti-aliasing settings are usually not sufficient.
| 9:15 pm on Jul 22, 2010 (gmt 0)|
For straight text in an image I prefer .gif over .jpg. You might try changing the file type in the save for web window and see if you like a different format.
| 4:55 pm on Jul 23, 2010 (gmt 0)|
Illustrator still has to rasterize (bitmap) the image to export for the web, and has much less control.
There are **various** things you'll have to play with, and it will vary from font to font, and with the size of text. Fonts are inherently vectored art and render to the screen based on the information in them; a font with more control points in the characters will render differently than more simple fonts.
Another important factor is the resolution of the file you're working with (see sharpening below.)
You start when creating the type. There are settings for crisp. strong, and smooth for the text. The on-screen display is never really sufficient, you'll have to flatten and save to see the full effect of any of these. Any of the three may work out better for a given situation, there is no one setting.
Once rendered to your file, you want to flatten the file first, don't flatten the type to it's own layer. the reason for this is the way sharpening works (below) and if flattened to it's own layer, any sharpeing you do will hammer the edges of the type, sometimes even altering the shape of the characters or at the very least, create an extremely bitmapped edge.
Once flattened, you have to play with unsharp mask, but playing with it effectively requires an understanding of how it works. The sharpen and sharpen more settings are nothing more than unsharp mask presets.
Unsharp mask comes from a term in the printing industry where we used to make a copy of an image, then make a blurred copy of an image and superimpose the two negatives. Where the blurred (unsharp) edges meet the normal negative, it would create a fuzzy outline at only the edges which was used as a mask to overexpose those areas in the final. This created the contrast-edge effect described below, visually "sharper."
Sharpening is the effect of taking any areas of immediate contrast (edges) and widening/darkening the darker side and widening/lightening the lighter side. Really all you're doing is creating more contrast at the edges, but the visual effect is that of a sharper image due to the increased contrast at the edges. This is why when an image is over-sharpened objects appear to have an outline (amateurs. :-) )
So knowing this, when you go to sharpen your type, radius affects the width of the sharpening lines, tolerance affects the levels of difference between contrasting edges, and percent obviously works both of those to increase the contrast at edges. If your radius is too wide you will form outlines; if the levels are too high you will start to sharpen areas that are supposed to be flat, giving a granulated effect to the overall picture, and obviously percent needs to work between the balance of the two. Although there's no set numbers, a good starting point is anything under 1.0 for radius (0.6, 0.8 etc,) 4-6 for levels, and 70-90%. Note that high res files will react differently than 72 DPI files.
A final area of experimentation is with format. Jpg is a "lossy" format over which you don't have a great deal of control. What it does is creates a lookup table of the colors used in the images, and using anti-aliasing in combination with the level of compression you select, does all it's rendering by math. Sometimes it works fine, sometimes it's not a solution.
Indexed color (via .gif or .png) gives you the greatest control for type, but it comes at a small tradeoff of either file size or loss of tonal range. Indexed color has a set maximum 256 levels of color, so if you have gradients in your type they are likely to "step" and not be smooth. However if you can get your type "they way you like it" in Photoshop, it's more likely to stay that way when rendered as a .gif. File size is also important too; sometimes you can get a 2K image in .gif and it's fine, but as a .jpg it's 7K or more and degrades too much if you try to set the compression higher (quality lower.)
Last note, any sharpening you do, you have to do it before it converts to indexed color, sharpening has no effect on indexed color images.
So the only real answer to "sharp web text" is . . . there isn't just one. :-) It depends on what you're doing with the type.
| 7:07 pm on Jul 24, 2010 (gmt 0)|
One "trick" not mentioned so far is to give the letters an offset drop shadow, but scale back the opacity so that it's barely noticeable. This faint shadow softens any visible pixels along the edges of the letter forms.
I prefer not to use the preset drop shadow effect. Instead I'm a bit old skool - I've been using Photoshop since version 2.
1. duplicate the text layer behind the original
2. offset that second layer, to the right and down just a bit
3. Rasterize the letters in that second layer
4. Fill with black, preserving transparency
5. Gaussian Blur to taste
6. scale back the Opacity of the shadow layer - I often end up at 30% or ever lower
7. "Save for the Web" as png 8-bit, and 16 colors is almost always all you need
| 4:07 pm on Jul 26, 2010 (gmt 0)|
Nice stuff here guys. Thanks for all the info. Will be playing with photoshop to see what combination of effects for my particular issue.
| 2:52 pm on Jul 27, 2010 (gmt 0)|
What size is the text?
| 4:06 pm on Jul 27, 2010 (gmt 0)|
Two sizes: Arial black, 48pt, Sharp and another 12pt.
| 11:31 am on Oct 18, 2010 (gmt 0)|
Just review how you have saved it for web, review the settings, and one thing, know your screen resolution and assess your dot per inch rate.
| 1:35 am on Oct 23, 2010 (gmt 0)|
rocknbil started to talked about it but didn't give all the details. To get sharp text in Photoshop, make sure the canvas is set to mode=16bit and the resolution to 300dpi (150 dpi works too but not quite so sharp). Photoshop text created at 72dpi will never look as sharp as vector text from Illustrator.
From there you can play with your compression settings
| 5:08 pm on Feb 7, 2011 (gmt 0)|
In case somebody didn't already mention this, IE8 is going to give you different results than IE7 and FF3. IE8 adds their own aliasing to your image text. It's really more of a blur according to some. Something tells me that this aliasing will be the future for IE. I'd be interested to know what FF4 is doing.
I spent time playing with this awhile back, trying text with each type of aliasing, viewing in each browser. All things considered, I settled on just leaving the text unaliased. Verdana font looks fine to me with no aliasing. To me, these fonts appear plenty sharp on my images at 100% zoom:
Verdana, Regular, 14pt, AA:None.
Verdana, Bold, 16pt, AA:None.
Saved as GIF.
In IE7 and FF3 at 100%, these look quite sharp and unjaggy. In IE8, the aliasing is applied. If I switch back and forth among browsers, I actually prefer the unaliased versions. Once you apply the zoom tool, they all look about the same - aliased. If you want, I can pm you a link where you can view these images.