Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have a better understanding of what a slice is inside of Illustrator, and that we also know that there are different types of slices, let's take a look at how we might apply that to an entire page. So I have this document open right now. It's called page_design4, and I have several elements here. For example, I have the logo on the upper left-hand corner here, I have some text here, some other text in the bottom, and maybe I also want to create some kind of a video clip that might go in the page over here. I want to show you how you can use a variety of different slice types inside of Illustrator to simulate what your entire page might look like.
So the first thing I am going to do here is I am actually going to define some slices, and I'm going to be using object- based slicing, because there is another advantage to creating object-based slices. We have spoken before that if you select an object inside of Illustrator and you go to the Object menu and choose Slice > Make, it's creating a slice based on the object that you have selected. However, it's not just using that object to create a slice; Illustrator also knows what type of object it is, and there are times, and we can take advantage of that by adding some intelligence into the document that we are creating.
So I am going to go ahead now and select the logo here. I'll select this text box right here. Let me select this text frame. It basically have a text frame that says Video Clip here inside of it. And maybe I'll choose these elements down here in the bottom, and now I am going to the Object menu and choose Slice, Make. Now I have several objects selected, but Illustrator now is going to go ahead and treat each of those as individual objects, and I now have a slice around this area. Illustrator, by the way pays, attention to groups, so yes, there are many vector objects in this group here, but it's creating one slice that overall group.
These are individual objects that are here as well. So let's take a look at the different slice types. If we take a look at the icons here, we can see that right now, by default, all these slices are being exported as images. But let's change some of the settings of the slices. When I select just the logo itself here. I would like to actually export this as an image, but maybe I want to make it so that when you click on it, it takes you back to the homepage of the web site. So I am going to go over here to the Object menu, I am going to choose Slice, and then I'll choose Slice Options. This brings up the Slice Options dialog box. Here is, by the way, where I can name the slice if wanted to give it a particular name, but for now, I'm not really worried about the name, but I do want to specify the URL, meaning I want this image to be clickable so when someone clicks on it, it directs them somewhere else.
And I can, for example, go to type in any address here. You just want to type in the whole address, so http://, so let's say, for example, going to lynda.com, on this one. You can also choose a target, meaning do you want it to open up in a new page, or you can choose over here what your message should be, meaning what displays in the browser status bar, and you can also have some alt text here as well. I am just going to go ahead now and click OK, because I've now saved the settings now into that slice. I am going to click on this box right here, this frame which has some text inside of it, and if I go back to the Object menu, choose Slice, and then Slice Options for this slice, I can see that where it says Slice Type, I can choose between No Image or HTML text.
Now because this is actual text, I could set it to HTML text. What's going to happen here is that Illustrator picks up the text itself. It tries to find the font size in a color that it can kind of match to it. Remember, it's not going to choose the exact same font, as that font may not be available on a web site. It kind of does its best to just do generic text. So instead of exporting the content of this slice as an image, I am actually going to get searchable and selectable text, as well. Again, this can really be something that would be driven externally by CSS, as far as the appearance of this, but maybe just want to see what this text is going to look like, just as regular, selectable text.
You can, of course, choose what the cell alignment is. Do you want that text to be aligned horizontally or vertically? And you can also choose a background color for this cell basically that exists inside of this table. One thing to note about here. If you click on the pop-up here, there are some settings. You can choose White or Black, or you can choose Other, which would open up your color picker, or you can choose Color Swatches to choose a specific color that already exist inside of your documents. But there is also a setting here called Eyedropper Color, which I find kind of interesting. The setting for this eyedropper color actually is being picked up from the Save for Web & Devices dialog box.
So whatever color you had last selected with the Eyedropper tool, in the Save for Web & Devices dialog box, actually shows up here, but there is really no way for you to actually change that color here. Even though you can access it, you have to first go to Save for Web, use the Eyedropper tool to sample a color, click OK, and then come back here and then make a change here. So it's here available, if you need it. I am going to set the background color to None for now. And now my click OK, and that's going to be exporting now as HTML. Now, here's the thing though. If I click on this frame over here, this is some text, I can now go back to the Object menu, and I can choose Slice, Slice Options, and I can choose the No Image option.
This means that this text right now will get exported, not as an image, but as something else. The question is, what is that something else? The beauty here is that I can type in any text that I want, and I can basically say that that text is HTML. So if I put in some kind of HTML code, if I have an image on a server somewhere, I could just type in "image source," put in the correct address for that, and then go to town. That actual image will load inside of that web page. If I have, let's say, a video clip that I want to play, I can do that also.
Unfortunately though, for some reason this No Image setting does not export correctly out of Illustrator. I can't understand why, but for some reason when you export the text out of Illustrator in this way, it's not being coded correctly in the HTML. So unfortunately, there's no really easy way to use this No Image setting inside of Illustrator. However, there is an interesting work around, which I want to show you. If you have, for some reason, some other kind of content, that's external from Illustrator, but you want to create a mock-up of your web page that has that content in it, you don't have to go crazy, even know it's HTML.
Let me show how to do that. I am going to click Cancel here, and I'm going to go to let's say, YouTube, for example. Say I want to create some kind of a clip. I want to pull something out of YouTube. So I'll go to YouTube here, and maybe I will do a search for lynda.com. Let's see if we can find a nice clip here from lynda.com. And well, here's a great video clip here from my friend Paul Trani. He has some great content over at the Online Training Library here at the lynda.com. And if I click on this, this is his Creating your First Web Site with Dreamweaver CS4. We don't need to play it right now, but what I can do is click on the Embed button here, and see what code I would need to put into my HTML to display that, or embed that within a web page.
I am just going to hit Command+C or Ctrl+C to copy that HTML text. I am now going to switch back over the Illustrator, and I am going to take my Type tool here and just simply come here, and instead of saying video clip, I am just going to select all my text. I am going to paste that text that I just copied from YouTube into this frame right now. So what I basically have here is all the necessary code, the HTML code, to embed that video clip into a web page. So now what I am going do is I am going to take this slice right now, select it, I am going to go to Object > Slice > Slice Options, and I would like to set this as an HTML text slice, but you can see over here that all of this text is now being loaded in here.
But I am going tell Illustrator that I want this text to be HTML. So basically now my HTML is going to be treated as code, not as words. So if I now click OK, watch what happen now if we launch Save for Web. Let's choose File. Let's go to Save for Web & Devices, kind of zoom out just a little bit so that we can see our page - in fact, let's just view the optimized version only. So you can see if I double-click on this slice, it's set to an image with the correct URL. If I double-click on the slice over here, I see it's set to an HTML text slice, but I'm not saying the text is HTML, meaning that I want the text to display as regular text.
And if I come down to this one though, if I double-click on it, I can see over here it's set to HTML text. And by the way, there is sometimes bug inside of Illustrator. You may need to come back here and just make sure that that text is HTML is checked again here. I then click OK. Now let's preview this in our web browser and see what happens. We can see now, if I kind of scroll down over here on this page, that the YouTube clip is being placed now inside of this page, even though I didn't design this YouTube clip, and I can actually play it, and it will actually play it right inside the browser, I simply took the code that's necessary to embed that inside of the page, I placed it as Text inside of Illustrator, but I instructed Illustrator to treat that slice as an HTML text slice.
And I also, by the way, told Illustrator that I want that text to be treated as HTML code. And if I click over here, you can see that that directs me to lynda.com, as I had asked it to do when I defined URL for that slice. So going back to Illustrator here, and let's cancel over here and come back to the document here, we see that we have a variety of different things that we can do with our slices inside of Illustrator. Granted, 9 times out of 10, you're probably just going to treat all of your slices as images inside of Illustrator. Or as we have been discussing before, we also just want to have these regions that we can kind of use to define divs later on in a product, for example, like Dreamweaver.
However, it's certainly possible, inside of Illustrator, to get a more sophisticated mock-up of your web design using these slice features.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65699 Viewers
61 Video lessons · 96451 Viewers
56 Video lessons · 110203 Viewers
82 Video lessons · 105087 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.