Getting started

1. Review the developerWorks author guidelines.
2. Use the content submission form to propose your idea to a developerWorks editor.
3. A developerWorks editor will contact you, and if your idea is approved, you'll get further instructions on how to proceed with your content.
4. Return to this article for advice on developing effective graphics for your content and eliminating time-consuming redraws.

The tips and instructions here can help you produce graphics that closely resemble the final published version. Prior to publication on the developerWorks site, all graphics you submit will be reviewed, revised, or returned to you for rework as needed by the developerWorks graphics design team.

Questions? Contact graphic designer Victoria Ovens.

Step 1. Select the types of graphics that will enhance your content

Graphics that will enhance your article or tutorial include technical figures, screen captures, and in some cases, rich media files. Your developerWorks editor can help you determine what sorts of graphics will enhance your content. Here are some samples:

Rich media files include audio, Flash, animated images, and video. developerWorks has a separate set of standards for these file types. Please contact your editor to discuss including rich media files in your content.

Back to top

Step 2. Follow the 8 general guidelines for all types of graphics

1. Necessary?

Graphics are used to explain or enhance the messages of the content. They should not be underused or overused. Think about how the reader will use the material. For example, if you want to include some code that readers can use in their applications, provide a code listing that readers can cut and paste into their applications, rather than a screen capture, which does not support cutting and pasting of code.

2. Appropriate for a worldwide audience?

Avoid visual elements that are meaningful only to a particular geography or that could be construed as controversial. For example, don't use holiday symbols, religious symbols, hand gestures/images, mailboxes, country-specific flags and maps, jets or airplanes, or any kind of weapons-related symbols.

3. Readable?

All graphics should be legible.

4. No captions, borders, drop shadows, or numbered callouts?

Please don't include captions, borders, drop shadows, or numbered callouts.

5. Web-safe colors?

If you're using colors in your graphics, please select the colors from the developerWorks Web-safe color palette, which includes the RGB percentages so you can easily replicate them.

6. Proper width and height?

In published articles, graphics should not exceed 572 pixels in width and 800 pixels in height at 72 ppi (pixels per inch), standard optimization for the Internet. In published tutorials, graphics should not exceed 500 pixels in width and 800 pixels in height at 72 ppi.

Make your image or screen capture as large as needed to be legible. If your graphic is less than 572 pixels wide, that's fine. If your graphic must exceed 572 pixels to be legible, submit the original image at that size, and the graphics design team will resize it to avoid distortion.

7. Right format?

These formats are ideal: jpg, gif, and png (though with png files, our graphic designers will convert them to jpg or gif for the published content). If you wish to use other formats, check with graphic designer Victoria Ovens.

8. Proper file names?

Keep file names short (less than 20 alphanumeric characters is ideal) and lower-cased (for example, figure1.gif and screen1.gif). Avoid symbols and spaces.

Now review additional tips and guidelines that are specific to technical figures or screen captures.

Back to top

Creating technical figures

Beyond the 8 general guidelines for all types of graphics, these guidelines and tips are specific to technical figures.

Programs you can use

You can create your technical figures using Microsoft® Paint, Adobe Illustrator, Adobe Photoshop, Microsoft Word, and other graphics programs.

Style

The most effective technical figures are simple, straightforward, and not heavily detailed:

• Arrows should use one common style.
  
  
• Lines should be one-point thick.
  
  Figure 6. Examples of approved arrows and 1-point lines
  
  
  
• Shapes should have a one-pixel black border.
  
  
• Any text in the graphic, such as labels or unnumbered callouts, should:
  • Use 12-point Arial font
  • Use bold highlighting as needed for emphasis, but minimally
  • Avoid italic highlighting, as it's hard to read
  • Use sentence-style capitalization
  • Use approved abbreviations and product names (check with your editor)

  The graphic design team may adjust the text style in the graphic as needed.

  
  
• Include common images as needed from the collection below.
  
  
• Do not use drop shadows, gradients, or three-dimensional images.
  
  
• Do not include captions or image titles within the image.
  
  
• Do not include a border around the image.

Common images

