Problems with getting text on image

I've a problem with getting the WHITE text on the images attached to look clear and crisp.

I'm using photoshop and have added a layer and then done the the text but they don't look too clear what am i doing wrong?

I'm after the text being a similar size to the smaller text, the larger looks a bit clearer but the text is just too large for the site and layout

Ian

 

Assuming this is for the web. Set the tab as a background (html) and set anchor text in hypertext...you can use a CSS stylesheet if you like for roll over effects.

 

If you do want graphic buttons, check the tool bar along the top of photoshop when you are using the text tool (the T icon selected in other words) There's a drop down menu for anti aliasing.

http://www.water-well.net/images/antialias.gif

Set this to sharp, crisp, smooth, or strong which ever looks the best.

Make sure you save as a gif or png...not jpeg

 

Output any line art as PNG. JPEG's will always be fuzzy because of the compression. Using custom palettes will make PNG images smaller as well.

J.D.

 

Yes they all will work. My way will probably load fastest for users though. ...
1- Common background image and text set in html with css roll over.

 

I'll second this. Never create an image of text if you can at all avoid it.

 

Sure, if the question were "how can I make tabs work faster?", but it was "why the text isn't crisp?"

Besides - he has round corners and this requires images in one form or another (e.g. corners or sides). Although, no text required in this case, it may still be tricky to blend image color with the HTML background color.

J.D.

 

Yes but why not kill 3 birds with one stone...
1) Loads faster
2) Cleanest looking (what he asked for)
3) Best for se's (anchor text)

Cheers mate!

 

All true, and this would be the perfect answer for the HTML forum, but you are assuming that he's using these images for links (and he probably is). I believe the question was, though, how to make these images look better

Anyway, to illustrate my original point, take a look at the images below. The top "Test" in each of the pictures is a PNG image and the bottom one is JPEG saved with 10% compression. You can see the difference (click on the images to view the actual images, not JPEG previews generated by DP).

J.D.

 

Your point is well illustrated JD. I did write this in my first post here:

If Ian was a little more clear on final output then I may not have said what I said. In any case Ian now has many options to digust...hope this helps .

 

Sorry I've not been around to add comments etc since posting the Question this afternoon, had friends round for dinner and in Spain that means MANY hours!!!

Yes they will be links, a menu of tabs about 7 (different colours) all with white backgrounds.

I do like the idea of just adding text to the image which is a background image, will have to see how this looks.

I wasn't sure that png would be suitable for all users, hence saving them as jpeg.

Thanks for all your ideas etc, will report in the next day or so with my end result.

Ian

 

As has already been discussed here, browsers will not produce anti-aliased text, and you cannot create backgrounds with rounded corners using CSS2. Assuming that images are definitely the way you want to go, I would recommend recreating your graphics from scratch in a vector graphics package such as Macromedia Fireworks MX. You will be able to save your images as PNG / GIF which will have a small filesize, and your image will look nice and pretty because you will avoid the nasty artefacts that appear while working with compressed bitmaps.

Just my 2p...

- Jamie

 

rounded css/javascript corners without images.

http://pro.html.it/esempio/nifty/

and here's a sitepoint article on it

http://www.sitepoint.com/article/rounded-corners-css-javascript

 

I've managed to do the image as a background with textlink, all works very well, will tell you the url once the site is complete in the next weeks or so.

Thanks once again everyone.

Ian

 

i would just add the text in dreamweaver which allows for CSS and it will be crisp and clearer than photoshop, because it compresses the images.