Quality of text?

Hello,

I created a navigation button with text on it for my website using Photoshop Elements. The button looks fine on my main website. I now want to make that button slightly larger for a blog page.
I resized the original PSD of the button and retyped the text on the button. In PS, it looks perfect. However, when I save it as either a gif for website or as a jpg, the text looses quality where the strokes are varied in width and sharpness.

I have tried it on the blog page by specifying height and width to match the actual size and allowing it to retain it’s actual size without specifying height or width. I do have anti-aliasing checked. However, I can not seem to get the text to render well no matter what I do. You can see this in the six buttons at the top of the page at http://jobs.usernomics.com/a/jbb/find-jobs .

Does anyone know what I might try to get the text to render well?

I created a navigation button with text on it for my website using Photoshop Elements. The button looks fine on my main website. I now want to make that button slightly larger for a blog page.
I resized the original PSD of the button and retyped the text on the button. In PS, it looks perfect. However, when I save it as either a gif for website or as a jpg, the text looses quality where the strokes are varied in width and sharpness.

I have tried it on the blog page by specifying height and width to match the actual size and allowing it to retain it’s actual size without specifying height or width. I do have anti-aliasing checked. However, I can not seem to get the text to render well no matter what I do. You can see this in the six buttons at the top of the page at http://jobs.usernomics.com/a/jbb/find-jobs .
Does anyone know what I might try to get the text to render well?

Hi Bob,

In spite of your efforts to the contrary, you are resizing your images in HTML. Verify this by right clicking on one of the buttons and viewing the button image separately. Normally this can be fixed with a command like "refresh size" in your html editor.

Hi Bob,

In spite of your efforts to the contrary, you are resizing your images in HTML. Verify this by right clicking on one of the buttons and viewing the button image separately. Normally this can be fixed with a command like "refresh size" in your html editor.

Hello Mike,

Thanks for the reply.

I am not sure what you mean. When I right click the image in on a web page and hit Save As or Properties, the image shows as a .gif. However, if I hit Save Target As, it is an .htm. Is this what you mean?

Also, I am using HTMLkit as my editor. It has a page refresh but I don’t see anything that lets you "refresh size." It has a command line but does not recognize refresh size – only refresh window.
Could you say a little more about this?

In spite of your efforts to the contrary, you are resizing your images in HTML. Verify this by right clicking on one of the buttons and viewing the button image separately. Normally this can be fixed with a command like "refresh size" in your html editor.

Hello Mike,

Thanks for the reply.

I am not sure what you mean. When I right click the image in on a web page and hit Save As or Properties, the image shows as a .gif. However, if I hit Save Target As, it is an .htm. Is this what you mean?

Also, I am using HTMLkit as my editor. It has a page refresh but I don’t see anything that lets you "refresh size." It has a command line but does not recognize refresh size – only refresh window.
Could you say a little more about this?

Thanks a lot,

Hello Again Mike,

Well, based on your comments I did figure out a way to do it although I am not quite sure what I did. I ended up saving the image as a jpg and then identifying the height and width in the html to be the same as the actual image size. I also made sure that the text was not resized. At any rate, it did work.

– You DO NOT need to save the image as exact size, or you can use HTML command to reduce the displaying size to whatever you want.

Well, based on your comments I did figure out a way to do it although I am not quite sure what I did. I ended up saving the image as a jpg and then identifying the height and width in the html to be the same as the actual image size. I also made sure that the text was not resized. At any rate, it did work.