An assortment of standard computer images (such as laptops, mobile phones, PDAs, etc.) are owned by the graphics design team (to avoid copyright issues). For consistency and simplicity, you can use any of these common images in your technical figures. To add them to your figure, download the zip file of all images, select the image you want, and insert it into your graphics application.

Don't see the image you need? Feel free to ask the graphics team—we have many other standard images and might have what you're looking for. You can also use one of your own, but please keep the style simple as in the images shown here.

Back to top

Creating screen captures

Beyond the 8 general guidelines for all types of graphics, these guidelines and tips are specific to screen captures.

The most important considerations for screen captures are size, file format, and available tools.

Sizing your screen capture

Try to take the smallest screen capture possible, while still legible, by adjusting the size of your browser window to include just the information you need to capture. Don't alter the original screen capture, even if it exceeds the width specified in the 8 general guidelines for all types of graphics. Simply submit the original source file when you submit your article or tutorial draft; the screen capture will be resized as needed.

File formats for screen captures

The best formats for saving your screen captures are jpg or gif, since they are optimized for high-contrast graphics, such as application interfaces. Avoid compressed formats, such as the 24-bit bmp and the tif formats.

Tools for screen captures

Screen-capture tools are available for most software platforms. For example, SnagIt is a popular Windows-based tool (see the link in Resources below), and the built-in screen capture tools specific to your platform are fine to use also. For example, the tools that come with Microsoft® Windows®, Apple Macintosh, and Linux® are sufficient for screen captures. (If you need to capture something other than a screen, such as the cursor or pointer, you might need another application.) Specific advice for flawless screen captures follows.

Back to top

Optimizing your screen capture

Remove all toolbars prior to taking the screen capture. (For example, on a PC, select View > Toolbars > Unselect all toolbars. On a Mac, select View > Collapse Toolbars.)

Using SnagIt

Windows users can use SnagIt for screen captures (see the link in Resources below). We recommend these settings to get the best results— and to ensure your graphics will match developerWorks' style and minimize rework:

• Arrows
  In the SnagIt Editor, select Paint Tools > Arrow Tool. Click the Style button, and select the first arrow. Set the Width to 1 and the Opacity to 100 (the default), check Antialias, and uncheck Drop shadow:
  
  Figure 8. SnagIt settings for arrow style
  
  
  
• Emphasis areas
  In the SnagIt Editor, select Paint Tools > Shape Tool. Select the shape you wish to use, preferably a rectangle or circle. Set the Width to 1, the Opacity to 100 (the default), check Antialias, and uncheck Drop shadow:
  
  Figure 9. SnagIt settings for emphasis areas
  
  
  
• Callouts
  In the SnagIt Editor, select Paint Tools > Callout Tool. For Category, select Arrows or Balloons. For this example we're using callout balloons, but the same settings apply to callout arrows. Set Opacity to 100 (the default), and uncheck Drop shadow:
  
  Figure 10. SnagIt settings for callouts
  
  
  For callout color, select gray for the foreground color (see Figure 11) and white for the background color. (And for text in the callout, select black, Arial, 12 pt. font.)
  
  Figure 11. SnagIt settings for callout color
  
  
  

Using Windows screen-capture tools

Windows offers two different key combinations to send screen captures to the clipboard. Using one of the following key combinations, you can paste the image into Microsoft Paint or another graphics program, and then save it:

If you need to capture a menu display, you can left-click your mouse while pressing Alt+PrtSc or PrtSc. Different applications tend to treat these key combinations differently, so you'll need to try both key combinations.

Using Macintosh screen-capture tools

Three different key combinations can capture screens:

Save screen shots as PDF files on the desktop or paste them into a graphics application or document.

The Mac OS X screen capture program, Grab, is also available on OSX and up.

Using Linux screen-capture tools

Most Linux distributions have several screen-capture tools. Graphical tools including the GIMP (GNU Image Manipulation Program) and ksnapshot. Command-line tools include the import command from ImageMagick.

With the GIMP, use the File > Acquire > Screen Shot... dialog to capture either a single window or the whole screen. Similarly, you may use ksnapshot to capture a single window or the whole screen. Both of these GUI programs allow you to set a delay after requesting the capture so you can get focus on the right window or open menus.

