At RJI, we’ve been working to improve how we share information with our readers.



By the end of this lesson participants will:

  • Identify graphic types
  • Identify the elements required for effective graphics
  • Create information graphics for stories
  • Produce an information animation

Editorial considerations

Many readership studies show that readers may actually attend first to the graphics (and photographs) in a story layout before they begin reading the copy.

Headlines and subheads can be considered a graphic element for a story. So, too, can the various bolded paragraphs or quotes pulled out of the text and printed in larger type. Those graphical elements are created in the editing process by those who design and layout pages. Graphics also include the logos and various navigation buttons that may appear on the pages of the site.

In this lesson we are considering the more formal kinds of graphics -- those that add additional content to the reporter's story. So powerful are many graphics that one might design the graphics for a story first and present in traditional text only that information that can not be displayed graphically.

Here's a list of common information graphic types:

  • Maps show geographic relationships
  • Drawings show conceptual or physical relationships of things that cannot otherwise be seen.
    • A cut-away, cross-section of a building
    • The display of a political process
  • Graphs show numerical or mathematical relationships, often over time
    • Line or fever graphs emphasize trends
    • Bar graphs and pie charts emphasize comparisons
  • Tables show data with no necessary mathematical relationship
  • Lists show non-numerical information in graphic form

An information graphic should contain the following elements beyond the basic display of its content:

  • Source. What is the original source of the information for this graphic -- government report, etc?
  • Headline. Give your graphic a headline since many users may begin their consideration of the content of the page with the graphic
  • Summary. Include an additional sentence beyond the headline that tells the user what he or she should understand from the display.
  • Labels. Tell the user what the various parts of the graphic represent -- the vertical and horizontal legs of a graph?
  • By-line. Who created this graphic from the source material? List that person's name or cite the organization (often the Web site itself) as the creator of the graphic

Web production considerations

File formats. While graphics may be created as vector graphics -- that is the graphics whose lines have a mathematical relationship and that be resized without loss of quality -- they must be transposed to bitmap (raster) graphics for use on the web. The resulting web graphics are displayed in one of three formats. None of the three can be enlarged in the processing step to produce satisfactory results. They can be reduced in size. In this reduction process, the software usually re-samples the graphic and produces a next version.

  • The Graphic Interchange Forms (GIF) -- (pronounced JIF) was the original format for web graphics and is still widely used. It uses 8-bit pixel resolution and therefore can only represent 256 colors. It is used when there is less demand for color-intense graphics or photographs. GIFs have relatively low file size and therefore load rapidly on the user's browser. They also can have a transparent background and fits nicely on the background color of the site.
    To reduce the number of colors in an original graphic to the 256 color capability of a GIF, the software will remove unnecessary colors in a process called dithering. This process works will with simple graphics but seldom produces good results with photographs. The photographs require web presentation in an alternative format.
  • This second format is called JPEG (pronounced JAY-PEG) for the Joint Photographic Experts Group. It uses 24- or 32 bit pixel resolution and can produce 16.8 million colors; therefore, it is the desired format for photographs and color-complex graphics. To reduce file size, the JPEG files compress with a "lossy" process in which the colors are sampled and a reduced file size is reproduced. When that new file is saved, the reductions from the sampling become permanent. Subsequent "saves" of the file results in further reductions in size and quality. Therefore, it is best to return to the original photo; create another copy and work from that copy.
  • The third common file type is PNG (Portable Network Graphic). It is pronounced PING. It was developed as an open-source alternative to the GIF, which was developed initially by CompuServe Information Service. It can also present photographs satisfactorily, although in a larger files size than JPEG files.

File size. The small file, the faster the graphic or photograph will load; however, there is a trade-off between files size and quality -- particularly in fine graphic or photographic detail. Strategies editors use to reduce the file size and maintain an acceptable quality include these steps:

  • Begin the editing process with a file size at least as large or larger than the intended final size. Work from a copy of the original and experiment with how fall one can compress the file and maintain adequate quality. If you go too far, begin again with another copy of the original.
  • Use a smaller picture on the primary page and invite the user to click on a link to open a larger, higher quality image. Describe the file size as an indication to the user how long it would take to open that additional file.
  • Save for the web. Some graphics editing programs have an option that enables users to have the software select among various compression steps to achieve the most efficient file size. This step can significantly reduce the file size without apparent jeopardy to the quality of the web display.

