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

21 days to go until NEW GRAPHIC NEWS - a new website for a new era.

28 years ago — April 2, 1991 — the original Graphic News launched using a precursor to today’s websites that used email technology. These enabled infographics to be delivered electronically around the world over telephone lines. What was possible was very limited - It took 10 minutes for a 100K file to download.

Since then delivery speeds and website technology have moved on. The new website will offer the best online experience possible now, adding many new features (and offering new opportunities for the future), but still enabling existing users to select and download infographics and enjoy the distinct brand of visual journalism that is Graphic News.

Over the coming days I will give further information. Please contact me if you have any questions. Fiona Roberts, froberts @ graphicnews.com