Using Scripts

Like Photoshop, Illustrator CC comes with a few basic scripts (File ➤ Scripts ➤ SaveDocsAsPDF or SaveDocsAsSVG. You can use these to save some file formats for the web. Refer to Figure 13-1.

These scripts allow you to quickly save a PDF or SVG file into a selected folder; however, there are no options to allow you to adjust settings, so I do not recommend this option if you need your files to have specific adjustments before exporting.

Actions to Speed up the File Conversion Process

Like Photoshop CC, the Actions panel is available in Illustrator CC. It comes with some default or prebuilt actions that you can use for files for the web, or you can create your own.

Actions Panel

If you look though some of default actions, you might encounter some prebuilt action time-savers, such as

• Save For Web GIF 64 Dithered

• Save For Web JPG Medium

• Save For Web PNG 24

  All of these take you to the File ➤ Export ➤ Save For the Web (Legacy) dialog box, where you can adjust your settings before saving. Refer to Figure 13-2.

Note

As with Photoshop CC, you can access the Actions panel menu to clear, reset, load, save or even replace actions. Actions that are not saved cannot be reloaded and will be lost from the list.

If you open one of the arrows beside the actions, you see the steps that were recorded. You can play them any time that you want to convert your file, as you did in Chapters 5 and 9. Refer to Figure 13-3.

Create a New Action

As you saw with Photoshop CC, you can create a new set of actions by clicking on the folder in the lower bar of the panel, as seen in Figure 13-4.

Since you don’t have an action to save an SVG file, let’s add that; name the set Save SVG File, as seen in Figure 13-5.

Then click OK.

I created the new set to keep the new action separate from my default actions.

While an AI file is open, click the Create New Action button. Save the action as Save SVG, as seen in Figure 13-6.

Alternatively, you can also move the action to another set. Give it a key function and give the action a color for better identification. For now, leave the settings as is, and click the circle Record icon, as seen in Figure 13-7.

You now notice that the little red Record button is on, and you can begin recording your actions as you move along. If at any time you wish to stop recording, click the square icon to the left. If you make a mistake in an action, you can use the Trash icon on the right to remove it. You can then resume by clicking the Record button and redoing the actions. Afterward, to test an action, click the triangle (play) to the right. Right now, nothing will happen until you do another action in Illustrator.

With your AI file open, you can choose File ➤ Export ➤ Export As and choose SVG as the file type, and click Export.

Then set the settings in the SVG options dialog box. Refer to Figure 13-8.

Click OK to save the file in a folder; those actions should be recorded. Refer to Figure 13-9.

Now click the Stop icon to stop the recording to complete the action and make sure that the Export As window (the toggle on and off dialog icon) opens, in case you need to adjust your settings during the action for different file. Refer to Figure 13-10.

Note

You can also insert stops if you want to record a message to remind you of a step. In the Actions menu, choose Insert Stop and enter a message, and then click OK. The stop is inserted into the action.

Open another AI or EPS file in Illustrator to test the action to see if it works. Do this by clicking the Play button.

While this is good for one image at a time, it would not make the process much faster if you have several images and then need to export another folder, since it goes to the same folder each time. To get around this, you need to create a batch.

Automate Batch Actions

As you saw in Photoshop, you can batch files. While the Actions panel is OK for a few images a day, what if you have over 20 images that need to be adjusted for a gallery or an e-commerce website?

The Batch option is not in the main menu. You need to use the Actions panel menu. Refer to Figure 13-2, where you see the Batch option at the bottom of the Actions panel’s menu.

With the new action set, select Choose Batch, as seen in Figure 13-11.

As with Photoshop CC, the Illustrator Batch feature allows you to choose a set of actions and the actions within the set. You can also choose a folder or data set as a source for where the file came from and a destination folder, if different from where the files will be saved or exported. Also, you can override these commands to be different than the actions. If you do not choose a different folder, you can choose to save and close from the Destination drop-down menu.

For now, leave both the source and destination options as a folder, as seen in Figure 13-11.

You can then make sure that the file will stop for errors if there is an error during the batch process. Refer to Figure 13-13.

Click OK to start the batch action.

You can save, export, and open each file’s settings, one at a time, and adjust the settings if required. As you can see, Illustrator actions are more simplified than Photoshop CC, but they can be just as efficient when working with the conversion of more than one image for the web.

Slicing Tools

As you saw in Chapters 4 and 5, when you save files for the web in Photoshop CC, you might save many photos or graphics that will appear somewhere in an HTML file on a solid background. However, they are times when you might want an image to appear in the background of one or more <div> tags or in a table. In Illustrator, you can use the same principles to slice up a background that can later be saved for the web.

If you wish to review some of the basic ways to slice, refer to Chapters 4 and 5. In Illustrator, you will look at where you can find similar features and compare them.

Slices are best suited to backgrounds that have been created using File ➤ New and the Web tab. Refer to Figure 13-14.

You can also create your own custom layout or create more than one artboard for different planned layout sizes. I’ve attached a slice example on how a large webpage could appear if you were slicing a selected area of a page. See slice_example_ill.ai and refer to Figure 13-15 for this part of the chapter.

Here you can lay out your background image or sections with guides and use the Slice (Shift+K) tool and Slice Selection tool found in the Tools panel to carve the page up. Refer to Figure 13-16.

Use the Slice and Slice Select Tools

Using guides, you can lay out where each slice will be and how large it is. In the Web workflow, the Slice tool, which is docked beside the Artboard tool, can marque around a section within the guides and create a user slice (see Figure 13-17) to the right in bright red or a layer-based slice in faded red. Depending on where you create a slice, more slices will be generated around it. The generated slices are known as auto slices and subslices (faded red) when they overlap, and they cannot be selected.

The Slice tool will allow you to create slices, whereas the Slice Selection tool allows you to move and size the slices. You can see user, or layer-based, slices and which layers they are on in the Layers panel (see Figure 13-18).

Like any user slice or layer-based slice, it can be moved and resized as you would a vector object.

Different icons and colors dictate what kind of slice it is.

• Slice lines : Define the boundary of the slice. Solid lines indicate that the slice is a user slice or layer-based sliced; lighter solid lines indicate that the slice is an auto slice.

• Slice colors : Differentiates user slices from auto slices. By default, user slices and layer-based slices have blue symbols, and auto slices have gray symbols and often a link icon when viewed in the Save for Web (Legacy) dialog box. Normally on the artboard, they appear in the default red color and not always with link icon while working on the artboard. The Save For Web (Legacy) dialog box uses color adjustments to dim unselected slices. These adjustments are for display purposes only and do not affect the color of the final image. By default, the color adjustment for auto slices is twice the amount of that for user slices. Refer to Figure 13-19.

• Slice numbers : Numbers are from left to right and top to bottom, beginning in the upper-left corner of the image. If you change the arrangement or the number of slices, every slice number is updated to reflect the new order.

Note

For further alterations to slice color, go to Edit ➤ Preferences ➤ Slices for Windows, and Illustrator ➤ Preferences ➤ Slices for macOS. You can alter the line color and hide/show the slice number. Click OK to confirm changes. Refer to Figure 13-20.

Object ➤ Slice Options

To work with slices to add, duplicate, combine, divide, or delete them, you need to go to Object ➤ Slice, as seen in Figure 13-21.

In this area, you can make or release a slice to its own sublayer. You can create a slice from guides or a selection when an object on the artboard is selected.

Note

The Create from Guides feature overrides all current slices and slice numbers with any new slices created based on the guides.

When a slice is selected with the slice select tool in the Tools panel, you can duplicate, combine, divide, or delete all slices. The Clip to Artboard feature forces the slices to stay within the artboard’s boundaries.

The Divide Slice dialog box allows you to divide slices vertically and horizontally, either by number or by pixel. Refer to Figure 13-22.

Align Slices

To align slices, Shift-select with the Slice Selection tool. You can then use the Align panel. Refer to Figure 13-23.

To change the stacking order of the slices in the Layers panel, either rearrange the layers or choose Object ➤ Arrange, as seen in Figure 13-24.

You can send the slices forward or backward in sublayer order.

Slice Options

To get to the slice options, while the slices is selected, you can either go to Object ➤ Slice ➤ Slice Options. Or, while in the Save for Web(Legacy) dialog box, double-click the slice with the Slice Selection tool. Refer to Figures 13-25 and 13-26.

Image

Image is the Default Slice Type in Slice Options. In Slice Type, the Image option is a user slice for images. You can see its icon is a picture. When Auto (gray) there is a link icon. Auto Slices cannot be edited or selected while working on the artboard. You can only edit auto slices by double-clicking on them with the slice select tool if you are in the Save For Web (Legacy) dialog box. Refer to Figure 13-26.

In Slice Type, select Image if you want the slice area to be an image file in the resulting webpage. If you want the image to have an HTML link, enter a URL and target in the drop-down menu. Like Photoshop CC, you have the options of blank, self, parent, and top. For more information on those, refer to Chapter 5.

You can also specify that a message appear in the browser’s status area when the mouse is positioned over the image, alternative text (alt) that appears when the image is not visible, and a background color for the table cell or <div> tag.

Background color options include None, Matte, Black, and White. Eyedropper Color and Other let you choose custom colors from the color picker. Refer to Figure 13-27.

No Image

A slice with No Image is excluded from the images that are exported. The No Image icon appears as a crossed-out box. Refer to Figure 13-28.

Select No Image if you want the slice area to contain HTML text and a background color in the resulting webpage. Enter the text you want in the Text Displayed in Cell text box, and format the text using standard HTML tags.

Take care not to enter more text than can be displayed in the slice area. If you enter too much text, it will extend into neighboring slices and affect the layout of your webpage. However, because you cannot see the text on the artboard, this will not be apparent until you view the webpage in a browser or in Dreamweaver CC.

Set the Horiz and Vert options to change the alignment of text in the table cell. Later, you can use CSS in Dreamweaver to alter the layout and change the table to <div> tags.

HTML Text

HTML Text is available only when you created the slice by selecting a text object box and chose Object ➤ Slice ➤ Make. Refer to Figure 13-29.

The Illustrator text is converted to HTML text with basic formatting attributes in the resulting webpage. To edit the text, update the text in your artwork on the artboard. Set the Horiz and Vert options to change the alignment of text in the table cell. You can also select a background color for the table cell. Later, you can use CSS in Dreamweaver to alter the layout and change the table to <div> tags.

Tip

To edit the text for HTML Text slices in the Slice Options dialog box, change the slice type to No Image. This breaks the link with the text object on the artboard. To ignore text formatting, you can enter <unformatted> as the first word in the text object.

Lock Slices

To lock slices, choose View ➤ Lock Slices. Alternatively using the layers panel you can lock or unlock the slice layer or sublayers. Only user slices are visible auto slices are hidden. Refer to Figure 13-30.

Save Your Slices for the Web

As with Photoshop CC, to save slices, you go to File ➤ Export ➤ Save for Web (Legacy) and use the Slice Select tool (K). Use the Toggle Slice Visibility tool (Q) to select the slices and then adjust their settings in the preview on the right. Refer to Figure 13-31 for the tools.

The background slice default is usually a GIF, but you can change each slice to a PNG or a JPEG file.

At the bottom of the Preset panel is the option to export the slices, as seen in Figure 13-32.

You can choose to export all the slices, all the user slices, or just the slices you have selected.

You can further optimize the size of the slices for the web in the Preset drop-down menu. Refer to Figure 13-33.

Remember to select more than one slice, use Shift+mouse-click.

Tip

Another quick way to save the slices if you are not in the Save for Web (Legacy) dialog box as GIF only is from the main menu choose File ➤ Save Selected Slices (GIF). However unlike save for web, this option does not allow you to adjust your slice settings or set other file formats for the slices like JPEG or PNG. Refer to Figure 13-34.

Note

When you click Save in the Save for Web (Legacy) dialog box (see Figure 13-35), you may discover that you can only save the GIF images and not the HTML, as you can in Photoshop CC. I’m not sure if this was something the Illustrator designers forgot to update, but do not despair. You can copy this code if you press the Preview button in the lower left. This opens the browser. The code for your slices is below the images. You can then copy this information into your HTML file and edit it in Dreamweaver CC.

The following is an example of some of the code.

<html>

<head>

<title>testing_page</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div style="position:absolute; left:0px; top:0px; width:1996px; height:1482px;">

    <div style="background-image:url(slice_example_ill_01.gif); position:absolute; left:0px; top:0px; width:1996px; height:459px;" title="">

<!--more code here -->

    </div>

</body>

</html>

The code in your file will likely be different, but at least this is a decent work-around should you require HTML and CSS as a starting point for your site design.

Creating Image Maps

You can also create a hotspot or image map within a slice using the Attributes panel. Refer to my image_map example.ai file.

Image map links can take on other shapes, such as a polygon, while a slice can only have a rectangular URL link. Refer to Figure 13-36.

You can enter a relative or full URL into the hotspot image map area. The Globe icon allows you to browse for the link, but beware that if the slice you are on already contains a URL in the Slice options, this could cause a conflict. Refer to Figure 13-37.

Complex objects do not produce image maps in Illustrator, so it is better to use Dreamweaver to draw complex shapes, as you will see in Part 6.

Summary

In this chapter, you reviewed scripts, actions, batching actions, slicing tools, and image maps. You also saw how to retrieve important CSS and HTML information for your slices that you could later use in Dreamweaver to build your website.

Although you can’t create animations or videos in Illustrator, in the next chapter, you learn that you can use some of its tools to create objects and layouts that could be used as frames in animations or for video. In addition, you discover a SVG file JavaScript interactivity secret.