Exporting Images for an Instructional Webpage

The images that you are going to export for this project are in the domes.ai file. In Part 6, you are going to create a how-to page for the Hot Glass Tango website on creating a half-dome glass paperweight. When you open the file, you see the step-by-step illustrations on their own layers. Refer to Figure 16-1.

If you are designing a multistep illustration project, you may find this an effective way to keep all of your illustrations organized in one location rather than in multiple files. As I completed drawing each step, I locked the layer and turned off the visibility. The only layer that is visible is step 12, as seen in Figure 16-1 and Figure 16-2.

Now I want to export each layer as a transparent GIF image.

The only way that you can create a GIF image in Illustrator is to use File ➤ Export ➤ Save for Web (Legacy). If you are going to create PNG or JPG files, use the Asset Export panel, as discussed in Chapter 12.

At this point, you could choose File ➤ Export ➤ Save for Web (Legacy) or instead use the prebuilt action found in the Actions panel (see Chapter 13) called Save For Web GIF 64 Dither. This might be too low res, so let’s create a similar action, but with a slightly different setting. Refer to Figure 16-3.

Create a Custom Action

In your Actions panel, create a new action set called Save GIF Files, as seen in Figure 16-4.

Click OK to confirm, and it is added to the Actions panel.

In the folder set you just created, create a new action called GIF Selective Diffusion 256. Refer to Figure 16-5.

This should allow you to keep all the gradients looking clean and crisp and allow for transparency. This is a good option should you want to change the background in your website to another color later and not have a white box around your illustrations.

Click Record to start the action.

While recording in the Actions panel, go to File ➤ Export ➤ Save for Web. Refer to Figure 16-6.

Set your settings as shown in Figure 16-7.

• GIF Lossy: 0

• Selective Colors: 256

• Diffusion Dither: 100%

• Check: Transparency Matte: White

• No Transparency Dither

• Uncheck: Interlaced

• Web Snap: 0%

• Leave Width and Height at the default

• Choose Art Optimized

• Clip to Artboard: uncheck

When done, save your first image (step12.gif) to your website’s Images folder or whatever folder you choose. Refer to Figure 16-8.

Once the Save for Web (Legacy) dialog box closes, click the Stop button on your Actions panel to stop the action. Refer to Figure 16-9.

You have now completed the action. Make sure that the Toggle dialog icon is on in the action so that the window will open.

Now you can go back to the Layers panel; this time, make step 11 visible so that you can export it next. Make sure to turn off the step 12 layer visibility because you do not need to export it again. Refer to Figure 16-10.

With the new layer selected, return to your Actions panel and play the GIF Selective Diffusion 256 action again.

This time, when the Save for Web (Legacy) dialog box opens, it sizes the GIF width and height to the new illustration. Refer to Figure 16-11.

Click the Save button and save step11.gif in your folder.

Repeat these steps for the remaining 10 images. You should have 12 images in total that you can use for your website.

You can close the AI file without saving changes. You have completed the first project.

Note

In Part 6, examples these gif files may have slightly different names, but you can always rename the file that you create in this lesson to match mine later.

Next, you look at how to create an informational map using SVG.

Exporting an SVG File

In Chapter 14, you looked at SVG interactivity to create a vase that changed color when your mouse hovered over it, and an alert message appeared when the vase was clicked. In Chapter 13, you took a brief look at image maps and saw how a shape can open a link. With SVG interactivity, you can create an informational image map so that when you hover over part of an illustration or shape, a message appears. Look at the map_test.ai file in the SVG folder. Then open the map_test.svg file in your browser and see how it interacts. Refer to Figure 16-12.

When you hover over each colored shape of glass, you discover what that color is composed of. This technique could be very useful for a project where you want information in distinct parts of a map to guide people, or parts of an organ, like an ear, or to dissect a flower. There are many possibilities.

In map_test.ai, I created 14 sublayers and named them. Seven of them are the broken glass shapes and the other seven are the grouped text messages that will be linked to the glass shapes; one for each. Refer to the Layers panel and Figures 16-13 and 16-14.

Figure 16-14 looks rather cluttered on the artboard, but we will change that shortly.

I gave my layers and sublayers one-word names, and I made sure that I knew which text link went with which colored glass piece. When you choose longer names, you can write them with letters and numbers (e.g., object1, object2) or with what scripters call camel code (e.g., redLink, greenLink), in which one letter is capitalized so that you see a break in the word. Do not use dashes (-), underscores ( _ ), or spaces in your names because this causes the SVG interactivity links to fail.

Once you have reviewed the file, leave the layers as you see them in Figure 16-13. Next, choose File ➤ Save As or File ➤ Save A Copy (if you want the original file to remain open while working on the SVG file) and save as an SVG. Save your file as map_test2.svg so that you do not overwrite my example. Refer to Figure 16-15.

Now choose the SVG Options settings shown in Figure 16-16.

Leave the other two setting unchecked.

When done, click OK to save your file.

If the newly created SVG file map_test.svg is not in Illustrator, choose File ➤ Open and locate the file.

You can close my original AI file without saving changes.

In the SVG file, look again at the Layers panel. It should look the same as the AI file. Refer to Figure 16-17.

Now turn off all the visibility eyes for the seven sublayers with the word link so that the information boxes are no longer visible, as seen in Figure 16-18. Now the artboard is less cluttered. Keep the main layer’s (Layer 1) eye on.

Make sure to save the SVG file at this point.

In the Layers panel, select the layer called Clear and click the circle target on the right so that you know this object is fully selected. Refer to Figure 16-19.

Now go to the SVG Interactivity panel.

While the target is selected, choose Event: onmouseover from the drop-down menu and enter the following code into the JavaScript box, as seen in Figure 16-20.

document.getElementById("clearLink").style.display="block";

Click in the lower box area to confirm the code and then choose Event: onmouseout and enter the following code into the JavaScript area, as seen in Figure 16-21.

document.getElementById("clearLink").style.display="none";

Click in the lower gray area to confirm it into the SVG Interactivity panel, and save your SVG file.

When you changed the object’s color to show or hide, you set the "clearLink" text to show when the mouse hovers over the "block" object. To hide this, it is set "none" when the mouse moves away from the object.

Open this file in your browser, and you see that when you hover over or move away from the clear glass shape, the text shows and hides. Refer to Figure 16-22.

You now want to create interactivity for all the other shapes. If you get confused, you can refer to my map_test.svg file. However, make sure that, for each object, you always select the layer and the target for that layer so that the entire object is selected. Refer to Figure 16-23.

Only then should you start adding your JavaScript to the SVG Interactivity panel.

Once you have entered the code, make sure to save your file and test it in the browser. You may have to go back to Illustrator to make changes and save, and then refresh the browser.

As you can see, you don’t have to know a lot of JavaScript to find creative ways to work with Illustrator’s SVG Interactivity panel.

File ➤ Close any open files and then File ➤ Exit Illustrator. This concludes our Illustrator projects for Part 3.

Summary

In this chapter, you reviewed how to create images for a webpage and work with an interactive informational map from an SVG file. This chapter concludes your study of Illustrator. Make sure to review any areas of Part 3 that you don’t understand so that you feel comfortable working with your own graphics in Illustrator.

In Part 4, you journey to the next junction point in the software maze: Adobe Animate CC. You’ll discover how it creates animations, movies, and HTML5 canvases.