With ksnapshot, remember to save the capture after grabbing it. If you're using the import command from ImageMagick, you can combine it with the sleep command to give you a delay for window setup.

To check the sizes of your images, try the identify command from ImageMagick.

Back to top

Creating an author photograph

If you want your picture included at the conclusion of your article or tutorial, please submit an unretouched digital photograph. A photo of you facing the camera, from the chest up, of vertical orientation, and taken against a light or white solid background is ideal. The picture should be at least 200 x 250 pixels, so there is room to adjust. The resulting image in the published content will be a black-and-white bust shot (64 x 80 pixels). Please name your file with your first and last name.

Back to top

Step 3. Submit your graphics to developerWorks

When you submit the final draft of your article or tutorial to your developerWorks editor, submit the graphics files also. Follow these tips:

• Do not alter your image source files in any way (including resizing).
  
  
• If you have used a word-processing program to develop your content and inserted the graphics, such as screen captures, into the document file, please deliver the image source files separately from the document file.
  
  
• If the total size of the source files you're attaching in an e-mail exceeds 10 MB, please save them in a zip/stuffit/infozip file before e-mailing.
  
  
• Include any special instructions regarding cropping, labeling, colors, or redrawing. If your graphics should not be altered (it's computer- or program-generated with UML, for example), let us know.
  
  
• If you want to merge different types of images (such as adding photographs or screen captures to a technical figure as shown in Figure 3, please submit all original screen captures and photographs, as well as the altered image, so it can be revised as necessary while still retaining legibility.

Back to top

Once your graphics are delivered

Your developerWorks editor will review all images you submit and then forward them to the graphics design team. The graphics design team may recolor, resize, reformat, crop, revise, or return the images as appropriate. It typically takes 5 to 7 days to complete this process.

Color

The developerWorks Web-safe color palette is shown in Figure 8. If a color needs to be altered, the graphic designer will attempt to match it as closely as possible to the original.

Back to top

Contact us

developerWorks wants to get your vital content out to its readers as quickly as possible! If you have any questions on illustrating your content, please contact graphic designer Victoria Ovens. We look forward to working with you!

Back to top

Download

Information about download methods

Resources

Learn

• Review the developerWorks author guidelines to get started.
  
  
• Propose your idea for an article or tutorial with the developerWorks content submission form.
  
  
• Find a list of editorial contacts on the developerWorks editorial team.
  
  
• Get instructions and tips on developing articles and tutorials for developerWorks in "Authoring with the developerWorks XML templates" and "Authoring with the developerWorks Word and Writer templates".
  
  

Get products and technologies

• With SnagIt from TechSmith, you can capture anything on your screen, such as an entire screen, a section of a screen, or even a scrolling screen. You can purchase or download a trial copy.
  
  
• GIMP and ImageMagick are included on most Linux distributions and are available for other platforms as well, including Microsoft Windows and Apple Macintosh.
  
  

Discuss

• Get involved in the developerWorks community through blogs, forums, podcasts, and community topics in our new developerWorks spaces.
  
  

About the authors

Victoria Ovens is the developerWorks lead graphic designer. She's a graduate of the University of North Carolina at Greensboro with a degree in Graphic Design. When she's not finding interesting ways to express abstract programming concepts graphically, she rescues abandoned animals, plays with her Basenjis, and rides her Suzuki SV650S.

Ami Dewar is the developerWorks Advanced design team lead. Advanced design is a hybrid team of designers, developers, and architects working to keep developerWorks on the cutting edge. Ami, formerly the lead graphic designer, has been a designer with IBM for six years, creating over 1200 feature graphics and 8000 technical illustrations. Learn more in Ami's profile on My developerWorks.

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Getting started
• Types of graphics
• General guidelines
• Creating technical figures
• Creating screen captures
• Optimizing your screen capture
• Creating an author photograph
• Delivering your graphics
• Once your graphics are delivered
• Contact us
• Download
• Resources
• About the authors
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

My developerWorks community