Slices for the Web 1

[thebareman]

I am having trouble slicing web pages and making the text become HTML, rather than an image. I'm using Illustrator 10 on a PC. When I get the Slicing Options dialogue box up, the HTML text option is always grayed out. How do I have my text just be HTML?

 

[blueark]

Try this:

1. Write some text.
2. Select the text with the normal selection tools (not the slice selection tool.
3. Object > Slice > Make

Now under Object > Slice > Slice Options... you should be able to change it to HTML text.

hth

 

[jimoblak]

Do you mean the 'Text Displayed in Cell' field of the 'Slice Options' dialog? Text must be edited in Illustrator before slicing. The 'Slice Options' dialog simply shows what you have typed earlier... you would not update the text shown in the gray area.

Ideally, plain text should not be used as an element within most sliced layouts. Users can change the default size of text that their browsers display and throw off your entire layout. Try using graphic (uneditable) text to ensure the right fit - - or place the text at the bottom of a sliced layout so that lengthened text can flow down the page without disturbing the sliced layout.

 

[jimoblak]

thebareman wrote in another thread...
Thanks to the first answer above, I can now get the HTML Text not be grayed out. My problem now is that the html text does not keep the formatting I entered in Illustrator. It will not use the correct font for example. How do I force it to do that? If I leave the text as a graphic everything is fine, as HTML nothing is right.

You cannot 'force it'. You are very limited with HTML fonts. In order for the viewer to see a specific font on a web page, they must have it installed on their own computer. It is best to imagine your users as only having access to the basic Arial(Helvetica) and Times fonts. Any other fonts should be saved as graphics to maintain their visual style.

http://www.microsoft.com/typography/web/embedding/weft/

offers a Web Embedding Font Tool which works on MSIE 4+

To be safe, render the text as a graphic.

 

[blueark]

Best edit the HTML by hand at this point. You might want to change the <font> tag entered by Illustrator. Try adding a 'style' attribute (eg: <font style=&quot;font-family: Arial, Verdana; font-size: 16px;&quot;>) or better yet, link to external style sheets (a bit beyond the scope of this forum).

As jimoblak says, you can only use a font if it's available on the end users computer. In the example just given, you can see that you can specify the order of preference for fonts. So if you want to use, say, a font called Interface, but failing that Arial or any sans serif font, you can code it like this: font-family: Interface, Arial, sans-serif;

Likewise with the font-size attribute. By specifying pixels as the unit, it is less likely (but not guaranteed) to break your layout without resorting to graphics. Of course, there are disadvantages to this too, but then, nobody said web design was easy!