Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As I stated in the previous movie, I firmly believe that slicing is more of an informational tool more so than anything these days, because it allows me to divide my designs up into specified areas that I can then tell the developer, okay, this is a div for the content or this is an image or whatever I might be trying to say. This is the great way to divide a large mockup into individual pieces which are going to be exported out individually or simply used as a roadmap for CSS and HTML development.
In this movie I'm going to be exploring how I actually go about slicing a mockup, and how you can also utilize something called Slice options to refine your slices even more after the fact. So the first thing I'm going to do is grab the Slice tool, and you can grab that by pressing Shift and the letter K on your keyboard or by clicking it right here in the Tools panel. And the first thing I'm going to do is just come out and draw a slice along the top of my design, like this. And you can always refine your slices later on after you draw them, or if you're not happy with that, you can just Edit > Undo New Slice. And the easiest way to create a slice is just to select an object that encompasses the area you want to slice and then choose Object > Slice > Make.
And so now I've created a slice of that entire region up there at the top. If I go now to the Object menu and go down to Slice, I can also define something called Slice Options. Inside of the Slice Options I am able to tell it what type of slice it is. I can say it's No Image or an Image, or in some cases I could say HTML text. We'll get into that in just a moment. So now if I choose to name this-- I'll just call this header-- I could give it a URL if I needed to target or be clickable, et cetera, I'll say Background, None, and from here I'll hit OK.
Now I'll select this, Object > Slice, and I'll choose Make. That slices that up. Object > Slice > Slice Options. And in this case I'll choose HTML Text. Notice what happens here. It gives me some CSS styling right here. The font color is equal to, and then it also gives me all of the text. This means if I were to export this out as an HTML web page, this would actually be selectable text, so you can control that from within then Slice Options. So you can actually say this text is HTML, and hit OK, and there you go.
And so you could take the time to break up your entire document into individual pieces and then use those as definitions for whomever is coding this in HTML and CSS. They could even copy the text that you export out as well. Now a little bit later on in this course when you go into the Integrating with Other Apps chapter you will be able to see how you can actually get working HTML out of Adobe Illustrator, but for now this is just the setup to that workaround, which I'll show you a little bit later on. As you continue to develop your mockups, you might want to think about using slicing as a way of defining these specified content areas so that either you or your developer has a roadmap to follow going forward.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 50925 Viewers
117 Video lessons · 38646 Viewers
113 Video lessons · 81564 Viewers
65 Video lessons · 11573 Viewers
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.
Your file was successfully uploaded.