FAQ: SCREEN GRAPHICS 2. EDITING & MODIFYING

The method below applies as at April 2016The text is outlined, so the text is fixed on the three artboard images. This enables conventional type and paragraph formatting to be used. So the text can be modified, before outlining, it is saved to the “translation layer”. Before the text in a graphic can be edited, the outlined text on the graphic must be replaced with the editable text saved to the translation layer

4. SCREEN TO PRINT
3. PUBLISHING
1. PRINCIPLE


  1. AI2HTML scriptBefore 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. USING THE AI2HTML SCRIPT
    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 that you should see on top of the graphic 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 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, Artboard 2 and Artboard 3 - 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, 2, 3. If not, trash the output folder, edit the artboard names (as above), Save to Adobe Illustrator CS4 and re-run the script

  3. CHANGING THE TEXT
    • Replace the outlined text in the Text Layer with the editable text in the Translation Layer (an editable version of the text having beenplaced in the Translation Layer before outlining). This can most easily be done by toggling between Text View (which shows only the text in the graphic with everything else invisible and locked) with the Translation View (which shows only the Translation Layer, with other layers locked and invisible).
      TIP: If you copy the text in one Layer you can paste it exactly in position in another layer using Cmd-F
    • Translate or edit the text using styling exactly as you would a print graphic.
      NOTE: The template used to create screen graphics( currently) uses layers and fonts (Georgia and Arial) to facilitate the conversion of a print graphic from Artboard 1 and vice versa, i.e. to transfer translated text from a print graphic onto Artboard !. (Older graphics used different fonts).
      TIP: After transferring translated text from a print graphic into Artboard 1, scale by 205%, and position to align with the Translation Layer text (by locking the translation layer and making it visible) using the arrow keys
      TIP: To scale, select the text, Click on the letter S, Hold down the Alt key and click anywhere on the document. This brings up the scale box.

    • If more space is needed to accommodate additional lines of text, move the artwork below the additional line, and then enlarge the Artboard accordingly.
      TIP: When moving objects or text, lock all layers except the layer you want to move
      TIP: Use the Cursor Key (i.e. keyboard arrows) to move objects rather than moving by eye. Set the Cursor key by Cmd-K, set to 20, then return.
      TIP In the Artboard palette - Select the Artboard and click on the Artboard symbol to the right of the Artboard name. This brings up a menu. Increase the height of the Artboard by 20pt for each additional line of text. Then move the artwork below the additional line

  4. RACKING & PACKING
    • Copy the editable text, and replace the text in the Translation Layer with this editable text(by toggling between the Translation View and the Text View), before outlining the text.
      TIP: To outline text Select, Type/Create Outline
      TIP Text can be selected by dragging the Direct Select tool over the text, or by selecting sequentially with the Direct Selection Tool - holding the shift key down

    • Check the Artboards names are still Artboard 1, Artboard 2 and Artboard 3 - 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, 2, 3. 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 we will be restricting the number of pages viewable to unregistered users

The website is undergoing the first part of an upgrade, so please let us know if you encounter problems. When responsive graphics are available, there is now a button to show how they adapt to screen size. There are improved indexing and information pages and also an auto translate facility for our foreign readers. We have also incorporated GN NewsAhead and the GN On This Day anniversaries database.

Cookies