FAQ: RESPONSIVE SCREEN GRAPHICS 2. AI2HTML SCRIPT familiarisation

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

  1. AI2HTML 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

  2. AI2HTML SCRIPT FAMILIARIZATION
    When a file is downloaded, you not only receive the publishable .png and .html, but also the master .ai file. Before you start modifying this you should familiarise yourself with using the AI2HTML script.
    • Download the 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 three artboards To vanish these yellow message 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. (To vanish these yellow notes and to edit, go to Edit View).
    • 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 Artboards 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


Welcome to Graphic News

Please get in the habit of logging in when you arrive as some pages may soon be restricted. If you are new to Graphic News there is a Website Guide to help you find your way around.


November 24, 2017 — Ai2HTML screen graphics - The script has been updated to allow multiple screen graphics to be published on the same web page. Click here for instructions


November 24, 2017 — Training - mobile graphics- The GN AI2HTML method is very fast and easy. It allows designers with conventional design skills to produce responsive “mobile” friendly graphics to meet news deadlines. Contact helpdesk @ graphicnews.com if you would like to join our next training course.


If you need help or have questions at any time, please contact us

Cookies