Pixelated Images - can't fix

[JorgeGarcia]

Hi,
I'm just starting out in web development and really getting into to it. I'm glad I found this site.

I put together this site for this non-profit - www.daikaijo.org. One thing I'm really unhappy about is the buttons in the nav bar are real pixelated and jagged and I can't fix them. The h2, h2 headings are jagged as well. By the way, they wanted the fonts to be big even though a smaller font displays smoother.

The buttons were created in Inkscape and then a background added in Gimp. I've tried all sorts of stuff but cant' seem to make them better. I'm sure that I am missing something fundamental somewhere.

Any ideas to help fix the buttons would be great.

Thanks.

[KDLA]

Hi, JorgeGarcia -
To smooth the edges, you need to use an anti-alias for the font. I don't use Inkscape, so I can't help you figure it out with that particular program. :(

Really, you don't need to use images for that effect; it can be replicated simply using CSS.
Take a look here for code: http://css.maxdesign.com.au/listamatic/horizontal02.htm
This is MUCH easier than javascript/images. You can change colors, fonts, spacing, everything without creating new images.

KDLA

[JorgeGarcia]

Cool. Thanks for the tutorial. I'm going to change up the nav bar.
Thanks.