Gif from Illustrator looks nasty in Dreamweaver

[dogbrain4]

Products used:
Illustrator 10
Dreamweaver 4

Here is what I am trying to achive:

Create simple 928 pixels by 161 pixels sized GIFs to be brough into Dreamweaver.
1. I need white text on a clear background
2. This will show on a blue background webpage
3. I tried 2 methods in Illustrator. Select all, Flatten Transparancy, Save for Web as Gif on 0 for LOSSY ie. No lossy.
4. When I bring them into dreamweaver they look REALLY UGLY and jagged.

WHAT SHOULD I BE USING TO DO THIS?

 

[dimoj]

So...in Illustrator, was your artboard exactly 928x161?

Or did you create Crop Marks (Crop Area in CS) exactly 928x161?

So that your exported gif would be exactly those dimensions?

If not and then you place the graphic in Dreamweamweaver and specify those dimensions, then Dreamweaver/browser is resizing the image which of course will look terrible.

By the way, you don't need to flatten transparency before saving a gif.

Also you said you tried 2 methods in Illustrator, yet you only described one, what was the other?

 

[dogbrain4]

Thanks Dimoj,

I can't remember the 2nd method. I now found a new way to make those jagged edges go away. Tell me if it is viable:

1. Take unflattened/un-outlined text 928 x 161 pixels size image and EXPORT as PSD. I set the resolution at 300, I even tried 600 because I thought it would make the jaggies go away.
2. Open the PSD in Photoshop 6.0. Go to Save For Web GIF on MAX no lossy. Looks decent but when i zoom WAY in I can still see jaggies.
3. HOWEVER when I exported the *.ai project as PSD at resoultion 600, it clipped the size of the 928 wide pixels image and also BLEW UP the area where I did work to like 1000 or more pixels wide.
4. How can I keep the same pixel dimensions but have really high resolution?

 

[dimoj]

You shouldn't need to do any of that.

and also BLEW UP the area where I did work to like 1000 or more pixels wide.

As I said in the first reply, Illustator will export (as Gif, PSD, whatever) either the ENTIRE artboard (that solid black rectangle that represents your 'page') or if you create crop marks it will export the area within the crop marks. The size of your 'image' is irrelevant to the export. So if your artboard is 1000 pixels wide then that is the area that will be exported to GIF or PSD (even if your text was only 50 pixels wide)

I'm sure this is where your problem lies, so please pay careful attention to that detail. You do not need to export to PSD to make a nice sharp Gif if you follow the above instructions carefully,

P.S. Any image zoomed right in in PS will look jagged. That is the nature of a rasterized image.

P.S.S You change your artboard size in File>Document setup. You create a crop area by drawing a rectangle over you image to the desired dimensions and then with the rectangle selected go to Object>Crop Marks>Make.

 

[dimoj]

The other thing I just thought of is you also have to keep in mind that if you are creating a gif with transparency (say text on a transparent background) you will lose some of the antialiasing on your text as Gifs only support one level of transparency. When making web pages I always try to get away without using transparency where possible for that reason.

It shouldn't be HUGELY noticable, but it is to a certain degree.

 

[djtflash]

One way to stop the jagged edges, is to make the background in Illustrator the same colour as the background on your webpage. Then when you save as a GIF file, set the transparency colour to the background colour. The jagged edges should disappear in your webpage.