homepage Welcome to WebmasterWorld Guest from 54.197.211.197
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Simple Illustrator question about making .gif for websites
using Illustrator 10.0.3
ron_ron

10+ Year Member



 
Msg#: 3019245 posted 3:41 pm on Jul 23, 2006 (gmt 0)

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.

 

pageoneresults

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3019245 posted 4:06 pm on Jul 23, 2006 (gmt 0)

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).

ron_ron

10+ Year Member



 
Msg#: 3019245 posted 2:53 am on Jul 24, 2006 (gmt 0)

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:

<snip>

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]
[/edit][/1]

jessejump

5+ Year Member



 
Msg#: 3019245 posted 7:33 pm on Jul 24, 2006 (gmt 0)

See if OBJECT > Path > Clean up helps

ron_ron

10+ Year Member



 
Msg#: 3019245 posted 11:53 pm on Jul 25, 2006 (gmt 0)

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?

Jon_King

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3019245 posted 11:49 am on Jul 26, 2006 (gmt 0)

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

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

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3019245 posted 12:28 pm on Jul 26, 2006 (gmt 0)

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

10+ Year Member



 
Msg#: 3019245 posted 1:30 pm on Jul 26, 2006 (gmt 0)

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.

jessejump

5+ Year Member



 
Msg#: 3019245 posted 5:16 pm on Jul 26, 2006 (gmt 0)

The crop marks does work - good thing to learn.

ron_ron

10+ Year Member



 
Msg#: 3019245 posted 5:18 am on Jul 27, 2006 (gmt 0)

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.

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3019245 posted 8:17 am on Jul 27, 2006 (gmt 0)

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.

jessejump

5+ Year Member



 
Msg#: 3019245 posted 5:14 pm on Jul 27, 2006 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved