So that graphics can be created for both print and digital to meet news deadlines, the responsive version is created first (i.e. mobilefirst) and the print version created from this. In practice, the graphic is first created on Artboard 1 and transferred to the print template. Then whilst this is being proofed, the graphic is adapted for Artboard 2.

| 1. PRINCIPLE | 2 . AI2HTML SCRIPT - familiarisation | 3. EDITING & MODIFYING | 4. PUBLISHING |

    1. In Adobe Illustrator open the responsive screen graphic and a template for a print graphic with the core meta-data already entered.
    2. On the screen graphic, show all layers and copy Artboard 1 - PASTE REMEMBERS LAYERS on (Layers Palette menu),
    3. Go to the print document and paste (Cmd-F). Turn PASTE REMEMBERS LAYERS off.
    4. Scale the print graphic down: Open the scale dialog box (select scale tool then Option-click anywhere) -- scale to 47.5%, scale corners, scale strokes. Open dialog box again and turn scale corners OFF, and scale strokes OFF.
    5. Show all layers and position graphic around the centre line
    6. Bring boxes in to the edge of the graphic (on the responsive screen graphic they are set to bleed), and make any other adjustments needed for print.
    7. Go to Publish View (so the graphic opens consistently) and save to Adobe Illustrator CS4 (or whatever your house-style is)

    Translators faced with translating both a print graphic and a responsive screen graphic can translate the text on the print graphic first, and then transfer the text to Artboard 1 of the screen graphic.
    1. In Adobe Illustrator open the responsive screen graphic that needs to be translated and the print graphic that has been translated.
    2. On the print graphic go to Publish View, hide and lock all layers except the Text Layer. Copy
    3. Go to the screen graphic and Text View (i.e. all layers locked and invisible except the text layer). Paste.
    4. Scale the text: Open the scale dialog box (S-Option, click anywhere) -- scale to 205%, scale corners, scale strokes. Open dialog box again and turn scale corners OFF, and scale strokes OFF.
    5. Position the text using the cursor arrow keys. One way to do this is to show the Translation Layer at the same time (but keep this Layer locked). You can then adjust the text to give an exact overlap.
    6. Now go to Edit View. Check Artboard 1. Then when OK, start transferring the text to Artboards 2 and 3.
    7. When complete:
      • Go to Text View and copy all the text
      • Go to Translation View and paste all the text (Cmd-F) - replacing any previous text
      • Go to Text View and outline all the text
      • Go to Publish View, check Artboards are still named 1 and Artboard 2, and run the ai2html script. The two .png should be named 1 and 2.
      • Save to Adobe Illustrator CS4 (For convenience at Graphic News all Adobe Illustrator files are currently saved to CS4). At Graphic News we then compress the folder and upload to the archive.
    TIP: If you need further text changes after you have run the script, you can go to the pre-outlined state by doing sequential Cmd-Z

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