Software. The Adobe Corporation has a substantial lead proprietary software in the field of graphics production. Its family includes Photoshop for photographic editing and production of raster graphics, and Freehand, Fireworks, Flash and Illustrator for production of vector graphics.

Among the open-source programs for production of vector graphics are Notebox that runs on the Max OS X operating system, Draw that is a Linux based system and Inkscape, a multi-platform editor.

Graphics Editing Tools

The best known graphics editing software programs are Adobe's Dreamweaver and the open-source GIMP program. The Microsoft Corporation is developing Microsoft Expression Web as a replacement editor for its FrontPage editing program. The software programs each have their own sets of processes and tools. The best way to become acquainted with them is practice away from an immediate production deadline.

Editing tools. There are several common tools that editors will use frequently. They include:

  • Toolbox. These are various production tools -- paintbrushes that add color to a graphic as if painting with a brush, text tools that enables the editor to add text, crop tools that permit the editor to eliminate unwanted parts of the photograph or graphic.
  • Options bar. The options bar permits the editor to modify the characteristics of the tools -- to specify the size, color and font for the text tool, to set the width of the paintbrush, etc.
  • Menus. The menus drop down from the key functions at the top of the program window -- File, Edit, Image, Filter, Layer, etc. The menus open other functions when the editor selects them -- undo the previous action, copy, paste, fill, adjust the image size, change the image quality, apply filters, etc.
  • Palettes. The palette windows control the formatting options for the graphic or photograph.

Editing functions. The editing programs have a the huge variety of functions that editors can use in the creation and editing steps for graphics and photographs. The best way to become familiar with them is practice. Here are some of the functions editors will use frequently:

  • Cropping. Cropping reduces the dimensions of the graphic or photograph by eliminating unwanted parts without making other adjusts in the image size.
  • Resize. Reducing the dimensions of raster graphics is usually satisfactory. Enlarging them seldom is. The usual procedure is to reduce both width and height in proportion. The process produces another version of the graphic based on sampling the original pixels. Web resolution ranges between 72 and 95 pixels per inch; therefore, a graphic 150 pixels wide will reproduce on the web slightly over 2 inches or 5 cm.
  • Corrections. Programs have an abundance of manual adjustments in color, contrast, saturation, hue and light. A first step in the corrections process is to select the auto correct for brightness and contrast. A second step is to select the unsharp mask filter. This adjustment increases the apparent sharpness of graphics or photographs.
  • Undo. The editing menu of many programs will permit the editor to eliminate changes after the most recent "save" action. Once the project is saved, one can not use the undo command to eliminate mistakes.
  • Adding content. Editing programs enable editors to pen additional layers to insert text or other graphics and photographs. Editors can work on a single layer without affecting the other layers in the program.
  • Saving. Project should be saved as work in progress. For example, the Adobe Photoshop program saves these files as .PSD files. Editors can reopen these files and continue to work within the layers.
  • Save as. When a project is ready for upload to the Web, the editor should save the file on one of the three Internet files preferences --GIF, PNG or JPEG. It will be necessary to flatten the layers to save the project in these formats. The flattening process merges the layers. An additional step for graphics and photographs intended for the web is to select a function that reduces the file size. In Photoshop editors select "Save for Web" to accomplish this task. This will open a new window in which the editor can make adjustment selected to reduce the number of colors (GIF) or reduce the image quality (JPEG). Editors can test the decisions before committing to the final compression.

Web animation programs

Animation has been a part of the world's video experience since the early days of the motion picture. The best known application is the cartoon. Artists drew one frame at a time, each slightly different than the previous. The separate frames were photographed, and when these are projected, they created the appearance of motion. Today, the individual frames no longer must be drawn as ink-on-paper products. Computers help artists create life-like three-dimension images for high budget films. Computer software helps the news producer create animation related to news content.

Of course, video is actually a series of still pictures that are also projected at 24 or 30 frames per second to suggest motion. Beyond that similarity, the processes of digital video editing and the creation of animation use many of the same processes. The editing and creation is done along a timeline. New content is added on subsequent layers. In video editing, in and out markers are added. In animation generation, the creator uses keyframes to generate a change in the element -- some, pictures, graphics. When the individual pieces are assembled along the timeline and in the various layers of the project, it is saved as a work project. Then, the project rendered as a playable animation. The best known of these playable formats is the .swf produced from the Adobe Flash software.


Recommended for You

Related Stories

comments powered by Disqus