Using HTML5 Pack for ADOBE ILLUSTRATOR CS5

Using HTML5 Pack for ADOBE ILLUSTRATOR CS5

ii Contents Chapter 1: Parameterized SVG.....................................................................................................1 Multi-screen SVG.......................................................................................................4 Mark object as canvas in SVG...........................................................................................5 Export named character styles as CSS...................................................................................6 Export artwork appearances as CSS.....................................................................................6 Include Selected Graphic Style as CSS in SVG............................................................................8

1 Chapter 1: Using HTML5 Pack for Adobe Illustrator CS5 HTML5 seeks to improve the experiences of web designers and developers who have, over the years, had to rely on lessthan-optimal methods for producing the pages they want to produce. Similarly, the advance of CSS3, the next iteration of CSS, alongside HTML5 promises to improve both the development and viewing of web experiences. CSS3 introduces many new kinds of selectors and properties that let you do much more with styling web content. The HTML5 Pack for Adobe Illustrator CS5 bridges the gap which has traditionally existed between designers and web developers. It harnesses the power of Adobe Illustrator, and translates design data in formats that web developers are most comfortable with; and can use in the web designs without hassle. Using the HTML5 Pack you can do the following: Parameterized SVG Multi-screen SVG Mark object as canvas in SVG Export named character styles as CSS Export artwork appearances as CSS Include Selected Graphic Style as CSS in SVG Note: Although the HTML5 and CSS3 specs are still being finalized, HTML5 and CSS3 can be used with any browser that currently supports them. Most recent versions of the leading browsers (Safari, Firefox, Opera, Internet Explorer, Chrome), support at least some (a few support many) HTML5 and CSS3 features. Parameterized SVG You can designate some attributes of an object in a design as variables. The web developer can then customize the objects by assigning values to the variables in the HTML page. The web developer can also reuse such objects in a page with different values for the parameters. For example, you can mark the fill color of a simple button as a variable, and export the graphic as SVG. The web developer can include the SVG in a web design, and provide a value for the fill color. The same SVG can also be used multiple times with different variable values for each instance. This helps the developer to reuse the same graphic but specify a different skin to vary the look and feel. Moreover, this functionality can even be used in data driven workflows. Using the HTML5 Pack for Adobe Illustrator CS5 you can mark the basic appearance attributes of an object as parameters. Currently, the following are supported: Fill Color Fill Opacity Stroke Color Stroke Opacity Stroke Width

2 Object Opacity Define appearance attributes as variables To designate appearance attributes are parameters, do the following: 1 Open or create a new document in Adobe Illustrator CS5. 2 Select paths that you require. Use the Layers panel and give the paths a logical name. 3 Open the Appearance panel (Windows > Appearance) and apply Stroke and Fill. 4 Keep the objects selected and select the Attributes that you want to mark as Variable. 5 Click the Toggle Variability icon to mark the selected attributes as variables. An X mark displays next to the appearance attributes objects designated as variables. 6 Save the design. Export to SVG After you have marked appearance attributes as variables, export the design to SVG with Presentation Attributes selected. 1 Save the file as SVG.

3 2 Select Presentation Attributes. 3 Click OK. The SVG file is saved. Along with the SVG file, a JavaScript file (Params.js) is also created in the same directory. Web development will require both these files. Use SVG in web design The SVG file can now be embedded in an HTML page, and values of variables need to be assigned. 1 Open or create a HTML page. 2 Link to Params.js in the <head> section of the HTML file. 3 Embed the SVG in the <body> section using the object tag. 4 Assign values to the variables using the <param> tag. The name of the parameter is <ObjectName>_<AttributeName>. For example, CustomButton_FillColor. <div> <object type="image/svg+xml" data="button.svg"> <param name="custombutton_fillcolor" value="#f58aa0" /> </object> </div> 5 Optionally, add multiple instances with different values for parameters. 6 Save the HTML file, and preview it. TIP: If you want to provide the same value of the parameters to a set objects, name the set of objects global using the Layers panel.

