2. The AI2HTML SCRIPT

When a responsive screen graphic has been created in Adobe Illustrator it is converted to HTML using a script Before you start you need to obtain the latest version of the Ai2html script and install it. It can be downloaded from the page indicated below. Move the ai2html.jsx file into the Illustrator folder where scripts are located. (This may require administrator status):
Applications/Adobe Illustrator CC 2014/Presets/en_GB/Scripts/ai2html.jsx

RESPONSIVE SCREEN GRAPHICS
| 1. PRINCIPLE | 3. EDITING & MODIFYING | 4. PUBLISHING | 5. SCREEN TO PRINT |

To familiarize yourself with using the AI2HTML script:
  • Download a graphic -- GN12345R_screen_EN.zip . Inside you will find the master .ai file, GN12345R_EN.ai. Edit the file name appropriately, for example to GN12345R_ES.ai if translating into Spanish.
  • Open the R.ai master file in Adobe Illustrator (version CS4 or later). It opens in Publish View. This shows various yellow Help messages surrounding the two artboards. To make these messages disappear, and to edit, go to Edit View. Check the Layer Palette, Artboard Palette, Type-Character Palette. Check the Views: Edit View, Publish View, Translation View, Text View, Ai2HTML settings View. Please read the notes below in conjunction with the yellow Help Messages seen when you first open the graphic.
  • Go to the ai2html Settings View and edit the output line to, for example, GN12345R_ES. When the ai2html script is run the .html and .png for each artboard will then be placed in a folder with this name. Trash the previous folder supplied with the .ai.
  • Check the Artboard names are still Artboard 1 and Artboard 2 - for some reason the names seem to morph - especially if using different language keyboards. So check, and if the names need to be reinstated go to the Artboard Palette, click on the Artboard Icon to the right of each artboard name to bring up the menu and edit the artboard name.
  • Go to Publish View, Save to Adobe Illustrator CS4, and run the AI2HTML script. Check that the .png are labelled 1 and 2. If not, trash the output folder, edit the artboard names (as above), Save to Adobe Illustrator CS4 and re-run the script