Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Applying settings to slices

From: Illustrator CS5 for Web and Interactive Design

Video: Applying settings to slices

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.

Applying settings to slices

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.

Show transcript

This video is part of

Image for Illustrator CS5 for Web and Interactive Design
Illustrator CS5 for Web and Interactive Design

74 video lessons · 24236 viewers

Mordy Golding
Author

 
Expand all | Collapse all
  1. 6m 56s
    1. Welcome
      1m 33s
    2. Choosing Illustrator for web and interactive design
      2m 54s
    3. Illustrator and the web design workflow
      2m 7s
    4. Using the exercise files
      22s
  2. 40m 9s
    1. Pixel dimension vs. resolution
      4m 14s
    2. Pixel Preview mode and anti-aliasing
      5m 39s
    3. Taking charge of anti-aliasing
      5m 27s
    4. Choosing the right color management settings
      7m 25s
    5. Setting up important preferences
      6m 22s
    6. Setting up a workspace optimized for web design
      11m 2s
  3. 54m 5s
    1. Using the Web document profile
      3m 39s
    2. Creating custom document profiles
      9m 38s
    3. Using Illustrator's free web templates
      2m 33s
    4. Creating a sitemap or wireframe
      2m 50s
    5. Setting up an entire web site
      9m 33s
    6. Setting up a grid
      10m 37s
    7. Setting up an online ad campaign
      8m 13s
    8. Setting up icons for iOS
      2m 24s
    9. Setting up mobile content with Adobe Device Central
      4m 38s
  4. 32m 22s
    1. Understanding web-safe colors
      11m 50s
    2. Limiting the Color Guide to web-safe colors
      4m 53s
    3. Using Recolor Art to convert art to web-safe colors
      4m 54s
    4. Getting color inspiration from Adobe Kuler
      6m 48s
    5. Using Recolor Artwork to modify colors across a site
      3m 57s
  5. 56m 54s
    1. Using the Save for Web & Devices feature
      6m 44s
    2. Understanding the GIF file format and its settings
      10m 20s
    3. Understanding the JPEG file format and its settings
      7m 39s
    4. Understanding the PNG file format and its settings
      3m 21s
    5. Understanding the WBMP file format and its settings
      1m 18s
    6. Understanding the SWF file format and its settings
      4m 13s
    7. Understanding the SVG file format and its settings
      3m 41s
    8. Adjusting the dimensions of a graphic
      4m 46s
    9. Optimizing files to a specific file size
      4m 5s
    10. Modifying Save for Web & Devices output settings
      6m 51s
    11. Previewing content in Adobe Device Central
      3m 56s
  6. 56m 6s
    1. Setting point type in Illustrator
      4m 11s
    2. Setting area type in Illustrator
      5m 20s
    3. Formatting text quickly with paragraph styles
      14m 39s
    4. Overriding formatting with character styles
      3m 2s
    5. Controlling text anti-aliasing
      4m 50s
    6. Simulating the CSS box model
      11m 14s
    7. Adding cool reflections to text and graphics
      8m 26s
    8. Applying settings quickly with Graphic Styles
      4m 24s
  7. 35m 56s
    1. Understanding the concept of slicing
      3m 22s
    2. Creating slices manually
      4m 26s
    3. Creating slices from guides
      2m 45s
    4. Creating slices from objects
      7m 33s
    5. Understanding the different slice types
      4m 20s
    6. Applying settings to slices
      9m 20s
    7. Creating hotspots with image maps
      4m 10s
  8. 23m 35s
    1. Exporting static SWF files from Illustrator
      3m 35s
    2. Animated SWF: Converting Illustrator layers to SWF frames
      4m 3s
    3. Animated SWF: Using blends to define motion
      8m 35s
    4. Animated SWF: Adding static artwork to an animation
      3m 24s
    5. Animated SWF: Controlling time within an animation
      3m 58s
  9. 17m 13s
    1. Preserving slices and structure with PSD export
      6m 10s
    2. Working with Photoshop Smart Objects
      4m 35s
    3. Sharing color swatches between Illustrator and Photoshop
      2m 52s
    4. Generating an animated GIF file with Photoshop
      3m 36s
  10. 7m 28s
    1. Exporting HTML from Illustrator for use in Dreamweaver
      3m 31s
    2. Exporting CSS and DIVs from an Illustrator layout
      3m 57s
  11. 12m 37s
    1. Moving art between Illustrator and Fireworks
      6m 25s
    2. Using dynamic shapes from Fireworks
      3m 48s
    3. Sharing color swatches between Illustrator and Fireworks
      2m 24s
  12. 16m 7s
    1. Building files for use in Flash Catalyst
      4m 28s
    2. Creating a new Flash Catalyst project from an Illustrator file
      3m 40s
    3. Copying and pasting artwork between Illustrator and Flash Catalyst
      2m 4s
    4. Roundtrip editing between Illustrator and Flash Catalyst
      3m 36s
    5. Creating Flex skins for use in Flash Builder
      2m 19s
  13. 19m 48s
    1. Understanding symbols: The lifeblood of Flash
      4m 58s
    2. Symbols: Understanding 9-slice scaling
      4m 18s
    3. Setting text that will be used in Flash Professional
      3m 5s
    4. Moving artwork between Illustrator and Flash Professional
      7m 27s
  14. 1m 6s
    1. Goodbye
      1m 6s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Illustrator CS5 for Web and Interactive Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.