Illustrator and HTML

There was a recent thread on the Adobe Illustrator User to User forum on the topic of web design. At one point, the discussion led to whether Illustrator could create text links in HTML text. Helpful individuals on the forum explained that Illustrator isn't an HTML editor. While it can define image maps (clickable hot spot regions) and also slices, these are images and cannot be displayed as editable HTML text in a browser. And as such, "Illustrator can't export a normal HTML file wherein the "body text" of the page is live tagged text in the body of the resulting HTML file".

Or can it?

DISCLAIMER: This post is incredibly geeky. In addition, this post does not - in any way whatsoever - make the argument that Illustrator should be used to publish HTML web content instead of dedicated tools such as Dreamweaver, or even via hand-coding. It is presented purely as informational, and who knows, maybe you'll pick up some good info in the process. To balance all the "geekiness" within, this post also tells a wonderful story about a young and ambitious product manager (played by the part of yours truly). I can think of maybe one or two people at the most, who are still at Adobe, who are even aware of this (the functionality, and the story).

Let's turn the clock back to the year 2001. I had been hired as a product manager for Adobe Illustrator, and web design was the hot topic. Illustrator 9 had just shipped and, its other (viable transparency printing and crashing) issues aside, featured the first steps in the direction of web design. Support for a dedicated RGB mode and Pixel Preview were born, as well as the Save for Web feature. The web features were my responsibility and I had identified Symbols and Slicing as the two major "web features" that were to be added to Illustrator 10.

(Ancillary note: The ATG team at Adobe (Advanced Technology Group) saw the Symbols feature and instantly envisioned a tool to take advantage of it, and so was born the Symbol Sprayer and its "Symbolism" tools. It was on the golf course one morning (we used to play a quick 9 before coming into the office) that Ted Alspach and I joked about how much fun it might be to name all the Symbolism tools with words that started with the letter "s". By that afternoon, we had them all named: Sprayer, Shifter, Scruncher, Sizer, Spinner, Stainer, Screener, and Styler. Yeah, we got A LOT of work done that day).

I had also requested another web feature for Illustrator 10: javascript rollovers. This was a feature that another Adobe product already had -- Adobe ImageReady. Much of Adobe ImageReady's code was already being used in Illustrator for the Save for Web feature, and I had hoped that we could somehow include rollover functionality as well. Being that Illustrator was a great tool for designing web navigation, I thought it was extremely important to get that feature, as an integral part of the slicing feature set. There were two main issues at hand: first, adding rollovers was incredibly expensive* and would require numerous additional user interface elements; second, the product manager of the GoLive team was telling me how JavaScript rollovers were going to one day be replaced by "this incredible CSS thing", and that a major investment in "yesterday's technology" wasn't the right move.

*In application development terms, "expensive" doesn't mean "a lot of money". Rather, expensive refers to the amount of development or programming time and number of resources or engineers such a feature would require.

Still, I knew what web designers were asking for, and as such, continued to fight for some way to bring a more robust web experience into Illustrator. Just doing simple web slices as images wasn't going to "cut" it for me (get it? slices? cut? oh, never mind...). The developer working in the slices feature at the time was Matt Foster, and we had many discussions about how we could get the most out of the slices feature. The first thing we came up with was a way to let ImageReady and Illustrator work more closely together. If Illustrator wouldn't get rollovers, at least let us find a way to bring ImageReady into the picture, and we came up with the following. If you placed an ImageReady file that already had slices and rollovers in it, we would pass that through on output. Which meant that a user could create art with rollovers in ImageReady, place the resulting PSD into Illustrator, and upon export to HTML via the Save for Web feature, the rollovers would work. Unless something happened to that code, that functionality should still be there today.

That was fine and nice, but as a young and ambitious (naive?) product manager, I wanted more. I knew that web designers wanted to design a website where a slice of a table might be a video clip, a flash animation, or some other image or text that may be fed in via a script. Until then, a designer would simply design a graphic placeholder, that a coder would eventually replace with real code in the resulting HTML file. But what if a person could add that code right in Illustrator? Wouldn't that allow a developer to email a few lines of code to a designer, who would then plug that code in? In that way, a designer would be able to get a real preview in their web browser, instead of a placeholder. And what about if all a user wanted was real live HTML text? Text that could show up in a search, or be copied from the browser window? Wouldn't that be possible as well?

And so was born the idea for a new type of slice - the "HTML Text" slice. It was so ingenious (we thought at the time), that I actually filed for a patent at the time (sadly, I never got the patent as it was too difficult for me to prove that my idea was unique enough).

THE ANATOMY OF A SLICE

Before we understand how to use the HTML slice, we need to learn a few of the basics about slices in Illustrator. There are two ways to apply a slice in Illustrator - you can either use the Slice tool (a dumb slice), or you can apply a slice to an object as an attribute by selecting an object and choosing Object > Slice > Make (a smart slice). Dumb slices just mark off a region on your artboard. But smart slices know the content contained within the slice. A smart slice moves and resizes itself when the object within it moves and changes in size. A smart slice also knows when its contents are text point text or area text objects.



A slice is really a cell in an HTML table (see this post to learn how to turn slices into CSS DIVs), and as such, the overall table must be rectangular. So when you create a slice, Illustrator may need to create additional slices to create an overall rectangle. Slices that you create (either smart or dumb ones) are referred to as User slices. Slices that Illustrator creates are referred to as Auto slices, or "linked" slices, as they are linked to the slices that you create and update accordingly to fill up the overall table.

There are three types of slices that you can define in Illustrator:

- IMAGE SLICE: This is the default setting for every slice that you define in Illustrator. It simply means that the area enclosed in the slice will be rasterized as an image.

- NO IMAGE SLICE: This setting uses the slice to define the size of the table cell, but allows you to define whatever you want to appear within that cell. When you choose this setting, you'll get an empty field where you can punch in whatever code you want. In this way, you are able to call a movie clip, a flash file, or anything else. The Text is HTML button allows you to tell Illustrator that you want your text to appear as HTML code (not as actual text). NOTE: It appears there's a bug here, at least in CS4, because it seems the button does nothing.

- HTML TEXT SLICE: If you select a type object in Illustrator and you turn it into a slice, using the Object > Slice > Make command, you can choose HTML Text as a slice type. This feature automatically takes the text that's in your slice and makes it HTML text. In other words, if on your Illustrator artboard, you code some HTML, this setting will turn that HTML code into live HTML text. The feature is even smart enough to detect the type of text in the slice. It will automatically sense if type is set to bold or italic, and it will even sense font size. My patent idea that I filed was that we created a real function that would allow a designer to design as normal, and that the code would look at the design and automatically convert to HTML code.



You can change a slice's type in one of two ways. On the artboard in Illustrator, select the slice with the Slice Select tool and choose Object > Slice > Slice Options. Alternatively (and the way I prefer to do it), choose File > Save for Web & Devices, and then double click on any slice with the Slice Select tool. When you're done editing your slices, you can click the Done button to return to your document.

So there you have it. It's possible to get real HTML text out of Illustrator, with hyperlinks and all. Would you WANT to do it? Well, today, there are plenty of tools that do it oh-so-much better. As I said, it's geeky to the max, but I do hope you've enjoyed the ride.