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.

Illustrator and Dreamweaver Integration

As a core graphics program, Illustrator is used in just about every type of design workflow. Of all the applications found in Adobe Creative Suite (every edition), Illustrator has the most robust support when it comes to integration and file support. Illustrator is much like a universal bottle opener, supporting formats like AI, PDF, EPS, FXG, SVG, SWF, PSD, TIF, DXF, DWG, EMF, WMF, and just about any other 3-letter extension you can think of. When it comes to working with other applications, Illustrator has direct support with major applications like Photoshop, InDesign, Flash, Flash Catalyst, Fireworks, Acrobat, After Effects, Premiere Pro, and heck, even Flex (Illustrator can create Flex skins).

A closer look at that list reveals a gaping hole... Dreamweaver. One of the big features added to the CS4 version of Dreamweaver was support for Smart Objects, or the ability to place native Photoshop files directly into a Dreamweaver layout. Oddly, native Illustrator support is missing from that feature, leaving Illustrator users to find other ways to get graphics into their layouts.



Adobe's now-defunct GoLive did have its limitations, but support for native Illustrator files wasn't one of them. But all is not lost, as there are still a variety of ways to use both Illustrator and Dreamweaver hand in hand. In this article, I present two ways to do so.

CREATING CSS LAYOUTS WITH ILLUSTRATOR
If you're paying attention to anything that's going on in the world of web design, you know that web standards, such as CSS-based layouts, are all the rage. And for good reason. The limitation of table-based layouts become immediately apparent when you consider that the web browser as we know it is fading from view, and we are accessing web content on all types of screens and devices. That being said, there are all types of layouts that work for various tasks. At times, I can quickly visualize in my mind where I want to go -- and others require a bit more work. I like to sketch out my layouts in Illustrator as it's so easy to make changes and experiment with ideas.

I use regular rectangles with different fill colors and NO STROKES to indicate the regions in my layout. These regions will eventually become DIVs in my CSS layout. I use no strokes to avoid any possible antialiasing issues. I use the Transform panel to quickly and precisely adjust the sizes and position of the rectangles. I then select my rectangles and choose Object > Slice > Make to convert all of my rectangles to slices.

You may stop me there and cry "Hey Mordy! Slices create HTML tables! Why would you want to do that?" And the answer is quite simple. Illustrator has a feature called Save for Web & Devices. Not many people realize that this feature was once a full-blown separate application called ImageReady (oh, the memories). As such, Save for Web & Devices has a lot of "hidden" functionality that you have to dig for. One of those hidden gems is CSS support.



Once my slices are created, I choose File > Save for Web & Devices. I don't care about what file format to use for the images, because I won't use the images at all -- all I want is for Illustrator to use the slices I created to generate CSS DIV tags for layout. If you double-click on any slice with the Slice Select tool in the Save for Web & Devices dialog, you can assign a name to each slice -- a name which will eventually become the DIV ID for that region. Click Save and then from the Save Optimized As dialog box, choose "HTML Only" for the Format and from the Settings popup menu, choose "Other...".



Now the fun begins. You're now accessing tons of settings that once belonged to the full-blown ImageReady application. In the HTML panel, check the "Output XHTML" button, then switch to the Slices tab. For the Slice Output method, choose Generate CSS. Click OK, and then Click Save to create your HTML file. Opening the resulting HTML file in Dreamweaver will reveal a layout with all of your regions set up as AP DIVs (Absolute Position DIVs), giving you a head start on your layout. At this point, you can simply drop images or graphics into any of your DIVs. If only you could drop native AI files right into those DIVs...

ILLUSTRATOR SMART OBJECTS IN DREAMWEAVER
OK, denial has run its course and I've now entered the acceptance phase. Dreamweaver snubbed us and doesn't support Illustrator Smart Objects -- Dreamweaver and Photoshop are obviously having a big party and Illustrator wasn't invited (I'm sure the invite just got lost in the mail or got caught in a spam filter somewhere). But that's OK, because Illustrator can sneak into the party anyway. Sure, DW doesn't support AI smart objects. But PS does. SCORE.

Place your Illustrator art into Photoshop as a smart object, and then place the PSD into your Dreamweaver layout. Want to edit the file? Click the Edit button in Dreamweaver to open the PSD in Photoshop. Then double click the Vector Smart Object in Photoshop to open the file in Illustrator. Make the required edits and save the Illustrator file. Save the Photoshop file. Return to Dreamweaver, and everything updates. SWEET. It's like Photoshop is a revolving door. Wham bam thank you ma'am -- you've just been served. It may sound like a lot of extra steps, but in reality, it's just one more double-click than a standard Photoshop smart object.

In closing, by using Illustrator in this way, you have the benefit of using Illustrator art in pixel form via Photoshop (GIF/JPG/PNG), while you can still dump the art into Flash or Flash Catalyst for vector art (SWF). If you'd like to see more support for Illustrator in future versions of Dreamweaver, please speak up and leave a comment here. I'd love to send the folks on the Dreamweaver team a few wishes for what I'd like to see in the new year :)

