adobe photoshop - How to save a sharp logo for my website

I'm pretty new to photoshop and illustrator and trying to create a simple text-based logo to use on my web site, for example: http://codepen.io/d3wannabe/pen/BWrbZa

You get wildly different versions of that depending on what browser you use to render the text (which is why I obviously must create the image myself), but for example on Chrome you can already see a blurriness around the edges of the font.

The problem I'm having in Illustrator is that when I write in a certain font (e.g. "Arial Rounded MT Bold" at 24pt), the font looks beautiful and crisp against my background colour at 200% zoom, but I start to see blurring at 100% - then I'm not sure what it is about the 'save to web' process, but the image loses further clarity by the time it ends up on my website (as a 'type optimised' png).

I'd read somewhere that photoshop was better for saving images of text for web, but I see a similar blurriness there even in advance of exporting (and of course a 200% zoom in photoshop just pixelates the image).

So what I'm really lacking is a step-by-step for-dummies type guide of how to get crisp images of text onto a website. At this point I'm not sure if perhaps I've just chosen a bad colour contrast, or fonts that don't scale well - although I'm also wondering if there's something significant in the fact the font looks beautiful in Illustrator at 200% or larger - perhaps that means I should be exporting the font from Illustrator at a larger size than required and then doing additional downsizing (somehow!) afterwards - although of course again I can't trust web browsers to do that for me.

EDIT: I should also have noted that the effect is much worse on my monitor versus my laptop (tempting to say I have a bad monitor but there's many websites where the monitor version looks fine too!)

Answer

Photoshop vs. Illustrator should not make such a big difference here. Things you can try:

• Convert logo text to outlines before saving as PNG.


• Save a very large PNG (eg. 1000 pixels) and scale it down in your CSS.


• Save your logo as SVG (its what Apple does on their website). This is a more recent approach used by a web developer i am working with. Use this to clean up your SVG and this to encode and make it browser-compatible.