tearing my hair out

try to make text legible on a banner ad

[incywincy]

hi everyone,

i am not a graphic designer but i am trying to create some small banner adverts (234x60) using paint shop pro.

the banner advert is just a plain colored background with 3 lines of text on it. i have tried all sorts of fonts, bold/not bold, but whatever i try the text looks sort of wrinkled and uneven.

could anyone give me a few tips because it is driving me crazy. i can sticky you a url with an example if it would help.

thanks in advance!

[BlobFisk]

Have you played around with the Anti-Aliasing on the Text - that could help...

<edit>Aliasing -> Anti-Aliasing</edit>

[edited by: BlobFisk at 1:22 pm (utc) on Nov. 22, 2002]

[incywincy]

sorry to show my ignorance but what is aliasing with respect to text?

[BlobFisk]

To be more specific anti-aliasing (apologies for not putting the anti- in the first time).

Anti-aliasing smoothes out jagged edges between solid colours. It tends to add a bit to the file size, so anti-aliasing with fewer colours will have less of an impact on the image size.

There is a nice explaination here [widearea.co.uk].

If you want to sticky me the example, feel free to do so.

When it comes to text it is of 3 types: Strong, Smooth or Crisp. Play around with the three until you get a look you like.

[Longhaired Genius]

Are you saving the banner as a jpeg? Jpeg encoding tends to mash up precise detail like small text. Gif is much better for this. I don't know about png - you could try it.

[BlobFisk]

I think I may have caught it - I don't think that it's the image at all, as when I downloaded the image and opened it in Photoshop it was fine.

However, the html code is giving the image a 212x60 size, but this image is, in fact, 234x60 in dimension. So, the browser is squeezing the image down horizontally to fit into the space allocated to it, and therefore the font is looking compressed.

<img border="1" src="../images/xxxxx-xxxx-agency.jpg"...>

I'd bet that changing the image dimensions in the html code will fix the problem.

Let me know if this does the trick!

[mivox]

In very small banners, I often use Verdana, 10pt, no anti-aliasing. It looks very crisp, even in bold. Not very exciting, graphically, but easy to read.

[incywincy]

BF you hit the nail on the head. The script i have been using to generate my pages had a bug in it and as you quite rightly say the image was 234x60 but the script generated a 212x60 in the html hence the squashing effect.

Many thanks, I knew someone here would suss it!