10 Illustrator Resolutions for 2009

A while back, I started putting together a list of the features I thought that Illustrator users didn't use enough. When Illustrator CS4 came out, that list was somewhat modified, and this list is one that I've built from what I've seen out in the field. Whether it's doing onsite training at a company, reading emails that folks send to me, comments from users on forums, from attendees at conferences or seminars, or what I see being passed around on Twitter (follow me!), i've noticed certain questions that always come up -- ones that can easily be solved by learning a little bit more about the application you already know and use.

I had originally built this list under the title "10 features most people don't use in Illustrator, but should", but in the spirit of the new year, I've modified it to instead reference 10 possible resolutions for the new year. In other words, you don't have to do them all -- just pick one! That's right, pick one! I guarantee you'll be a happier Illustrator user for it.

1. USE THE APPEARANCE PANEL

You knew this one was coming, right? The Appearance panel is "the source" of all things about modern Illustrator usage. IT is the path to righteousness. If you aren't using it yet, you need to get with the program. Especially now in Illustrator CS4, the Appearance panel is even more central to your Illustrator experience, with its ability to apply attributes and effects directly from the panel. In fact, the Appearance panel's new functionality has opened more screen real estate for me, as I no longer need the Color, Swatches, Stroke, or Transparency panels on my screen anymore.

2. CREATE YOUR OWN NEW DOCUMENT PROFILES

Illustrator comes with four NDPs (New Document Profiles) plus two generic ones (Basic CMYK and Basic RGB), but those profiles are really all generic. Do you need all the color swatches that the Illustrator team put into each of the profiles? Are you always creating documents with just one artboard? How about symbols and graphic styles? You need to create your own New Document Profiles, with YOUR custom settings, colors, and content. I have NDPs set up for specific clients, for specific jobs (preset ad banners or ad sizes, etc.) and more.

3. CREATE YOUR OWN CUSTOM WORKSPACE

Adobe Illustrator CS4 ships with several wonderful workspaces already preset - such as "Like InDesign" and "Like FreeHand". There are also ones like "Web" and "Printing and Proofing". But again, these are general settings that aren't optimized for the way that YOU work. The point of Adobe including these workspaces isn't so that you should actually use them. It's so that you should be inspired to create your own. For example, I've created my own "Web 2.0" workspace for the way I like to work with web graphics in Illustrator. The Web workspace that Adobe made simply puts every single web panel on my screen. Make Illustrator your own by making your own workspace.

4. TRULY UNDERSTAND LIVE PAINT

Ever since Live Paint was introduced back in Illustrator CS2, I've been praising the feature. The problem? It's a horrible name to give a feature, considering that painting is only the least of what it does. Live Paint changes the way you THINK about Illustrator, and when you truly understand what it does and how it works, you'll find yourself in a whole new world, where vector artwork is pain-free. I even got Deke McClelland hooked on the feature a while ago.

5. LEARN LIVE COLOR

Much like Live Paint, Transparency, and the Appearance panel, the Live Color feature in Illustrator is a game-changer. It allows you to completely control color in your document, no matter how that document was created. If you are in prepress or are in art production, where you handle other people's files all day, you have GOT to learn to use it. I've always said that Live Color wasn't a specific feature, but more of a color "engine" that enables color editing in a whole new dimension in Illustrator. It seems Adobe listened because in CS4, the word Live Color appears nowhere at all. In fact, Adobe renamed the Live Color dialog to the Recolor Artwork dialog. Now THAT's a descriptive name. Now, if they could only make that dialog easier to use...

6. EXPLORE ILLUSTRATOR'S FREE CONTENT

Many Illustrator users are aware of the "annoying" standard swatches and symbols that appear in every document. Remember that Adobe provides these to help others learn how to reverse engineer them and create their own. But Adobe DOES ship with plenty of cool content that you CAN use. For example, Adobe includes some pretty cool brush and symbols libraries, features some great graphic styles, and comes with some really great templates (choose File > New From Template). And before you start rambling about how you're a real designer and you don't need templates, Adobe also includes a collection of helpful blank templates that make pretty good use of the multiple artboards feature.

7. USE ISOLATION MODE

There was a time (back in Illustrator CS2), when I hated the isolation mode feature in Illustrator. However, that's changed. Now, Isolation mode is a beautiful thing. Most Illustrator users are familiar with the whole "lock, unlock, lock, unlock" game that you play constantly when editing artwork. It isn't easy working on art when you've got tons of paths and objects all overlapping each other. In Illustrator CS4, you can even isolate individual paths. It's too powerful a feature to ignore.

8. TRY SMART GUIDES

With the updates in CS4, Smart Guides has a lot going for it. If you find the feature annoying, that doesn't mean your only course of action is to turn it off. Rather, learn how to control it. Smart Guides bring a new snapping behavior to CS4, and I suspect you'll like it.

9. GET ORGANIZED WITH LAYERS

