| 2 . AI2HTML SCRIPT - familiarisation | 3. EDITING & MODIFYING | 4. PUBLISHING | 5. SCREEN TO PRINT |

The principle behind responsive screen graphics is as follows:

  1. A graphic is prepared in Adobe Illustrator using two Artboards of different sizes: Artboard 1 (640px), Artboard 2 (320px). Artboard 2 corresponds to a mobile phone screen, and Artboard 1 to a laptop screen. Adobe Illustrator CS4 is the earliest version of to allow multiple artboards is CS4.

  2. A script (ai2html) is then run. This converts the images on the two artboards into two .png - one for each artboard - plus an .html file.

  3. When the html is played in a browser the size of the screen determines which of the two images is displayed. With intermediate screen widths the image scales.
This method and the script used by Graphic News has been developed from that pioneered by the New York Times. The script used by Graphic News avoids typographic problems at intermediate screen widths (by using outlined text), and allows screen graphics to be constructed using the conventional character and paragraph styling used to create print graphics. This makes it possible to create responsive screen graphics to meet news deadlines, as well as traditional print graphics.

FAQ: How does the Graphic News system differ from that of the New York Times?
FAQ: What is a responsive graphic and why are they needed?

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