A little help needed: Blurred image improvements.

Ok, I must be doing something wrong. If someone could please shed some light on an issue I am having.
When I upload any graphics to web pages they seem blurry or distorted around the text.
I save them in different file formats, sizes, etc. but I still do not see clear images on some of them. White backgrounds are ok but color backgrounds I think are the issue.
Here is the link to show you what I mean.
http://www.maidwellclean.com/links.aspx
Please if any suggestions you have I would appreciate it.
Thank you,
Brian

Brian,
If you have reference to the word "Maid", have you tried saving your word in graphic form with the same color background as it appears on the website? If there's any feathering this could make a difference.
However, there are others on this forum that are far more qualified to help you, so be a little patient. Help is on the way.
ron

RonDuke,
Yes the word "Maid" logo is saved with the same background color as the header.
My issue is when I create a logo or design with Extreme on a color background the test is blurred and the entire design is also not clear.
the example is on the links page of the Maid Well site. and also on my own site as well. Some designs are just not as clean as others.
Thanks so far,
Brian

Brian,

There could be several things that create this blurriness. Firstly though I'm a bit puzzled to what image type you're currently using for this logo. If I save it and paste it into XXPro I get the image on the top of the attachment below. It seems to use black as a mask.

The second image is a screen grab of your logo that you state is fuzzy

The bottom image is my attempt to remove the fuzziness.

Continued:

Here are some of my thoughts/pointers:

The best results for this type of image is a gif. With jpgs you will get artifacts around the edges of shapes, so a general rule of thumb is for photographic images use jpg's and for images with large areas of single colour and text us gif's. Png's are also a possibility but these still have problems with earlier versions of IE if you're using transparency.

Create the image at the size you want it and export it at 96dpi, which will maintain this size.

If you can match/incorporate the background within the image, this is better than using a transparent gif.

A major cause of blur is not working in whole pixels. Always endevour to resize all shapes and text into whole pixel values.

Ensure that the background shape also lays on whole pixels in the X and Y planes, then move every shape within the drawing to whole pixel x and Y locations.

If you're using bevels only use whole pixel sized bevels.

Finally when you export your image alway select the "Minimise visible anti-aliasing".

I appreciate the input thus far. I can live with the header logo of Maid Well for now and thanks for the instructions on cleaning it up, I will try that soon.
The real problem lies with designs I have attached.

Both of the images above were saved as the origional size. Notice the blur on the larger one. And even though the smaller design appears cleaner, when it is loaded on a web page it is also blurry or fuzzy.
I plan on using this design for an ad to my site and I would like to see what I am doing wrong to cause it to appear blurred.
Brian

Brian,

The large image above has a classic jpg look with artifacts around the lettering. I notice it on your site as well, although the browser says it's a png. I reckon it's a png made from a jpg to have those artifacts.

I attach below a gif, a jpg and a 16 colour png, in that order. (You might need to narrow your browser window down to get tham to stack one above the other)

As for the smaller image, the text size relates to about 6Pt which is going to be almost impossible to read at that size even if you go for a specific pixel font. 6Pt is only 8 pixels!

Charles Moir did a great thread on optomising small text sizes and a few tips on making them sharper. You'll need to search the forum.

Thanks a lot.
.GIF was the way to go and I added a rectangle colored it green and exported as a .gif.
Check it out!

Charles Moir Re: Small font sizes - text anti-aliasing

Charles Moir Re: Rendering with clear text

From what I understand, one of the links' advice is outdated ( not the link itslef ).

The tips by Charles in link

http://www.talkgraphics.com/showthre...all+text+sizes

contain a reference to a xara outsider article

http://www.xara.com/news/july06/tutorial.asp

which states (to get clear text when using pixel fonts:)

"Perhaps the only confusing thing is that in order to align these fonts exactly to pixels you must set the XY coordinates of the text to end in .8 of a pixel. So an XY value of say 120.8, 50.8pix would in fact align the font to be exactly on the grid. (This is the because the origin point has a slight 0.2 pixel offset from the actual correct corner.) "

There was a subsequesnt Charles post a couple months ago which stated that, no, one should not shift the origin by .8

I can see why there is confusion on this issue. I still get blurry text.

Thank you very much for the help.
Here is the latest
http://gemcitygraphics.com/images/Ge...nnerAdAnim.gif
Gem City Graphics