Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Mordy Golding demonstrates how to be more productive, efficient, and creative by taking advantage of Adobe Illustrator to create pixel-perfect web graphics and interactive Flash content. Illustrator CS4 for the Web investigates the pros and cons of pixel- and vector-based web graphics, demonstrates efficient workflows, and explores the creative options available in Illustrator. Mordy also covers design techniques, such as creating typography that works well on screen, adding reflections, and making Flash animations. He discusses new Illustrator CS4 features, including using multiple artboards, bringing art into Dreamweaver, and utilizing Flash Catalyst. Exercise files accompany the course.
For the most part, we have been talking about slices as it applies to an overall webpage, meaning you design an entire webpage layout and now you want to split that up into chunks or pieces, which in reality, when you think about traditional web design or where most designers come from, for example, using products like Photoshop or Fireworks, they actually create entire webpage layouts and then slice them up in that way. However, one of the real benefits of using Illustrator is that it's very easy to create web graphics that are individual objects, maybe they are offered as parts of a page or maybe it is creating either banners or little elements that belong within an overall page. The challenge in that case is how do you export those easily. Now one of the things that we have explored to this particular point is something called multiple artboards.
Yes, Illustrator does have the ability to contain multiple artboards and each of those artboards can also be of different sizes. So in theory, I could go ahead and set up a document. Let's say I need a three of these size web banners and three of these size web banners, I could, in theory, create a document that has six artboards, three of this size and three of this size. However, because of the nature of the way that artboards work inside of Illustrator, I can only have one artboard that is the active artboard at any one time. That means if I want to now export each of the banners that we need to click on one of them, go to the Export method, then go ahead and click on another one, export that one, so on and so forth, one after the other.
Now maybe an example here where I only have six banners in total that may not seem like such a large task. However, there might be times where you need to generate maybe tens or hundreds of different types of web graphics and I think it's where these types of examples where you will derive the most benefit from working with slices inside of Illustrator. So let's take a look at what I have done here. I am going to go with my Layers panel and just hide Layer 1. What I have created here is simply six different objects and I used the same method that I did before when I created my grid. I just created rectangles. Remember the rectangles had no strokes on them so that in short the anti-aliasing would always be perfect and snap to a grid. I then took those objects and turned them into object-based slices.
In fact, if I go here and I click on one of these objects, you will see that it's a regular black filled object. But what I have done for this particular object here and in fact all the objects on this layer is that you will notice that over here on the Slices layer, I set the Opacity level for the entire layer to 0. By clicking on this little target circle right here, I see that the Opacity for that layer is set to 0. So all the objects on that layer exist and they are being used to define slices, but they are invisible. Let me zoom in really closer, so you can see that all these objects also snap perfectly to the grid. And here is the most important part of this. Let me zoom out just a little bit here so you can see the objects that I have created. Notice that I have only defined these six slices, so these are user slices, slice number 3, 5, 9, 10, 13 and 14, the others are auto slices.
As we will soon see, when I am using the Save for Web & Devices feature, I have the ability to tell Illustrator, you know what, only export the user slices in my document but don't export any of the auto slices. So really these all fall by the wayside and what I am left with is just the slices that I need. More importantly, I will be able to export all of my slices or more accurately in this particular example, all of my web banners with one action. Let's see how that works. Let me turn my Layer 1 back on. I will also turn on my Pixel Preview so that I can see exactly what my artwork looks like when it gets rasterized. I can zoom it over here to make sure that everything looks okay. In this example, I have actually made sure that my stroke is aligned to the inside of this rounded rectangle. That way I don't get any unnecessary artifacts in the anti-aliasing.
Now I will go to the File menu here and I will choose Save for Web & Devices. Now I would like to show you one of the things that I love best about using this method. I use my Regular Slice Select tool here to double-click on this first banner. Notice that I have already given it a name. It's called gs, for Groundswell, large_melbourne. I will Cancel, let me click on this one here and see I have named this one as well. In fact, I have named all of these slices. If I were using multiple artboards to do this exact same method, I would have to name in my artwork each time that I export each individual banner.
Here, every time I update my artwork, I simply need to do one Export function; all the six different banners already have the names that I want for them and to get exported with just one click of a mouse. Let me show you how that's done. I will click Cancel here and I will click on the Save button. For Format, I want to make sure that I am only exporting the images; I don't need any HTML, because the table is meaningless to me. I just want the images themselves or the banners, in this case. I will put them on the Desktop of my computer here and rather than export all slices, I will choose to only export all user slices.
Now when I click Save, take a look at this. Let's go to my Desktop here for a second and you will see that in my Images folder, it now has all the banners that I have created. So when you apply all the knowledge that we have learned when working with slices, we see that multiple artboards may be great, but for many things inside of Illustrator, slices really has no match at all. So if you are creating individual web graphics, I do hope that you take a closer look at slices and how they might help you in your work.
There are currently no FAQs about Illustrator CS4 for the Web.
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.