- Graphics and text often appear soft or fuzzy when exported, especially when compared to similar graphics or text exported from Photoshop
- Extra pixels are sometimes added when artwork is exported, resulting in images with incorrect pixel dimensions
A blog about Adobe Illustrator and design in general
Showing posts with label web graphics. Show all posts
Showing posts with label web graphics. Show all posts
August 17, 2010
When Pixels Snap: Antialiasing in Illustrator CS5
Over the years, designers using Illustrator to create web graphics have faced two main issues:
May 7, 2009
You've Been Sliced! (sorry, multiple artboards)
One of the headlining features added to Illustrator CS4 is multiple artboards. After years and years of waiting, users can finally create a single document with true multiple artboards - which can be of any size or orientation, which automatically become true multiple-page PDF files, and which can be easily printed - pure bliss...
...unless you're a web designer, that is.
Here's the deal. When I first saw the multiple artboards feature, I immediately thought about how wonderful it would be to create all of my ad banners and assorted web graphics for a particular campaign in a single file. Being each element is a different size, it would be easy to create a variety of different-sized artboards in the same document. Which works fine. Until I am ready to export my art.
When you're in the world of print, you can choose to print a range of pages (or artboards). Same for saving a PDF file. But when exporting web graphics, you're usually using Illustrator's Save for Web feature. And there's where things start to break down. Because while Illustrator can contain up to 99 artboards within a single document, only one artboard can be "active" at any one time. And only the active artboard is loaded into Save for Web when you use that feature. In other words, there's no way to get multiple artboards into Save for Web -- you can only bring them in one at a time.
But there's another issue at hand. More so than in the world of print, we are usually very careful about how we name our files when creating web graphics. In a print workflow, where a PDF might be our final delivery method, we can have 30 images in our layout, but we have a single PDF that contains all of those files. As such, the names of those files aren't important. But on the web, where graphics are constantly swapped out for others, and more importantly, where we are working with code and referencing file names all the time, we rely on using careful naming conventions in web workflows.
Artboards, as wonderful as they are, don't have names. So that means each time I load an active artboard into Save for Web, and I save that graphic, I have to give it a name. That may not sound so crazy at first, but if you have 20 assorted graphics in a single document, and you are constantly saving and updating your art (who isn't), then you are selecting an artboard to make it active, then you're launching Save for Web, then you're choosing optimization settings (JPG, GIF, etc), then you're saving your art and giving it a name -- all manually -- and if that weren't enough, you're doing it again and again for each of the 20 graphics in your file - EVERY time you save your art.
Which is why I find myself relying on a feature that few focus on these days: SLICING.
I know - I can envision Jeffrey Zeldman raising his hand in the air Darth Vader-like as if that would make my throat constrict because I have spoken against the Empire - but don't get me wrong - I'm not suggesting that folks use slicing for layout. I'm talking about cranking out multiple-sized individual web graphics from a single file quickly and efficiently.
So let's begin.
1. Create a new document using the Web profile, but use a larger (single) artboard if you will have lots of different graphics you'll be working with.
2. Use the Rectangle tool to draw a rectangle for each graphic that you'll need to create. Instead of drawing them out visually, click once with the tool on the artboard and enter precise numerical values. Give each of these rectangles a black fill with NO STROKE (important). Position the rectangles all over your document, however you'd like.
3. Press Cmd-A (Ctrl-A) to select all of your lovely rectangles and press Cmd-C (Ctrl-C) to copy them, and then Cmd-F (Ctrl-F) to paste in front. Then press Cmd-5 (Ctrl-5) to turn them all into Guides. This will allow you to see the boundaries of each of your individual graphics.
4. Press Cmd-A (Ctrl-A) to select all the rectangles (the original ones you created) and choose Object > Slice > Make. This will turn each rectangle into a user slice. The document will also fill up with auto slices -- those created automatically in the areas between all the rectangles -- but forget about those.
5. We don't need to see all of these slices, so let's do two things: first, since your rectangles are still selected, change their opacity values to 0%. Alternatively, you can just set their fill attributes to none; second, choose View > Hide Slices.
6. We don't want our slices to move around, so let's employ some layers. Rename Layer 1 to "SLICES" and lock that layer. Then create a new layer called "ART". All of your graphics will be drawn on this art layer, and the slices are just where we need them.
7. Now you can start creating the art for all of your elements. But at some point, let's go and set up the next step in our workflow. Choose File > Save for Web. The dialog opens and you'll see all of your individual graphics are there in their own little slices. Choose the Slice Select tool and double-click on the first piece of art. From the Slice Options dialog box, enter the designer name for that graphic in the Name field. Don't worry about any other settings -- those are moot for our purposes here. Click OK and do the same for every single piece of art in your file. Additionally, if you already know what file format you want to save your art in (JPG, GIF PNG, etc.), you can do so while each slice is selected as well. Remember you only have to do this for the slices you created, not the empty ones that were created automatically. When you've given names and optimization settings to all of your art, click the Done button in the Save for Web dialog. This returns you to Illustrator, but all of your settings are saved in the slices. So you'll never have to rename or adjust the optimization settings again.
8. OK, after some more work on your art ("always tweaking, we are" says Designer Yoda), you're ready to export your art. Choose File > Save for Web and click on the Save button. For Format, choose Images Only and for Slices, choose All User Slices. For Settings, choose Other and switch to the Saving Files section -- where it says Optimized Files, uncheck the option marked "Put Images in Folder" (unless you want AI to always save your images into a single folder). Click OK and then click Save. You'll see that ALL of your web graphics will be saved at once, all with the right optimization settings and all named correctly. Naturally, once you've applied these settings, they are "sticky" and you can just choose Save for Web, click Save and then Save again, and you're done. If you're overwriting files (which happens often as you update your graphics), you'll be alerted to the fact (and you'll just press OK). In reality, you could even record an Action to just perform the Save for Web export with a single keystroke.
So there you have it. For most web design tasks where you're creating a variety of art - slices are far more efficient than multiple artboards. However, if you're mocking up full web pages with Illustrator, multiple pages would work just fine - especially if your goal is to use CSS to actually implement those designs in DW or elsewhere.
Got other web design tips or ideas to share? Don't be shy! There's a comment button below that begs for your attention! :)
...unless you're a web designer, that is.
Here's the deal. When I first saw the multiple artboards feature, I immediately thought about how wonderful it would be to create all of my ad banners and assorted web graphics for a particular campaign in a single file. Being each element is a different size, it would be easy to create a variety of different-sized artboards in the same document. Which works fine. Until I am ready to export my art.
When you're in the world of print, you can choose to print a range of pages (or artboards). Same for saving a PDF file. But when exporting web graphics, you're usually using Illustrator's Save for Web feature. And there's where things start to break down. Because while Illustrator can contain up to 99 artboards within a single document, only one artboard can be "active" at any one time. And only the active artboard is loaded into Save for Web when you use that feature. In other words, there's no way to get multiple artboards into Save for Web -- you can only bring them in one at a time.
But there's another issue at hand. More so than in the world of print, we are usually very careful about how we name our files when creating web graphics. In a print workflow, where a PDF might be our final delivery method, we can have 30 images in our layout, but we have a single PDF that contains all of those files. As such, the names of those files aren't important. But on the web, where graphics are constantly swapped out for others, and more importantly, where we are working with code and referencing file names all the time, we rely on using careful naming conventions in web workflows.
Artboards, as wonderful as they are, don't have names. So that means each time I load an active artboard into Save for Web, and I save that graphic, I have to give it a name. That may not sound so crazy at first, but if you have 20 assorted graphics in a single document, and you are constantly saving and updating your art (who isn't), then you are selecting an artboard to make it active, then you're launching Save for Web, then you're choosing optimization settings (JPG, GIF, etc), then you're saving your art and giving it a name -- all manually -- and if that weren't enough, you're doing it again and again for each of the 20 graphics in your file - EVERY time you save your art.
Which is why I find myself relying on a feature that few focus on these days: SLICING.
I know - I can envision Jeffrey Zeldman raising his hand in the air Darth Vader-like as if that would make my throat constrict because I have spoken against the Empire - but don't get me wrong - I'm not suggesting that folks use slicing for layout. I'm talking about cranking out multiple-sized individual web graphics from a single file quickly and efficiently.
So let's begin.
1. Create a new document using the Web profile, but use a larger (single) artboard if you will have lots of different graphics you'll be working with.
2. Use the Rectangle tool to draw a rectangle for each graphic that you'll need to create. Instead of drawing them out visually, click once with the tool on the artboard and enter precise numerical values. Give each of these rectangles a black fill with NO STROKE (important). Position the rectangles all over your document, however you'd like.
3. Press Cmd-A (Ctrl-A) to select all of your lovely rectangles and press Cmd-C (Ctrl-C) to copy them, and then Cmd-F (Ctrl-F) to paste in front. Then press Cmd-5 (Ctrl-5) to turn them all into Guides. This will allow you to see the boundaries of each of your individual graphics.
4. Press Cmd-A (Ctrl-A) to select all the rectangles (the original ones you created) and choose Object > Slice > Make. This will turn each rectangle into a user slice. The document will also fill up with auto slices -- those created automatically in the areas between all the rectangles -- but forget about those.
5. We don't need to see all of these slices, so let's do two things: first, since your rectangles are still selected, change their opacity values to 0%. Alternatively, you can just set their fill attributes to none; second, choose View > Hide Slices.
6. We don't want our slices to move around, so let's employ some layers. Rename Layer 1 to "SLICES" and lock that layer. Then create a new layer called "ART". All of your graphics will be drawn on this art layer, and the slices are just where we need them.
7. Now you can start creating the art for all of your elements. But at some point, let's go and set up the next step in our workflow. Choose File > Save for Web. The dialog opens and you'll see all of your individual graphics are there in their own little slices. Choose the Slice Select tool and double-click on the first piece of art. From the Slice Options dialog box, enter the designer name for that graphic in the Name field. Don't worry about any other settings -- those are moot for our purposes here. Click OK and do the same for every single piece of art in your file. Additionally, if you already know what file format you want to save your art in (JPG, GIF PNG, etc.), you can do so while each slice is selected as well. Remember you only have to do this for the slices you created, not the empty ones that were created automatically. When you've given names and optimization settings to all of your art, click the Done button in the Save for Web dialog. This returns you to Illustrator, but all of your settings are saved in the slices. So you'll never have to rename or adjust the optimization settings again.
8. OK, after some more work on your art ("always tweaking, we are" says Designer Yoda), you're ready to export your art. Choose File > Save for Web and click on the Save button. For Format, choose Images Only and for Slices, choose All User Slices. For Settings, choose Other and switch to the Saving Files section -- where it says Optimized Files, uncheck the option marked "Put Images in Folder" (unless you want AI to always save your images into a single folder). Click OK and then click Save. You'll see that ALL of your web graphics will be saved at once, all with the right optimization settings and all named correctly. Naturally, once you've applied these settings, they are "sticky" and you can just choose Save for Web, click Save and then Save again, and you're done. If you're overwriting files (which happens often as you update your graphics), you'll be alerted to the fact (and you'll just press OK). In reality, you could even record an Action to just perform the Save for Web export with a single keystroke.
So there you have it. For most web design tasks where you're creating a variety of art - slices are far more efficient than multiple artboards. However, if you're mocking up full web pages with Illustrator, multiple pages would work just fine - especially if your goal is to use CSS to actually implement those designs in DW or elsewhere.
Got other web design tips or ideas to share? Don't be shy! There's a comment button below that begs for your attention! :)
January 23, 2009
Illustrator CS4 for the Web now available at Lynda.com
...And the hits just keep on coming...
Today, Lynda.com released my latest video training title: Illustrator CS4 for the Web. I'm particularly excited about this title because in the past, I've done separate web titles for using Illustrator and Flash together as well as using Illustrator to create pixel-based web content. In this new title, I've decided to cover ALL web topics together. So the video covers using Illustrator as it is used for general web content.
If you're already a Lynda.com subscriber, you can view the video title here. If you aren't a subscriber, you can get a free 7-day trial by clicking here.
Today, Lynda.com released my latest video training title: Illustrator CS4 for the Web. I'm particularly excited about this title because in the past, I've done separate web titles for using Illustrator and Flash together as well as using Illustrator to create pixel-based web content. In this new title, I've decided to cover ALL web topics together. So the video covers using Illustrator as it is used for general web content.
If you're already a Lynda.com subscriber, you can view the video title here. If you aren't a subscriber, you can get a free 7-day trial by clicking here.
December 26, 2008
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.
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.
December 17, 2008
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.
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.
September 4, 2008
Making Illustrator and Fireworks Fit
Me love Illustrator long time. I use it for many many things, including web design. I even have an entire video training title dedicated to creating pixel-based graphics with Illustrator.
At the same time, I have always been aware of another application called Fireworks, which admittedly, I've ignored somewhat. Ok, so that isn't really fair. When it was originally released, Fireworks was touted as a crossover application -- it was like one of those vanilla and chocolate swirl soft ice cream cones (yum) -- handling both vector- and pixel-based graphics. Back then, I can't say that I was doing enough web design to care, especially considering that back then, it was also easy enough to use Photoshop and ImageReady (remember that sweet app?) to handle my needs. Fireworks also lacked a sophisticated user interface or advanced text features. I also had trouble adjusting to the drawing tools, again, coming from an Illustrator perspective.
When Adobe and Macromedia merged and Creative Suite 3 was released, there was no FreeHand, but there was a Fireworks and there was an Illustrator. I took another look at Fireworks, considering that I was now doing much more web work. There was some cool stuff to find in Fireworks, but the barriers were still there.
A few months back, Adobe released public betas of some of the CS4 products -- and Fireworks CS4 was included in that. Since then, I've played a lot with Fireworks. Now, with the rest of the CS4 apps on the horizon, I thought it might be a good time to take a closer look at what Fireworks has to offer.
For the first time since I've looked at Fireworks, I can say that I now "get it". I grok FW. Especially when you consider not only the kind of work I do on a daily basis that involves web graphics, but when you also consider that it isn't just about graphics anymore. Web 2.0 standards have given reason for designers to think carefully about how they create content. And it isn't just web stuff either. Designers also work on user experiences and other interactive elements.
First, let's take a look at some of the stuff that Adobe packed into Fireworks CS4:
- A new user interface. If you haven't already seen it, you should take a look at the new user interface in Fireworks CS4. Why? Because it's the new user interface that Adobe has integrated across all CS4 applications. With this new interface, I now feel comfortable in Fireworks. Yeah, it's a small thing, but sometimes these small things mean a lot.
- The Adobe Text Engine. Illustrator, Photoshop, and After Effects all share the same underlying text engine code. Now, Fireworks joins the party, making it possible to move text easily between these Adobe apps.
- PDF Export. It's now easy to create a PDF of your design to send off to a client for review. Sending JPEG files were always a pain, especially for multiple-page designs. Uploading content to a server meant clients couldn't access or review content off-line (or required logins, etc).
These items have certainly removed the barrier -- I can now find my way around Fireworks and using it isn't the frustrating experience it once was. But I'll admit that I was still wondering why I would want to do all my work in Fireworks when I was able to accomplish just about the same stuff in my far more comfortable environment of Illustrator. After all, I could crank stuff out MUCH faster from AI than I ever could in FW. The lightbulb went on when I began to understand the significance of some of the other features that are new in Fireworks CS4:
- CSS and Images Export. As I understand more and more about how the web works, and what Web 2.0 really means, I have come to understand the importance of CSS. One of the key concepts of CSS is being able to understand that content and structure are two very different things (traditional designers always combine the two). To contrast, when you draw a rectangle in Illustrator, you get an image on export. Draw that same rectangle in Fireworks and on export, you get a "div". Even more amazing, Fireworks can even write CSS for auto-expanding elements that stretch to fit content. With Illustrator, I'd design something, slice it into bits and then try my hand at coding it in Dreamweaver. In FW, it just happens. This is SIGNIFICANT. One could argue that Illustrator should have such functionality built in. I for one would love to see it. But at the same time, Fireworks CS4 has it, and I LOVE it. Now I can design stuff and have the code written for me. Isn't that the way it was always supposed to be?
- AIR Authoring. OK, I can hear you all snickering now. Mordy has gone off the deep end. AIR authoring is for developers, not designers. Why would a designer even THINK about writing an AIR application? And the answer is, never. For the same reason as I stated above. Because Fireworks just does it for you. It's literally a mouse click. And so you ask why you'd ever want to create an AIR app. And the answer is that Fireworks has the ability to build interaction into a design. I'm not talking about Flash animation stuff -- I'm talking about building a prototype. Maybe it's a 4 page website. You want your client to see a design mockup and you want it to WORK so that when they click on the buttons, the pages turn, etc. You want rollovers to work. Well, Fireworks was always able to do that. And now, when you need to show the client a comp, you create an AIR app and send it to them. AIR apps run right on the desktop. No need for a browser. No need for an internet connection. Mac, Windows, it's all good. And the comp WORKS. Again, it would be totally awesome if Illustrator could do something like that. But it can't even come close. And FW not only does it, it does it really well.
OK, so after all this, I'll admit I was still not totally sold on Fireworks. After all, I need to repurpose my art all the time. When you're in Illustrator, you can go to the web, to print, to video, and practically to ANY app with no barriers. Fireworks is a one-trick pony -- it's great for designing something specifically for the web, but what do I do if I need to move something into InDesign? Besides, I'm too reliant upon Illustrator.
Well, two things have since caught my eye.
1. Fireworks now does a really awesome job on importing art from Illustrator. In fact, you can use Fireworks CS4 to open native Illustrator files directly. Layers are maintained, text is completely compatible. It's awesome. Basically, I can create my initial designs in Illustrator and bring them right into Fireworks when I'm ready to take it to the next step. So my initial problem of not being comfortable with the drawing environment is a non-issue. I can create art in AI and bring it into FW as needed.
2. Speaking of the drawing environment, Fireworks DOES have some really sweet drawing tools, which are LIVE editing tools. Unlike Illustrator, where once you let go of an object, it becomes a static path, objects created in Fireworks are editable. For example, you can click and drag on a star to change the number of points. You can draw arrows and adjust them as needed, at any time. What a concept. WHY Illustrator can't do this is beyond comprehension, but I have found inner peace. Fireworks has a command in the Edit menu called Copy as Vectors. And wouldn't you know, you can move content from FW right into AI. Of course, the object isn't live once it gets to AI, but it's just as easy to readjust in FW and repaste it into AI again. Go figure -- now I'm using FW to create art that I'm using in Illustrator!
At the end of the day, even beyond the anti-aliasing issues that Illustrator has, I've found reasons to look to Fireworks. Especially when working on designs that require Web 2.0 compatibility. Hopefully, this post will be helpful to those who find that they are at the limits of what Illustrator can do in regard to web and interactive design. If you haven't looked at Fireworks CS4 yet, it's worth heading over to Adobe Labs for a look. At the very least, you'll get some experience with the new CS4 user interface. At the very best, you'll have found a new application in your design tool box.
Got additional comments about Illustrator or Fireworks? Discussion is ALWAYS encouraged!
At the same time, I have always been aware of another application called Fireworks, which admittedly, I've ignored somewhat. Ok, so that isn't really fair. When it was originally released, Fireworks was touted as a crossover application -- it was like one of those vanilla and chocolate swirl soft ice cream cones (yum) -- handling both vector- and pixel-based graphics. Back then, I can't say that I was doing enough web design to care, especially considering that back then, it was also easy enough to use Photoshop and ImageReady (remember that sweet app?) to handle my needs. Fireworks also lacked a sophisticated user interface or advanced text features. I also had trouble adjusting to the drawing tools, again, coming from an Illustrator perspective.
When Adobe and Macromedia merged and Creative Suite 3 was released, there was no FreeHand, but there was a Fireworks and there was an Illustrator. I took another look at Fireworks, considering that I was now doing much more web work. There was some cool stuff to find in Fireworks, but the barriers were still there.
A few months back, Adobe released public betas of some of the CS4 products -- and Fireworks CS4 was included in that. Since then, I've played a lot with Fireworks. Now, with the rest of the CS4 apps on the horizon, I thought it might be a good time to take a closer look at what Fireworks has to offer.
For the first time since I've looked at Fireworks, I can say that I now "get it". I grok FW. Especially when you consider not only the kind of work I do on a daily basis that involves web graphics, but when you also consider that it isn't just about graphics anymore. Web 2.0 standards have given reason for designers to think carefully about how they create content. And it isn't just web stuff either. Designers also work on user experiences and other interactive elements.
First, let's take a look at some of the stuff that Adobe packed into Fireworks CS4:
- A new user interface. If you haven't already seen it, you should take a look at the new user interface in Fireworks CS4. Why? Because it's the new user interface that Adobe has integrated across all CS4 applications. With this new interface, I now feel comfortable in Fireworks. Yeah, it's a small thing, but sometimes these small things mean a lot.
- The Adobe Text Engine. Illustrator, Photoshop, and After Effects all share the same underlying text engine code. Now, Fireworks joins the party, making it possible to move text easily between these Adobe apps.
- PDF Export. It's now easy to create a PDF of your design to send off to a client for review. Sending JPEG files were always a pain, especially for multiple-page designs. Uploading content to a server meant clients couldn't access or review content off-line (or required logins, etc).
These items have certainly removed the barrier -- I can now find my way around Fireworks and using it isn't the frustrating experience it once was. But I'll admit that I was still wondering why I would want to do all my work in Fireworks when I was able to accomplish just about the same stuff in my far more comfortable environment of Illustrator. After all, I could crank stuff out MUCH faster from AI than I ever could in FW. The lightbulb went on when I began to understand the significance of some of the other features that are new in Fireworks CS4:
- CSS and Images Export. As I understand more and more about how the web works, and what Web 2.0 really means, I have come to understand the importance of CSS. One of the key concepts of CSS is being able to understand that content and structure are two very different things (traditional designers always combine the two). To contrast, when you draw a rectangle in Illustrator, you get an image on export. Draw that same rectangle in Fireworks and on export, you get a "div". Even more amazing, Fireworks can even write CSS for auto-expanding elements that stretch to fit content. With Illustrator, I'd design something, slice it into bits and then try my hand at coding it in Dreamweaver. In FW, it just happens. This is SIGNIFICANT. One could argue that Illustrator should have such functionality built in. I for one would love to see it. But at the same time, Fireworks CS4 has it, and I LOVE it. Now I can design stuff and have the code written for me. Isn't that the way it was always supposed to be?
- AIR Authoring. OK, I can hear you all snickering now. Mordy has gone off the deep end. AIR authoring is for developers, not designers. Why would a designer even THINK about writing an AIR application? And the answer is, never. For the same reason as I stated above. Because Fireworks just does it for you. It's literally a mouse click. And so you ask why you'd ever want to create an AIR app. And the answer is that Fireworks has the ability to build interaction into a design. I'm not talking about Flash animation stuff -- I'm talking about building a prototype. Maybe it's a 4 page website. You want your client to see a design mockup and you want it to WORK so that when they click on the buttons, the pages turn, etc. You want rollovers to work. Well, Fireworks was always able to do that. And now, when you need to show the client a comp, you create an AIR app and send it to them. AIR apps run right on the desktop. No need for a browser. No need for an internet connection. Mac, Windows, it's all good. And the comp WORKS. Again, it would be totally awesome if Illustrator could do something like that. But it can't even come close. And FW not only does it, it does it really well.
OK, so after all this, I'll admit I was still not totally sold on Fireworks. After all, I need to repurpose my art all the time. When you're in Illustrator, you can go to the web, to print, to video, and practically to ANY app with no barriers. Fireworks is a one-trick pony -- it's great for designing something specifically for the web, but what do I do if I need to move something into InDesign? Besides, I'm too reliant upon Illustrator.
Well, two things have since caught my eye.
1. Fireworks now does a really awesome job on importing art from Illustrator. In fact, you can use Fireworks CS4 to open native Illustrator files directly. Layers are maintained, text is completely compatible. It's awesome. Basically, I can create my initial designs in Illustrator and bring them right into Fireworks when I'm ready to take it to the next step. So my initial problem of not being comfortable with the drawing environment is a non-issue. I can create art in AI and bring it into FW as needed.
2. Speaking of the drawing environment, Fireworks DOES have some really sweet drawing tools, which are LIVE editing tools. Unlike Illustrator, where once you let go of an object, it becomes a static path, objects created in Fireworks are editable. For example, you can click and drag on a star to change the number of points. You can draw arrows and adjust them as needed, at any time. What a concept. WHY Illustrator can't do this is beyond comprehension, but I have found inner peace. Fireworks has a command in the Edit menu called Copy as Vectors. And wouldn't you know, you can move content from FW right into AI. Of course, the object isn't live once it gets to AI, but it's just as easy to readjust in FW and repaste it into AI again. Go figure -- now I'm using FW to create art that I'm using in Illustrator!
At the end of the day, even beyond the anti-aliasing issues that Illustrator has, I've found reasons to look to Fireworks. Especially when working on designs that require Web 2.0 compatibility. Hopefully, this post will be helpful to those who find that they are at the limits of what Illustrator can do in regard to web and interactive design. If you haven't looked at Fireworks CS4 yet, it's worth heading over to Adobe Labs for a look. At the very least, you'll get some experience with the new CS4 user interface. At the very best, you'll have found a new application in your design tool box.
Got additional comments about Illustrator or Fireworks? Discussion is ALWAYS encouraged!
May 7, 2008
Creating Web Graphics with Illustrator
My latest video training title from Lynda.com was released today. It's called "Illustrator CS3 for the Web" and it primarily covers using Illustrator to create pixel-based web graphics and designs.
In the title, I specifically cover things like understanding Illustrator's antialiasing and Pixel Preview settings (and how to avoid the fat gray lines), understanding web slicing "the Illustrator way" and using Illustrator alongside applications like Photoshop and Dreamweaver. If you're already a subscriber to Lynda.com, the title is already available to you. If you aren't a subscriber, you can get a free 7-day trial by clicking on the link in the sidebar on the right.
Any feedback is welcome :)
In the title, I specifically cover things like understanding Illustrator's antialiasing and Pixel Preview settings (and how to avoid the fat gray lines), understanding web slicing "the Illustrator way" and using Illustrator alongside applications like Photoshop and Dreamweaver. If you're already a subscriber to Lynda.com, the title is already available to you. If you aren't a subscriber, you can get a free 7-day trial by clicking on the link in the sidebar on the right.
Any feedback is welcome :)
March 7, 2007
To anti-alias or not to anti-alias? That is the (blurry) question...
I found this question posted on the Illustrator World forums and thought it would be cool to share a tip along with some helpful information.
I have an image with a brown rectangle for the background, a lake on top of that, and then some text. I would like the rectangle to have anti-aliasing turned off and keep anti-aliasing turned on for the text. The issue is, when I post the rectangle up on a website with a brown background, the rectangle's border has some anti-aliasing to it, creating a white border around the image.
I understand I can turn off anti-aliasing for the entire document by unchecking Anti-Aliased Artwork in general preferences, but this also turns it off for the text.
Is it possible to turn anti-aliasing off for the rectangle only? Right now my only solution is to copy the image to photoshop and crop the image inside the border. (I tried creating a clipping mask in illustrator, but the the anti-aliased border moves to wherever the clipping mask is).
First, the anti-aliased artwork setting in preferences applies only to how Illustrator displays graphic on your artboard in Preview mode. It doesn't effect how graphics are exported in Save for Web (or any other method). Although theoretically, you could disable anti-aliasing and take a screenshot of your artboard in Illustrator and then open the screenshot in Photoshop... but that would only be a useful method when you're being paid by the hour.
Secondly, there is indeed a way to turn off anti-aliasing on a per-object basis. Select your object and choose Effect > Rasterize. In the Rasterize dialog box, set anti-aliasing to none. Since the effect is a live effect, the object is still completely editable as vector art, yet it appears as though it has been rasterized without anti-aliasing. And it will export just as you see it on your screen (of course, you'll want to always use Pixel Preview mode when working with web graphics).
This tip is also especially useful for when you want text NOT to be anti-aliased. At small point sizes, and with certain typefaces, anti-aliased text appears too blurry to read. Rather than have text that no one can read, turning off anti-aliasing for such type objects will result in text that will remain editable in Illustrator (due to the live effect), but that will appear legible when viewed on the web.
I have an image with a brown rectangle for the background, a lake on top of that, and then some text. I would like the rectangle to have anti-aliasing turned off and keep anti-aliasing turned on for the text. The issue is, when I post the rectangle up on a website with a brown background, the rectangle's border has some anti-aliasing to it, creating a white border around the image.
I understand I can turn off anti-aliasing for the entire document by unchecking Anti-Aliased Artwork in general preferences, but this also turns it off for the text.
Is it possible to turn anti-aliasing off for the rectangle only? Right now my only solution is to copy the image to photoshop and crop the image inside the border. (I tried creating a clipping mask in illustrator, but the the anti-aliased border moves to wherever the clipping mask is).
First, the anti-aliased artwork setting in preferences applies only to how Illustrator displays graphic on your artboard in Preview mode. It doesn't effect how graphics are exported in Save for Web (or any other method). Although theoretically, you could disable anti-aliasing and take a screenshot of your artboard in Illustrator and then open the screenshot in Photoshop... but that would only be a useful method when you're being paid by the hour.
Secondly, there is indeed a way to turn off anti-aliasing on a per-object basis. Select your object and choose Effect > Rasterize. In the Rasterize dialog box, set anti-aliasing to none. Since the effect is a live effect, the object is still completely editable as vector art, yet it appears as though it has been rasterized without anti-aliasing. And it will export just as you see it on your screen (of course, you'll want to always use Pixel Preview mode when working with web graphics).
This tip is also especially useful for when you want text NOT to be anti-aliased. At small point sizes, and with certain typefaces, anti-aliased text appears too blurry to read. Rather than have text that no one can read, turning off anti-aliasing for such type objects will result in text that will remain editable in Illustrator (due to the live effect), but that will appear legible when viewed on the web.
Subscribe to:
Posts (Atom)