Jump to content

 
Photo

AI to web gif- how to get a sharper graphic?

- - - - -

  • Please log in to reply
10 replies to this topic

#1
Mike Breiding

Mike Breiding

    Key Contributor

  • Validated Member
  • PipPipPip
  • 87 posts
  • Location:Morgantown WV
  • Interests:Cycling, Hiking, Natural History, Photgraphy, Travel, Food
  • United States

"When

I use the save for web feature in AI CS2 the resulting image shows

bleeding of the blue marker box color into the white color of the

numbers. This results in a fuzzy image.

Does anyone know of a way to get a sharper image?

I

did load the image into Pshop and manually touch up the numbers with a

white paint brush, but this is tedious and the results still look kinda

clunky.

The images attached show a crop of the markers and the settings in AI I am using to export to the GIF.

Thanks,
-Mike

Attached Files



#2
frax

frax

    Hall of Fame

  • Associate Admin
  • PipPipPipPipPipPipPip
  • 2,301 posts
  • Gender:Male
  • Location:Stockholm, Sweden
  • Interests:music, hiking, friends, nature, photography, traveling. and maps!
  • Sweden

just
don't export to gif, esp with only 64 colors. Export to png or jpg with
high quality settings. If you need to 'save for web' to gif, play with
the settings.
Hugo Ahlenius
Nordpil - custom maps and GIS
http://nordpil.com/
Twitter

#3
Mike Breiding

Mike Breiding

    Key Contributor

  • Validated Member
  • PipPipPip
  • 87 posts
  • Location:Morgantown WV
  • Interests:Cycling, Hiking, Natural History, Photgraphy, Travel, Food
  • United States

"

just 
don't export to gif, esp with only 64 colors. Export to png or jpg with 
high quality settings. If you need to 'save for web' to gif, play with 
the settings.

http://



Greetings,
I played with the GIF settings and they made no difference.
A hi rez jpeg is 142k and not much better than the 37 k gif.

The PNG is not much better either and the file size is over 100k.

I may have hit a wall here.

Thanks,
-Mike "

#4
ELeFevre

ELeFevre

    Hall of Fame

  • Associate Admin
  • PipPipPipPipPipPipPip
  • 1,049 posts
  • Gender:Male
  • Location:Louisville, Colorado USA
  • Interests:Cartography, musical instruments, reading, hiking, craft beer
  • United States

Mike,
Do
you have a white fill and stroke on the marker text? If you do, get rid
of the stroke and export again and see what happens. Like Frax said,
you should be able to export a nice high res png or jpg.



#5
Mike Breiding

Mike Breiding

    Key Contributor

  • Validated Member
  • PipPipPip
  • 87 posts
  • Location:Morgantown WV
  • Interests:Cycling, Hiking, Natural History, Photgraphy, Travel, Food
  • United States

"

Mike,
Do 
you have a white fill and stroke on the marker text? If you do, get rid 
of the stroke and export again and see what happens. Like Frax said, 
you should be able to export a nice high res png or jpg.

http://




Hi Erin,
The stroke was set to none and fill to white for all the marker numbers.

-Mike "

#6
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

"Mike,

Just
for grins, try using anti-aliasing, as well as ""Dither"" instead of ""No
Dither"". I'm 90% sure that is your issue, but if that doesn't work, let
me know and I'll try and think of something else.

EDITED TO
ADD: 8-bit .png is definitely the way to go over .gif. Equal
appearance, 20-30 percent smaller file sizes. Can't go wrong..... B)

Derek "
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com

#7
Unit Seven

Unit Seven

    Legendary Contributor

  • Moderator
  • PipPipPipPipPip
  • 266 posts
  • Gender:Male
  • Location:New Zealand
  • New Zealand

"In the text box play with anti-aliasing settings. Usually at small sizes onscreen you are best to set to none.

When working with small text on a screen jaggy is better than blurry.

Have a look at Verdana Bold, 9pt at 72ppi attached for example.

For

small fonts like this I usually try and pick pixel fonts such as Mini 7

or Standard as they are drawn anti-aliased to fit to a pixel grid.

[url="http://"http://www.newzealand.com/travel/library/e91840_3.gif"]Small text map example[/url]

Cheers.

Attached File  small_pixel_fonts.gif   1KB   22 downloads
S a m B r o w n

U N I T S E V E N
unit.seven@gmail.com

Miramar, Wellington
N E W Z E A L A N D

#8
Kartograph

Kartograph

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 320 posts
  • Gender:Male
  • Location:Berlin, Deutschland
  • Germany

@ png: Beware! There is

png-8 as a standin for gif

and

png-32 as a replacement for jpg

And Adobe has a shoddy png-8 Export. GIMP consistently produces smaller png-8 files than Illy.
PNG-8 is just right for maps, as gif

#9
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

"

And Adobe has a shoddy png-8 Export. GIMP consistently produces smaller png-8 files than Illy.


Correct!
Corel too, for that matter. Every 8-bit .png file I produce via Adobe
or Corel products is subsequently run through a little free program
called [url="http://"http://www.cs.toronto.edu/%7Ecosmin/pngtech/optipng/"]OptiPNG[/url].
Strips another 8-10+ percent off those files sizes, as Adobe and Corel
put lots of unnecessary ""junk"" in those exports that do not need to be
there.

Now if only Adobe would allow the dynamic-introduction of
.png files into Flash, it would be a beautiful day for all of us map
designers placing graphics on the web...... B) "
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com

#10
Kartograph

Kartograph

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 320 posts
  • Gender:Male
  • Location:Berlin, Deutschland
  • Germany

"

Now 
if only Adobe would allow the dynamic-introduction of .png files into 
Flash, it would be a beautiful day for all of us map designers placing 
graphics on the web...... 


See SVG not only allows you png inclusion, but also dynamic resizable video windows! "

#11
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

"Yes,
if it were up to me, I would LOVE to use SVG on a lot more projects!
However, when a client says ""I need you to design _________ so that I
can dynamically introduce a series of _________ graphics into Flash,
it's pretty much .jpg, .swf or we lose the project. I always try and
talk clients into better solutions if I think they have selected an
inferior solution to their needs, but if it comes down to either
delivering .jpg or losing the contract, I'll deliver the .jpg,
unfortunately. We aren't yet big enough where we can simply walk away
from a lot of those projects if we are having some
technical/philosophical differences with prospective clients. :( "
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

-->