Computer Graphics with Photoshop

Author

Quality of text?

Hymer

2007-06-22, 6:16 pm

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?

Thanks,

Bob

Mike Russell

2007-06-22, 6:16 pm

Hymer wrote:
> 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?

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.

--
Mike Russell - www.curvemeister.com

Hymer

2007-06-22, 6:16 pm

>
> 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?

Thanks a lot,

Bob

Hymer

2007-06-22, 10:15 pm

>> Hi Bob,
>
>
> 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?

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.

Thanks for your help.

Bob

Joe

2007-06-22, 10:15 pm

"Hymer" <ergobob@sonic[REMOVE].net> wrote:

<snip>
>=20
>=20
> Hello Mike,
>=20
> Thanks for the reply.
>=20
> I am not sure what you mean. When I right click the image in on a web=20
> page and hit Save As or Properties, the image shows as a .gif.=20
> However, if I hit Save Target As, it is an .htm. Is this what you=20
> mean?
>=20
> Also, I am using HTMLkit as my editor. It has a page refresh but I=20
> don't see anything that lets you "refresh size." It has a command line=20
> but does not recognize refresh size - only refresh window.
>=20
> Could you say a little more about this?

I don't follow this thread to know much detail of what is going on, but =
I
can tell you that WEB uses sRGB color-space, so if you want the image =
looks
good on web then you may try to save using sRGB color-space.

About HTML, I haven't done any HTML for over decade to know much what =
has
changed in the past decade, but if my memory serves me well.

- 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.

=20
> Thanks a lot,

Mike Russell

2007-06-23, 6:14 pm

Hymer wrote:
[re poor text quality]
....
> 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.

Congratulations of fixing it. I don't know enough about HTMLkit to say
what the procedure would be next time this happens.

You did the correct thing by making the image size of the IMG tag match
the actual image. If they do not match, some browsers use a "nearest
neighbor" resize, which does not look good.
--
Mike Russell - www.curvemeister.com

hoffmann@fho-emden.de

2007-06-23, 6:14 pm

Joe schrieb:
> - 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.

Joe,

Mike Russell is right:
A GIF or JPEG or PNG image with px x py pixels should
be established in the HTML page with parameters
width=px and height=py.

If the image should arrive later than the basic page information,
then the browser had already reserved an empty frame px x py .

Any scaling by width=Not-px or height=Not-py creates correct
new width and height pixel numbers, but using interpolation
by nearest neighbour resampling. Good luck if at least the
aspect ratio is retained.

Anti-aliased text can be created by PhS. The text color is
interpolated towards the background color. Parameters are
'none' (no interpolation), and four different smoothing modes:
'sharp', 'crisp', 'strong', 'smooth'. E.g. 'sharp' is a special case
of smooth interpolation...

An example for anti-aliased text is here:
http://www.fho-emden.de/~mabi/mabi_index.html

Best regards --Gernot Hoffmann

tacit

2007-06-23, 10:14 pm

In article <467c4b76$0$14116$742ec2ed@news.sonic.net>,
"Hymer" <ergobob@sonic[REMOVE].net> wrote:

> 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.

It was not necessary to save the image as a JPEG--the GIF would have
been fine.

You had a problem because the width and height tags in your HTML were
different from the actual width and height of the image.

--
Photography, kink, polyamory, shareware, and more: all at
http://www.xeromag.com/franklin.html