Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
As you create slices inside of Illustrator, you may have noticed this grid of like little red highlights that identify the slices themselves, and in fact, if you take a close look at them, you'll see that there are sometimes different icons there, different numbers, and sometimes they are even slightly different shades of color. Well, let's take a moment understand the different types of slices that Illustrator creates. In fact, as we'll find out, there are several different types, and they have different purposes and meanings. Now remember, overall, a slice itself is simply a region or an area on your page that gets exported differently than other slices.
So it's just a way for you to identify certain a part of a page that you can have a certain export settings applied to it. Now many times slices of themselves are all exported as pixel-based images. In fact, that's the default setting inside of Illustrator. However, there are really three different kinds of slices that can exist inside of Illustrator. As you can see over here, there is something called the no image slice, an image slice, and an HTML text slice. They are identified by these icons that appear after the slice number.
Let's talk about what the difference is between these different types of slices. Now as we said, the most common one is something called the image slice. That means that the file that is exported for that particular slice is actually going to be a pixel-based image. However, you have the option to tell a slice to export as a no image slice. That means that the image itself will not be exported as a slice. However, that cell in the table will exist, and you have the ability to actually type in HTML code to run within that slice.
So as an example, if you happen to know a link to maybe a movie clip, you can type in that link into this no image slice, and that means when this page actually plays in a web browser, instead of there being an image there, the video will play in that one spot. If we come over here to HTML text slice, that is a slice that actually doesn't get exported as an image, but any type that you actually have, any text that you set inside of Illustrator, that text gets converted to editable HTML text within the web browser.
So that means that that region itself, or that cell on the table, or that div in the CSS layout contains selectable text. So those are the three kinds of slice that exist inside of Illustrator. But as you can see over here, some of the slice numbers appear in a dark color, but some of them are kind of faded, or grayed out. Well, here's an important thing to know about Illustrator. When you create a slice using the Slice tool or using the Create Slices from Guide Setting, or creating an object- based slice, since you defined that slice, we refer to that as a user-based slice or a user slice.
All user slices display in a nice bright color. However, sometimes, as we discussed, Illustrator needs to create other slices in order to fill out the table in some kind of a rectangular shape. In other words, Illustrator needs to create the cells to fill out the entire artboard. Those slices that Illustrator creates are called auto slices, and they are identified by a grayed out color, meaning those aren't slices that you created - those are slices that Illustrator created. Now why is that important? Because when I go ahead and I export artwork out of the Save for Web & Devices feature, I have the ability to choose to export all user slices, or I can choose export all slices.
If I only choose to export the user slices, then any auto slice that exists in that document are completely ignored. If you go back to the example of having maybe several pieces of art, like ad banners or just random web art inside of an overall document, I may have certain user slices that I define, but Illustrator is going to create a whole bunch of auto slices to take up all extra space on that artboard. I don't need that extra space exported at all. All I want to export is just the area that I am defining. So because those are user slices, in those cases, I can simply choose, in the Save for Web & Devices dialog box, to only export user slices.
So now you have a clear understanding of the different types of slices that exist inside of Illustrator, and you have a much better idea on what all these little red markings mean when you start defining slices inside of your document.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.