I design websites in Illustrator CS3, am I right to be using RGB 72 dpi?

 

Second, is there anyway of getting crisp text? If I create something, then use the file, save for web and devices, it often has blurry edges

 

Thanks

You're a brave soul, using illustrator. It's not easy to get pixel precision in illy due to lack of a pixel grid.

 

Yep, RGB for anything on the screen (CMYK for print). 72dpi is the standard for screen work, but it's kind of irrelevant with illustrator since everything is on a vector plane. Sticking with 72 should be best though.

 

I'm willing to bet your problem lies with how you export stuff. What format do you export to? PNG is probably best since its a lossless format (meaning it doesn't compress or lose quality).

 

Vector text in Illustrator (and inDesign for that matter) is the sharpest you can get.

Thank you for replying

 

I have photoshop as well, if that helps. But again, I wouldnt know what to save as, and settings.

 

Thanks

 

 

You're a brave soul, using illustrator. It's not easy to get pixel precision in illy due to lack of a pixel grid.

 

Yep, RGB for anything on the screen (CMYK for print). 72dpi is the standard for screen work, but it's kind of irrelevant with illustrator since everything is on a vector plane. Sticking with 72 should be best though.

 

I'm willing to bet your problem lies with how you export stuff. What format do you export to? PNG is probably best since its a lossless format (meaning it doesn't compress or lose quality).

 

Vector text in Illustrator (and inDesign for that matter) is the sharpest you can get.

Photoshop is super finicky but I love it for Web design stuff (has plenty of quirks to work around though... steep learning curve). Fireworks might be a good intermediate tool to try to get into web design. It has pretty solid vector support, full pixel grid and a bunch of the functionality you'd want from Photoshop. Try the demo out, I know a lot of pros around here who swear by it.

 

Regarding export settings... I looked at the Save for Web & Devices settings on Illy (CS5) and with PNG, barring any advanced settings you might have changed by accident, you should just be using PNG-24 without any of the boxes checked (except Transparency, if applicable). That should give you the best result without going into an absurdly pedantic level of detail.

Fireworks might be a good intermediate tool to try to get into web design.

 

I suggest PS for all exporting as you really get a great finish with low file size. I would avoid any 'slicing' program, I used to use Fireworks but the file names are never seo friendly and also any code it generates is overkill, not using repetition etc to keep file size low. Crafty use of png mixed with CSS creates some great stuff.

 

If Fireworks does it in 20k then you can code it in 5k

I suggest PS for all exporting as you really get a great finish with low file size...

 

I've found the opposite to be true, I use PS for creating hi-fidelity stuff and have to re-export some things in Fireworks to get them down a bit in file size.

 

 

And OP, NoClass makes a good point: You should take advantage of CSS3 as much as possible and only use images where you can't easily replicate w/ CSS3 without breaking in older/crappier browsers.

 

The only time I use an image is for logos, icons or adding texture/noise to elements. You can get pretty consistent support for gradients, inner/outer shadows and rounded corners across all the major browsers (though IE9 is still a bit flakey).

I've found the opposite to be true, I use PS for creating hi-fidelity stuff and have to re-export some things in Fireworks to get them down a bit in file size.

 

Hmm did I say I'm still using CS2?

Hmm did I say I'm still using CS2?

 

Hahah... yeah that might be doing it.

Thanks for all your help

 

I think Im doing something wrong.

 

Ive done an 'A' in Illy and PS, both save for web and devices, jpg, max quality, and both results are pap

 

Attached

Check the text anti-aliasing setting you are using. It almost looks like you managed to turn it off.

 

In both Photoshop and Illustrator there is a little dropdown allowing you to control how to treat the "jaggies" that appear when you draw a diagonal line on a pixel grid.

 

In photoshop I'd recommend keeping it on "Sharp" since it replicates what you see in a browser (if you're working in web design). Use "Crisp" otherwise since it's the most true to the letterforms (but it's a bit blurry if you are working on something pixel-precise like web design).

 

For illustrator it should be on "Sharp" 100% of the time.

 

See the attached. It's a screenshot of the Character panel in Illustrator CS5 (which is pretty much identical in Photoshop). If you have it on "None" that would be the reason your text looks so aliased.

 

Let me know if that takes care of it.