dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
uniqs
2471
share rss forum feed


Nordy

join:2007-10-20
kudos:1

Secret to creating smooth, clear text logos for websites

What is the right way to create smooth, non jagged text for web sites?

I did a 2 word logo in fireworks CS 5, saved it as png, and linked it to my test web page, and its borders look so choppy. Logos on sites like microsoft etc have nice smooth borders.

I've set my Aliasing to Smooth-Anti Aliasing.

Any secrets you web designers have that you can share?

Thanks


DC DSL
There's a reason I'm Command.
Premium
join:2000-07-30
Washington, DC
kudos:2
I'm sure the graphics pros will probably slap me with a mackerel for being so pedestrian but...

Since I'm not a graphic artist and have to come up with text banners and headings pretty frequently, I always make the original "huge" and 300 or 600dpi. Save it at the full size/resolution. Then I resize and Save As at the various smaller resolutions I need. Relying on HTML sizing is not at all reliable...especially if you're going for a size that isn't a clean multiple, or is larger than the original.
--
"Dance like the photo isn't being tagged; love like you've never been unfriended; and tweet like nobody is following."


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7
reply to Nordy
Are you resizing (either up or down) the image via html? Or displaying it the originally produced size? Transparent or solid background? 8 or 24 bit png?

Creating the image as a vector image in Illustrator and exporting directly also to the desired size can also improve the quality as oppose to taking a raster-based image and doing the same. This is similar to what DC was saying with the high resolution image...you just have in essence infinitely many dpi with vector based images.


Nordy

join:2007-10-20
kudos:1
reply to Nordy
I'm using 8 PNG, 72 pixels per inch (can't seem to find dots per inch), transparent. The image i'm displaying is the same size as the image I've created. No HTML scaling being used.

I've never tried doing things the way DC DSL suggested. Shall try.

My image is only two words. EG: DSLReports. Should I still try creating it in Illustrator and exporting? There are no graphics involved.


goalieskates
Premium
join:2004-09-12
land of big

1 edit
reply to Nordy
Hard to say exactly what's happening. I don't use Fireworks but it's a very good program.

When I make a text logo in Photoshop, I prefer to work at the size needed - no upsizing or downsizing. Even though text is supposedly vector in PS, PS has some peculiarities and I've seen the sort of jaggies you describe in pngs. It can be really annoying.

I actually prefer doing my web work in vector, however. I use CorelDraw, but AI would be fine too. Then I export to PDF and place that in Photoshop, where it upsizes and downsizes just fine. (The PS is probably a needless step for your purposes, but I do it for other reasons.)

ETA: One thought - try PNG-24. It's a lot more forgiving than PNG-8.


Nordy

join:2007-10-20
kudos:1
Ok. So I made a image 500% the original size, and then re-sized it to what I wanted and saved it as PNG 24. So It's now kinda clear. It still has a few fuzzy edges, but I hope to find a solution to that soon.


jandz

join:2001-03-11
Houston, TX
reply to Nordy
Fireworks actually is the right choice if you're doing designs for the web. It's export engine is far and away the best of the lot (when compared to Photoshop or Illustrator, mind you).

Make sure you type the text in FW on a transparent background. Don't rasterize it or otherwise convert it. When you save it, make sure you're exporting it (File -> Export or Cmd/Ctrl+Shift+R I believe) and not just doing a Save As... - the two are functionally quite different and produce different results.

Also, make sure you're using PNG-32 in FW. Photoshop shows it as a PNG-24 but the only difference is the presence of absence of an alpha channel. Any PNG using alphas (RGBA) is a 32 bit PNG.


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7
reply to Nordy
said by Nordy:

There are no graphics involved.

If there is no graphics involved, why are you using an image?

Can you share your source file?


Nordy

join:2007-10-20
kudos:1
I meant, no art work. Only a font.


Nordy

join:2007-10-20
kudos:1
reply to jandz
I did just this, and it's come out kinda OK.


goalieskates
Premium
join:2004-09-12
land of big
said by Nordy:

I did just this, and it's come out kinda OK.

You're not by chance looking at it on a retina display, are you?

15 MacBook Pro with Retina Display Lessens Web Experience
Expand your moderator at work