Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
In the world of web design, there is a concept called slicing, and in reality, it's a pretty old concept. It came from basically trying to solve a particular problem where you had one overall page and you wanted to kind of divide that page up into different sections. In truth, the concept of slicing really kind of came into play when you had large images, and rather than try to display a single large image within a web page, you would slice up that image into parts or pieces. If you imagine, for example, a homepage of a web site, you may have certain areas like that you can click on to go to certain areas.
Sometimes that web page design may appear as if it's one unified image, but really they are sliced up into individual pieces. The way those are assembled in a web page is via HTML, and using something called tables. So basically if I take a look at this grid, and we had spoken about grids earlier on in this training, we thought about taking an entire page and kind of breaking it down into these different elements. Well, this can be seen as a table, and these can be cells within that table. This would have maybe several rows and several columns, for example.
So these can kind of be put together into what might appear as one unified design. However, nowadays the word "slicing" seems a little bit old school, because a lot of the design now that's used inside of HTML and CSS talks about the use of something called divs, or divisions. It's basically the same concept, though. It's taking your entire web page, and breaking it down in these individual sections, or divs. The only difference is that instead of assembling these via an HTML table, they are all assembled with CSS, which can be far more flexible, and offer many more options.
So I'll be honest with you, I don't really use slicing inside of Illustrator the way that maybe was originally intended: to slice up one large image into several different chunks or pieces; instead, I use slices to basically come up with these divisions, or basic areas inside of my design that I know I'm going to be doing something with. One of most beautiful things about working with slices inside of Illustrator is that all you're doing is you're defining a region. You're not really specifying, yet, what you're going to be doing with that region, but you're creating these areas that you can then make use of later on in your workflow.
In the example of an entire web page, like we have right over here, I can be using slices to help define what are eventually going to be the divs inside of the CSS layout. Likewise, if I take a look at this document called explore_ads, I had here several advertisements, or ad banners that I maybe working on, just random pieces of art that may need to be distributed across an entire web site. By creating slices, I am defining these regions that I know I'm going to need to export. Now, as we'll see, I have a variety of different ways to export those slices, but basically these are regions that I'm defining.
One of the most beautiful things about Illustrator is that there are so many ways to define these slices as well. So throughout this chapter, we're going to learn all about slices, setting them up so that we're basically defining these divisions or areas inside of our design that we're going to use for exporting artwork, or just basically regions or areas to work with. We'll also get a better understanding of exactly what a slice is inside of Illustrator, and how we might take most advantage of what might seem like an ancient feature.
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.