I've always said that there are two kinds of people in this world: people who use layers, and people who don't. It's not much different than the clean desk/messy desk thing. But in reality, while using layers was just a "nice" thing in the past, there are just too many benefits to working with layers now to overlook the feature. Especially when you consider that now more than ever, we're repurposing art for so many different needs. In addition, so many other applications now recognize Illustrator's layers, including Photoshop, InDesign, Flash, Fireworks, Acrobat, the new Adobe Flash Catalyst, etc. That list will only continue to grow. Getting comfortable with creating layered documents now will only make things better for you now and in the years to come.

10. THINK ABOUT WEB SLICING

OK, I'll admit it, this one took me by surprise. Are you kidding me? Web slicing in Illustrator? But the truth is, I just finished recording a new Lynda.com title covering using Illustrator for the Web and as I was messing around with a few concepts, I realized just how useful slicing can be. I'll plan do write up a blog post on this specifically, but unlike multiple artboards, you can create multiple-sized slices in a single document and name them all, and export them to a web format all in one step. And I've found that Illustrator is most useful for those one-off web graphics -- the banners, the buttons, the art elements, etc. Generating lots of those, if you use slices right, is not only easy, it's been there for so many years. And we've never used it. It's worth another look.

Have You Seen Thermo? The Sequel

About a year ago, I posted some information about a technology that I saw presented at Adobe MAX in Chicago. The technology was a future product called Thermo. At this past year's Adobe MAX conference, Adobe provided an update on the progress of this application, and also introduced the new official name of the product: Adobe Flash Catalyst. I've had a chance to play with a preview version of the application, and have written about my experiences and opinions on the application over at my MOGO Media blog. Take a look at let me know what you think!

Just in Time for the Holidays: Real World Illustrator CS4

Real World Illustrator CS4 is finally a reality! The book is at the printer and will ship from the publisher on December 18, 2008 - YAY! As most of you know, I started the Real World Illustrator Blog shortly after I published the CS2 edition of the book. And I want to take a moment to thank all of you for your wonderful support and participation over the years! Many of your comments and suggestions have helped me create what is the most significant update to the Real World Illustrator book since I've been working on it.



Here's an overview of what you'll find in the CS4 edition of the book:

FULL COLOR, THROUGHOUT
Past editions of Real World Illustrator were printed in black and white (with a small color insert), which unfortunately, didn't do justice to many of the features. So I was thrilled when I found out that my publisher approved my request to do the entire book in color this time! Screenshots look better, the instructions and details are more clearly understood, and the book looks bright, colorful, and great!

FEATURED ARTISTS FROM ISTOCKPHOTO
As they say, be careful what you wish for. Immediately after I got the approval from my publisher to do the entire book in color, I realized the ramifications of that -- I would need to create great looking art for the examples in the book! Rather than panic, I turned towards my friends over at iStockPhoto. Especially after meeting several artists during my visit to Melbourne this past summer, I was able to find some really amazing artists. All of the artwork that appears in the book is derived from a short list of iStockPhoto illustrators. I arranged it so that each chapter features the artwork from a different illustrator. I'm sure you'll enjoy their art that appears in the book, and you can also check out their artwork on iStockPhoto as well. In the order in which they appear in the book, the featured artists are: Julie Felton (jfelton), Simon Oxley (simonox), John Woodcock (johnwoodcock), Cheryl Graham (freetransform), Diane Labombarbe (diane555), Kemie Guaida Ortega (kemie), Che McPherson (chemc), Jennifer Borton (bortonia), Fanelie Rosier (absolutely_frenchy), and Sam Posnick (sposnick).

FULL COVERAGE OF CS4 FEATURES
In the book, as you would expect, I thoroughly cover the new features found in Illustrator CS4, including multiple artboards and the Blob Brush tool. Of course, I also go into my usual in-depth detail on all of the nuances of the application, and cover all of the enhancements like the Appearance panel, smart guides, Separations preview, color blindness preview, and more. I still think Real World Illustrator has more information on the Live Color feature (which was added in CS3) than any other book or training materials that I've seen to date.

COMPLETELY REVISED CONTENT AND STRUCTURE
Based on a tremendous amount of helpful feedback that I've received over the years, I have reformatted the structure of the book to better cover the features in a more conceptual way. In this new format, you can easily read the book from cover to cover, but even more so, the book serves as an incredible reference as the features are grouped together in a more intuitive fashion. I've also made significant updates and even complete rewrites of the chapters. For example, the chapter covering web graphics is almost entire new and covers the challenges of using Illustrator to create precise pixel-perfect and antialiased artwork. The featured artwork that I use throughout the book also allowed me to provide examples that are both clear and understandable.

NEW COVER ILLUSTRATION
Each edition of Real World Illustrator gets a fabulous new illustration, and CS4 is certainly no different. Von Glitschka was hired to create the cover illustration for the CS4 edition and he doesn't disappoint. Von's use of color and his style has always appealed to me, and in a blog post, Von goes into detail on what inspired him for this particular project. In fact, I enjoyed working with Von so much that I also asked him to create an identity for my upcoming relaunch of Mordy.com.