Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
In this movie we're going to be talking about slicing inside of Illustrator. Now, slicing in the traditional sense means breaking up a mockup into multiple pieces via HTML and CSS, or HTML and tables that can then be reassembled. In older times when we were working with designs inside of Photoshop or Illustrator, we would take multiple images in our document and we would slice them up into smaller pieces so that they would load faster when put back together inside of a browser.
The traditional way has sort of gone by the wayside because of the advent of things like CSS. So I use slicing now more as an informational tool rather than anything else. I use the Slice tool to define areas of content within my document so that the developer knows exactly where I need things broken down, and also it helps them define specific regions like CSS divs and things like that. Now on the file that I have open here onscreen I have several different examples of web banners that I'm working on here inside of Illustrator, and I want to define each one of these as its own separate slice so it can then be exported out individually.
The easy way to do this, especially if you're working with a square or rectangle piece of art, is to just select it, go to the Object menu, and go down and choose Slice, and choose Make, and it will automatically create a slice for you. I can also go here, select that one: Object > Slice > Make; select this: Object > Slice > Make; and then finally this one: Object > Slice > Make.
And so now I've created individual slices of each one of these if these had artwork inside of them or whatever that would be contained within that slice, and so anytime I go into the File > Save for Web dialog box now, I have these individual regions which I can then select and optimize individually with their own specific settings. So if I needed one to be a PNG or one to be a GIF or one to be a JPEG, I could do that individually for each piece of artwork. So not only does slicing allow me to define different content regions, it also allows me to define different optimization regions as well.
So by doing this, I can create individually optimized files that are then better suited for the overall design. From here you would just click Save and then save them out individually, or you can hit Cancel and cancel out. If you happened to have more than one slice out on your document, you can actually use the Slice tool or the Slice Selection tool to manipulate those. So the Slice Selection tool is located in the toolbox, right there, and so I could select this one, hold down Shift, and select the others. I could also select just a few slices.
I'll click away to deselect. Let's say I wanted the big graphic here and the banner ad. And I can go to the File menu and I can actually choose Save Selected Slices, and it's going to save out only those two slices, Images Only, in a format that I specify and once I click Save, I can go through that process and I can save those out individually. So using these slices is a great way to get individual control over an artboard that might have multiple pieces on top of it, and so I really enjoy slicing for that reason.
The traditional means of slicing, like I said, have kind of gone by the wayside, but it still has its place if you know how to use it properly.
Find answers to the most frequently asked questions about Illustrator for Web 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.