Web Authoring Tools - graphical fonts for nav menu just blur when tested in browser

Author

graphical fonts for nav menu just blur when tested in browser

Jim Kroger

2004-12-02, 7:35 pm

I am trying to use nice fonts for my nav menu. I downloaded and
installed a very nice font. I opened photoshop and made nice labels
with text to use for the images for the nav menu. I use dreamweaver
and put the images in and they look great. But when I try to test the
page, everything looks bigger in the browser, and the fonts are now
blurry and hard to read and look awful. I've tried different things
but same problem. How can I make nice sharp images for the nav menu
that won't blow up and blur out when I look at the page in a browser?

Thanks in advance for any help...
Jim

Brian

2004-12-02, 7:35 pm

Jim Kroger wrote:
> I am trying to use nice fonts for my nav menu.

Use css for that. X-posted to ciwas, with follups set. (BTW, please
avoid excessive crossposting; and if you *must* x-post, at least have
the courtesy to set followups. Thanks.)

> I downloaded and installed a very nice font.

With css, that will only help on your system, of course. But css is all
about graceful degradation.

> I opened photoshop and made nice labels with text to use for the
> images for the nav menu.

Ugh, stop doing that. Images for text slow down page loading and, for
most browsers, prevent the user from scaling the text to their needs,
all for very little gain. See how much you can accomplish with css
suggestions.

--
Brian (remove "invalid" to email me)

jmm-list-gn

2004-12-02, 7:35 pm

Jim Kroger wrote:
> I am trying to use nice fonts for my nav menu. I downloaded and
> installed a very nice font. I opened photoshop and made nice labels
> with text to use for the images for the nav menu. I use dreamweaver
> and put the images in and they look great. But when I try to test the
> page, everything looks bigger in the browser, and the fonts are now
> blurry and hard to read and look awful. I've tried different things
> but same problem. How can I make nice sharp images for the nav menu
> that won't blow up and blur out when I look at the page in a browser?
>
An URL demonstrating the problem is quite useful.
Without an URL I must waste time asking:
1. What version of Photoshop?
2. What is the height of the font in Photoshop, in pixels?
3. Do you have font smoothing set in Photoshop? Which one?
4. Is the label image size the same as that in Photoshop?
5. What color palette are you using? 256? 16 million?
6. Is the image resized at any time during production?
7. What is the image file format?
8. Are you using a height or width attribute in the <img> tag? If so, is
it different from the actual image's size?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Markus Ernst

2004-12-03, 7:16 am

jmm-list-gn wrote:
> Jim Kroger wrote:
> 8. Are you using a height or width attribute in the <img> tag? If so,
> is it different from the actual image's size?

I bet that's the point. As gif and jpeg are pixel graphics they are not
scalable without a dramatic loss of quality, so you must use the actual
graphic's width and height, which is easy to reset in Dreamweaver
(right-click and reset actual image size).

There are browsers that allow the user to zoom not only text but the whole
page, so all graphics get scaled. Opera does it, and it was once planned in
Mozilla, I don't know if they still work on it; at least there is no page
zoom in Firefox 1.0. So if you use Opera for your testing the described
effect could be a consequence of page zoom, as nobody found a way to scale a
graphical gif by 125 % in good quality yet (and I doubt that it is possible
at all). So - as pointed out by Brian - using gifs for navigation is a risk
anyway.

--
Markus