Expert: Glen Demers - 10/29/2010

Question
Glen-

I can sure use your help. I've been building a website and having some trouble with images becoming blurry when I reduce them in size for the web. Here are the details...

Firstly, I use Photoshop CS2. I'm creating a rollover so that when the visitor scrolls over a song title on the web page, a box appears with the corresponding song's lyrics. Dreamweaver makes the creation of the rollovers quite easy. The only thing I need do is to create the images for the rollover.

I began by creating the images at twice the size I need and thinking that if I reduce it in size that things will be clear. I used a file size of 900px by 1400px and a resolution of 400. After using the type tool to create the lyrics page I saved it, reduced the page size to 450x700 (the size I want the document to be for use in my website) and saved the image as a png. When I inserted the image in my image folder and tested it out, the rollover worked fine but the image was blurry.

I figured that maybe I should try creating the image at 450x700 and at a resolution of 200 instead and try that. This time I did not reduce the resolution when I saved it as a png. I replaced the file in my image folder but again, when testing the image in my browser, it was blurry.

Can you recommend a procedure I can follow to create these lyrics pages/images in photoshop CS2 that will ensure a clear image when used for web purposes?

Thanks in advance for any insight you can provide.
Rich

Answer
Hi Richard,

Typically, screens display at a resolution of 72 dpi. Your browser may be creating a preview of your high res image to display, which is the resulting blurry image.

Keep your text to a minimum of 12 pt for a legible face like Times or larger for more decorative faces.

At 72 dpi, text is blurry at smaller point sizes, I would investigate having text blocks come up on the rollover.

Hope this helps,
Glen Demers
Adobe Certified Expert, Photoshop 7
Prepress Technician, Best Printing Online
www.bestprintingonline.com

For more Photoshop tips please visit our help pages here: http://www.bestprintingonline.com/photoshop.htm