Improve Web Image Quality

[CamJM]

Hi, thought I posted this earlier but was wondering what the most effective way would be to produce sharper images for buttons. At the moment I use rather small text that looks a bit fuzzy due to its size.

I've tried messing around with resolution but essentially the web browser reads the px size. Is there any way around this?

Thanks

[bsxiong]

save the image, then open it back up in PS and sharpen the image, then resave.

[Jim7283]

Can you post an example? It's tough to say what is causing the fuzziness without seeing the image, but I would recommend using sans-serif fonts, saving files as JPG, and adjusting the compression settings to find a happy medium between image size & quality

[Reiss]

What software are you using?

In photoshop, when you use the text tool, there are options to set the anti aliasing for the text. This can make a huge difference, choose either -

none
sharp
crisp
smooth

If you are only making buttons, I wouldn't save as Jpeg, this is for photo images, choose gif instead and select the minimum amount of colours needed to reduce filesize.

again, all depends what software you are using, let us know.

[Wizard1693]

You have to hit save for web in your photo editor.

[wonderstew]

When you reduce the text a great deal you usually end up needing a pixel font.

Here's a quick explanation. (http://www.kirupa.com/developer/mx/pixelfonts.htm) It's dealing with flash but it applies in photoshop too.

And you can get a ton of free pixel fonts here. (http://www.dafont.com/bitmap.php)

[CamJM]

Thanks guys, i'm sure I'll be using some of reiss's tips in the future. But the problem in the end was the fact that I was using photoshop elements, after re-doing the buttons in cs3 they came up much crisper. Just goes to show you get what you pay for.

[Stromgren]

Remember to make the buttons the right size in photoshop so you don't have to resize them afterwards.. This will make the picture pixelated too unlees you resize exacly 50%, 25% or equal..