I’m doing a little website for my sister’s yoga studio, and she’s chosen soft pastels AND gradients for her logo (I know), and I’m having a hard time getting jpegs to display properly - no matter what settings I select, there’s anti-aliasing ‘noise’ around the letters - the images are clean when I export them from Photoshop (PS5)(I’ve tried high res jpegs AND Save For Web), and they look good in Preview, but in Safari they’re a mess, especially at smaller font sizes - what am I doing wrong (or is this just why no one uses gradients??) - I’m trying to convince her to go with a no-gradient version, and I’ve done a logo I think is superior, but she really likes the gradient - help?? - here’s the ‘site’ w/ examples of both (click anywhere on the first page to get to the second) - thanks for any thoughts! - Rolf in MA
I’m doing a little website for my sister’s yoga studio, and she’s chosen soft pastels AND gradients for her logo (I know), and I’m having a hard time getting jpegs to display properly - no matter what settings I select, there’s anti-aliasing ‘noise’ around the letters - the images are clean when I export them from Photoshop (PS5)(I’ve tried high res jpegs AND Save For Web), and they look good in Preview, but in Safari they’re a mess, especially at smaller font sizes
JPG is a good format for graduations, but a terrible one for text. GIF or PNG is a good format for text and is really bad for areas of graduated colour. Or at least, GIF is. PNG is very good for both but has the disadvantage of huge file sizes in comparison to JPG.
I’d make the graduation as a JPG and the text as a GIF or PNG and lay the text over the graduation. You may have to set the anti-aliasing colour for the GIF to the nearest match you can get to the bit of the background it’s on top of. That should give you crisp text on a smooth background. Best of all, I reckon you could do it all in Freeway too, then you can turn on Graphics Preview in the ‘View’ menu and see and judge the result right there.
thanks you guys - the problem is, it’s the text itself that has the gradient applied to it, so I’ve got the worst of both worlds in one format - and I did try all 3 (GIF, PNG, and JPG) - the jpegs were the best, by far (maybe I missed some setting I could have applied?) - the GIFs had vertical stripes and the PNGs even more - but I will try again with HTML and image in Background and see what happens - thanks again! - Rolf in MA
Rolf, did you try the pngs with the millions of colours setting from
the inspector in Freeway? Although not ideal in every situation, I’ve
found pngs to be a good problem solver in mixed graphic cases like
yours.
Trev
On 5 Apr 2011, at 12:28, rbpspc wrote:
thanks you guys - the problem is, it’s the text itself that has the
gradient applied to it, so I’ve got the worst of both worlds in one
format - and I did try all 3 (GIF, PNG, and JPG) - the jpegs were
the best, by far (maybe I missed some setting I could have applied?)
the GIFs had vertical stripes and the PNGs even more - but I will
try again with HTML and image in Background and see what happens -
thanks again! - Rolf in MA
You may want to punt at this point. Use Photoshop (exporting using
Save for Web), and be sure to construct the logo typography within
Photoshop as text layers. This will enforce some boundary correction
within the JPEG compression algorithms, and you will see a good
compromise between file size and image/text quality. Make this image
at 100% the size you will use it, and be sure to import it into
Freeway as a pass-through image.
Walter
On Apr 5, 2011, at 7:28 AM, rbpspc wrote:
hanks you guys - the problem is, it’s the text itself that has the
gradient applied to it, so I’ve got the worst of both worlds in one
format - and I did try all 3 (GIF, PNG, and JPG) - the jpegs were
the best, by far (maybe I missed some setting I could have applied?)
the GIFs had vertical stripes and the PNGs even more
