Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
As we have learned, we can apply certain settings to slices inside of Illustrator. One of those settings, the ability to assign a URL to that slice, is probably one of the most important ones. By assigning URL to a slice, you are basically enabling a user to click on a particular area of your page and be directed to a certain location. However, there may be times when you want to be able to click on a specific area within a slice. In the world of pixel based web graphics, the ability to click on a certain area or a hotspot region of a graphic is referred to as an image map.
Basically, when Illustrator generates the HTML table with all the slices inside of it, it also includes the file that has coordinates and those coordinates instruct the web browser so that when a user clicks on a certain area of a slice or an image, the user is directed towards that location. Let's see how we do this inside of Illustrator. For example, maybe I want make it so that when I click just on the Groundswell logo itself; I am directed to their homepage. So what I will do is I will assign an image map to that location. Now it's important to know that, inside of Illustrator, you cannot assign an image map to a group. You can only assign to a single object. So what I will do is I will try to find the largest object in this group which is this background right here. The easiest way to do that is to use a Direct Selection tool inside of Illustrator and just click on one of the largest objects that you have there.
By looking at the Appearance panel, I see I just have a single path targeted. Now I will open up the Attributes panel and for image map, I will choose Polygon. Now in reality, there are two types of image map that exist inside of Illustrator. If your object is rectangular in shape, you can choose the Rectangle option, however, for any other shapes, choose the Polygon option. For example, in this graphic right here, if I would choose Rectangle, even if I were to click on let's say this area right here, that would still be treated as a hotspot. By choosing Polygon, I am ensuring that the web browser will only allow the users to click on that particular region inside the boundaries of the shape.
Once I have defined that area as an image map, I will now specify URL for where I want the user to go. I will type in an address and I will use the full address here, http://www.groundswell. com and you notice there is a little arrow here on the right side. When I click on that, all the other URLs that I have specified already appear on this list. That way I don't have to keep typing them each one time I want to add another image map. Let's apply one more, I come over here to this side of the graphic and I will, just again, use the Direct Selection tool to click on the outline of this Hawaii Surf logo. Once again, I will specify Polygon as my image map and this time here, I will choose lynda.com.
Now let's see if these image maps work. To do so, I will use the Save for Web & Devices feature. I go to the File menu, I will choose Save for Web & Devices and one of the great things about Save for Web & Devices is that not only I can see my artwork here inside of the window, but I can also come on this button over here on the bottom where it says Preview in Default Browser. By click on that option right now, we will actually load that graphic into my web browser. Now for this particular example, I did not create any slices, so we got exported with my entire web layout as one overall JPEG image. But as I master with this logo here, you will see that my cursor changes to a hand, and if you look at the bottom of my screen, it says I will be directed to groundswell.com.
Likewise, if I move my cursor over this Hawaii Surf logo, clicking on it will direct me to lynda.com web page. I close my browser window, click on the Cancel button here inside of Save for Web & Devices and return back to my document. What's great about the image map feature is that it really, sits along both sides of both the pixel based and the vector-based part of web design. Meaning that if I export my graphic as a JPEG or a GIF file, my image map will work. Likewise, if I export my file as a SWF file, Illustrator writes the necessary ActionScript information into that SWF file so that again that piece of artwork now turns into a button.
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.