Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Simple Illustrator question about making .gif for websites

using Illustrator 10.0.3



3:41 pm on Jul 23, 2006 (gmt 0)

10+ Year Member

When I make a line of type in Illustrator and want to save it as a .gif for the web, I notice it has some wasted space around the text. Is there a way to get rid of that? I would rather not have to open it in a photoshop and then have to crop it.


4:06 pm on Jul 23, 2006 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Are you using the "Save for Web" option? If you are and still have unwanted white space, it sounds like you have something within that white space area. An extra point or something like that. The "Save for Web" option is going to trim all white space from the outer boundaries of the element(s).


2:53 am on Jul 24, 2006 (gmt 0)

10+ Year Member

Yes, I did choose "Save for Web." I have uploaded some screen shots to my server so you can see what is happening. Here are the URLs:


1.jpg shows what the text looks like in Illustrator before I select "save for web."
2.jpg shows what it looks like in the "save for web" editor.
test.gif show is the finished product.

As you can see, the dead space is at the top and bottom, not the sides. But how do I get rid of the waste at the top and bottom? I notice there is a slice tool in the "save for web" editor. I do not know how to use it but should I have to? Is there a way to do this without having to do any extra steps or manual hand work?

[edited by: engine at 2:18 pm (utc) on July 24, 2006]
[edit reason]
[1][edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]


7:33 pm on Jul 24, 2006 (gmt 0)

10+ Year Member

See if OBJECT > Path > Clean up helps


11:53 pm on Jul 25, 2006 (gmt 0)

10+ Year Member

Moderator, I realized you do not want URLs. That is why I just typed the domain without any http or www. When I replied to the post I could not find a way to upload the example files so I put them on my server so others could see them. So tell me, how is it possible for someone to see a file if we cannot refer to it even in a somewhat indirect way?


11:49 am on Jul 26, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Email the url to the member that wishes to have it.

If you wish send it to me and I'll take a look!


12:28 pm on Jul 26, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi ron_ron

There are a bag full of requests every day with people asking to place links and files so that others here can view them. Sadly the largest end of those requests are spam. To keep this place free from spam & self promotion, no URLs are allowed. It may seem harsh but we muddle through :).

It sounds to me by your description that you have a few objects/nodes either hidden, in layers that are hidden, or are the same colour as your background (white?). If this the case you will be able to identify those objects in by going to > view > outline.

Open your layers palette and check that all are visible (the eye tool)

Delete any unused objects - Then use Jesse's handy tip to select and delete any spare nodes quickly.

stevenb 1959

1:30 pm on Jul 26, 2006 (gmt 0)

10+ Year Member

One way is to set crop marks around your item and then when you save for the web, only the info inside the crop marks will be saved.


5:16 pm on Jul 26, 2006 (gmt 0)

10+ Year Member

The crop marks does work - good thing to learn.


5:18 am on Jul 27, 2006 (gmt 0)

10+ Year Member

OK, I think I have discovered why I was having the problem of space around text when saving for web. I guess you are supposed to create outlines first, then save for web, right? I would create some text in Illustrator and then go directly to save for web. That's not the way it should be done, right?

Thanks to all.


8:17 am on Jul 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I think converting text to outlines wouldn't make much difference unless the text was in a text box - It's a good thing to keep text editable in the source file if you can - makes updates easier in the future if you can simply overwrite.

Text boxes occur when you click and drag with the type tool - this creates a limited space for text but will also cause the issue you describe. Text boxes are useful for paragraphs but generally they are not needed for things like banners or logos.


5:14 pm on Jul 27, 2006 (gmt 0)

10+ Year Member

This was taken from Google groups;

By default, Save for Web uses the "bounding box" of the document, which for text includes the maximum ascender and descender heights of the font. (Select it with the black area tool and View>Show Bounding Box turned on, and the rectangle you see is what gets saved by default.)

There are several things you can do to modify this. One is to outline your text. (Text>Create Outlines).

A more general way which will be good to know about for other purposes is to change the Crop Area. Draw a rectangle of your desired dimensions for the graphic, select it, and use the Object>Crop Area>Make command. The Crop Area rectangle sets the area to be exported by Save for Web, Save as EPS, etc. This is useful for when you want to export an area that is either larger or smaller than the bounding box of all the art in the document.


Featured Threads

Hot Threads This Week

Hot Threads This Month