 | Level: Introductory Victoria Ovens (vovens@us.ibm.com), developerWorks Graphic design lead, IBM
Ami Dewar (adewar@us.ibm.com), developerWorks Advanced design team lead, IBM
10 Jan 2005
Updated 08 Jul 2008 This article is for authors; it shows you how to develop and
submit technical graphics (such as figures and screen captures) for the
article or tutorial you are writing for developerWorks. Following these tips
and guidelines will enhance your content and speed up its publication on
developerWorks.
Getting
started
- Review the
developerWorks author guidelines.
- Use the
content submission form
to propose your idea to a developerWorks editor.
- A
developerWorks editor
will contact you, and if your idea is approved, you'll get further
instructions on how to proceed with your content.
- 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:
Figure 1.
Technical figure
Figure 2.
Screen capture
Figure
3. Technical figure merged with screen captures
Figure 4.
Author photograph
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.
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.
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:
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.
Figure 7.
Examples of common images
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.
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.
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:
Table 1. Capturing screens on Windows
| Key combination | Result |
|---|
|
Alt+PrtSc (Alt + PrintScreen)
| Captures the active window, including the window borders | |
PrtSc (PrintScreen)
| Captures the entire screen display |
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:
Table 2. Capturing screens on Macintosh
| Key combination | Result |
|---|
|
CMD+SHIFT+3
| Captures the entire screen | |
CMD+SHIFT+4
| Allows you to drag and select an area for capture | |
CMD+SHIFT+4, then press the space bar
| Captures a window, menu bar, dock, or other area (position the
pointer so your selected area is highlighted, then click the
mouse) |
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.
Table 3. Capturing screens on Linux
| Key combination | Result |
|---|
|
sleep 5; import -frame snapshot1.png
| Waits 5 seconds, then captures a window (including its frame) that
you click with your mouse | |
sleep 7; import -frame -window 0x1e00079 snapshot2.png
| Waits 7 seconds, then captures the window with id 0x1e00079. Use
the xwininfo command to determine a
window's id | |
sleep 3; import -window root snapshot3.png
| Waits 3 seconds, then captures the entire screen |
To check the sizes of your images, try the
identify command from ImageMagick.
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.
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.
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.
Figure 8. The
developerWorks color palette
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!
Download | Description | Name | Size | Download method |
|---|
| Common computer images | techarticons.zip | 109KB | HTTP |
|---|
Resources Learn
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
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, formally the lead graphic designer, has
been a designer with IBM for six years, creating over 1200 feature graphics and
8000 technical illustrations. |
Rate this page
| |