4 Additional information This functionality works on Chrome, FireFox, Opera, and Safari. If the SVG is exported without the Illustrator private data, opening such a SVG in Adobe Illustrator CS5 will not read attributes variability. SVG round-trip is not supported unless the SVG contains Illustrator private data. Currently on simple Paths are supported. Compound paths, plug-in art etc are not supported. Multi-screen SVG Today, one of the biggest challenge faced by designers is proliferation of mobile devices. The wide variety of devices have different screen sizes, and it is becoming increasingly difficult to make a design that suits all devices. Adobe Illustrator CS5 and HTML5 Pack offer a solution. You can create multiple artboards as per the size specification of the target devices. Place and optimize your designs on multiple artboards and export as SVG. The HTML5 Pack creates multiple SVG files, one for each artboard. It also generates some additional CSS and HTML files that makes the task of incorporating these into a web layout much easier. For example, to create a design for a phone, a tablet, and a computer monitor, you ll need three artboards: 1 Create a new document and add as many artboards as the number of target devices. You can name the artboards as per the target devices. For example, Desktop, Tablet, and Mobile. 2 Resize the artboards to correspond to the screen sizes on the target devices. For example, for a mobile phone set the art board size to 320X240 pixels. 3 Create designs on each artboard. These could be a variants of a base design (optimized for the particular size), or even completely different designs on each artboard. 4 Choose File > Save As. The Save As dialog box displays. 5 Enter a file name and location to save the SVG. 6 In the Save As Type drop down list, select SVG. 7 Select Use Artboards and All. 8 Click Save. The SVG Options dialog box displays. Click OK. On saving, each artboard is saved as an SVG, with the name <filename>_<artboard name>.svg. Along with the SVG files, an HTML page and a CSS file are also created. The HTML file detects the window size and displays the appropriate SVG file. For example, if your document is called DemoGraph.ai, the following files are saved: DemoGraph_Preview.html DemoGraph.css DemoGraph_Desktop.svg DemoGraph_Tablet.svg DemoGraph_Mobile.svg If you open the HTML file on the target devices, the appropriate graphic is displayed. TIP: You can quickly check the functionality by opening the HTML file in the browser resizing the browser window. On Safari you can choose the display size from the drop-down list also.

5 You can pass these files on to the web designer, who can incorporate these into the web layout. Additional information The HTML file is supported on Chrome, Safari, Opera. The SVG can be used on Firefox as well. Incase, choosing items from the drop down list does not work, you can resize the browser window to see the different sizes. Mark object as canvas in SVG On the web, SVG is the ideal approach when the design requires vector based content and interaction. However, if you need to control parts of a design at pixel level, canvas provides the ideal solution. To take advantage of both the approaches you can mark an object as canvas while designing in Illustrator. When you export to SVG, objects marked as canvas are rasterized and written down as canvas element inside the SVG. The generated SVG contains the marked objects inside the <canvas> element. The web developer can use this SVG and get access to pixel-level control on the required objects through the canvas. 1 Create or open an Illustrator document. 2 Select the object to export as canvas. 3 Choose Object > HTML5 Canvas > Make. The Layers panel displays an icon next to the object to indicate that it is a canvas object. 4 Save the document as SVG. The web designer can use this SVG in a web layout, and can access data on the canvas using JavaScript or other scripting languages. Note: Objects marked as canvas are rasterized and separate png files are generated corresponding to each canvas element so whenever you are moving the output SVG files to some other directory make sure to have these png files in the same directory.

6 Export named character styles as CSS You can create re-usable character styles in Illustrator that can be used throughout your design. The web designers usually have to recreate the style sheets (CSS files) when they translate your design for the web. You can now export the named character styles as a valid CSS3 file. Your web designer can link the generated CSS in the HTML page. 1 Open your design in Illustrator. 2 Display the Characters panel (Window > Type > Character Styles). 3 Edit or Add character styles. TIP: Ensure that all character styles have logical names; it ll make is easier for the web designer to understand the intent 4 Select the styles to export and choose Export Selected Styles as CSS. 5 Enter a name for the CSS file and click Save. Your web designer can now link this CSS file to the HTML page, and apply the appropriate CSS class to style the text. Export artwork appearances as CSS Using the HTML5 Pack for Adobe Illustrator CS5 you can save the appearance attributes of an object like Fill, Stroke, Opacity, Gradient and also the absolute position and dimensions as CSS. 1 Create or open an Illustrator document. 2 Select the object whose attributes you want to export to CSS. 3 Ensure that the objects are named logically and are easy to recognize. If required, use the Layers panel and rename the object. For example, if the object represents a side-bar in a web page, name it SideBar.

7 4 From the Appearance panels pull-out menu, choose Export Selected as CSS. 5 Enter a name for the CSS and click Save. You can now give the CSS file to your web designers, and they can link to it and apply the styles without having to recreate the styles. CSS Export Options You can specify some export options when you export graphic styles to CSS. From the Appearance panel pull-down menu, choose CSS Export Options. In the dialog specify the preferences for units, object appearances, and position and size, and then click OK. Note: This dialog box controls preferences only for Appearance attributes. If you want to change the units for Character Styles, modify the document units from Illustrator preferences.

8 Include Selected Graphic Style as CSS in SVG You can designate Graphic Styles to be included as CSS styles in the exported SVG. The web designer can then use these styles to conditionally modify the object appearance. You can even include unused styles for export to the SVG, so that they are available to the web designer, who can use scripting to apply them to object as required. To export styles: 1 Open the Graphic Styles panel (Window > Graphic Styles). 2 Select a Graphic Style in the panel that you want to included in SVG. 3 From the Graphic Styles panel pull-out menu, select Include CSS Style in SVG. 4 Save the document as SVG with CSS Properties set to Style Elements. You can supply the generated SVG with Graphic Styles to the web designer, who can use this SVG to script and apply the styles conditionally. Additional information Browsers Supported: Safari, Chrome, Firefox. Only the basic appearance attributes in the SVG are supported. Complex attributes such as Clipping path, Effects, etc are not supported.