TFScreenshotsGuidelines

Revision as of 16:56, 5 November 2009 by Admin (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)

}}center

Screenshots for DevTools
how to take them consistent way

}}

Environment

  • OS: Windows XP Pro with SP2 native localization (avoid using MUI packs), no customization to the look&feel is done. Only the desktop wallpaper taken out.
  • IrfanView for real screenshots
  • MSIE latest version for displaying the web pages
  • text editor, my favorite is „vim“, but also gedit is fine.
  • Raster image editor. A good choice is GIMP.

Process overview

  1. Take screenshots
    In this step you are working with the real application you have to document.
  2. Transfer the material to the machine you will use for processing
    Usually it is better to do following task on a system where you can have other applications installed. Anyway this step is optional.
  3. Rename the images and HTML files
    Differentiating the english and localized content is by the file names.
  4. „Post-process“ the images
    Take out the unwanted parts of image, add highlights, etc.
  5. Edit HTML files
    Let the localized HTML documents to reffer to the propper image files and of course to another HTML.

Taking screenshots

  1. Prepare the IrfanView for taking screenshots
    IrfanView has customizable „Capture“ module (shortcut is „C“).
    Setup the shortcut for action – the default „Ctrl-F11“ is suitable for all situations including access over the VNC.
    For some screenshots you will need to set up the „Automatic – timer delay“ capture as pressing the keys will nodify the action in the GUI. A good example is the drag'n'drop operation, where you start it (drag) and wait for image capture completion before finishing (drop). Usually 10 seconds is enough.
    File:IrfanView Capture settings
  2. Prepare material you will work on
    Open the tutorial, on-line help, etc. in the browser. Before you start your work you should see the translated text but the english screenshots.
  3. Prepare the application
    Follow the document you are working on and have the application in the state similar to the english original.
    Always try to have GUI parts the same size and content as in the english original. Do not resize the dialogs.
    Note: It is not possible to have same/similar sizes in all the situations – translation is very often longer.
  4. Take screenshot
    Either via pressing configured shortcut or with timer delay. You will get a screenshot displayed within the IrfanView.
  5. Roughly crop image
    Very often we are interested in just a part of the application (see examples bellow). For such cases the Irfanview crop could be used. As it is quite hard to set the crop area preciselly just draw a rectangle around the area of interest adding more space around. Then press „Ctrl-Y“ combination.
  6. Save image
    Choose target format the same like the english original and overwrite the english screenshot within the localized directory tree. This allows you to check image in HTML document immeditelly after it is saved and help you to be sure you will not miss any screenshot. In most cases the image appears distorted as the size is hardcoded in the HTML tag but for check it is enough.
    At this time the images have wrong names, we will do the renaming images and modifying their respective links later.
  7. Repeat steps from 3. until you have all screenshots taken

Transfer to workstation for further processing

This step is completely optional. Because some tasks (see bellow) apply to more than one file or more than one line of text within the file it is comfortable to work on unix like system utilizing it's powerfull scripting, regular expressions,...
Copy data between machines your favorite way.

Renaming

All the localized materials are named with the convention „<base_name>_<locale>.<suffix>“, e.g. MissingSvr_pt_BR.png, vwp-migration_pt_BR.html.
Because of this you need to rename all localized images and HTMLs to follow this schema.
Note: The following guide suppose you are working on unix like system.

  1. Open the terminal window
    We are using the unix shell scripting. Once opened the terminal, change working directory to that one containing the images.
  2. Execute the command for renaming the set of images
    for i in *.png; do n=`echo $i | sed “s/\.png/_pt_BR\.png/g“`; mv “$i“ “$n“; done
    At this command it is supposed that the localization is done for Brazilian Portugese. Choose the respective locale and country of your localization.
  3. Rename the HTML manually

Images "post-processing"

There are lot of images referring just to the part of the GUI. These needs to be processed – cropped. For the precise cropping use the GIMP bitmap editor. GIMP is also good for retouching – unwanted mouse cursor, adding highlights, texts, etc.

  1. Do not use any kind of special effects
    The original images are sometimes using special effects, like paper tear-off, shadows, etc. It is fine, nice and shows that the author can do it. But is good for nothing.
  2. Always use a complete logical part
    Compare „Bad example“ vs. „Correct example“.

File:Bad cropping example File:Correct cropping example In the „Bad example“ it is quite hard for a beginner user to identify where to find such a part in real application.

  1. Set borders
    When cropping the image set the border of smallest logical part (see „Correct example“) to be 1px thin around.
  2. Colour for texts & highlights
    For the ilustrations where you have to highlight the part (see „Highlight example“) or type some text into the picture, use the colour from the active tab top.
    File:Highlight example
  3. Use „paths“ for highlights
    „Path“ is a vector object which allows to precisely set it's location. When you are done with setting it, just „Stroke path“ to get it.
  4. Saving modified over existing
    When saving processed image just overwrite the one you have started with. Do not save any meta-information like resolution, creation time, etc. Keep the compression ratio on maximum for png files.
  5. Keep finished files opened
    The GIMP displays real image pixel size in it's window titlebar. Having this information is required for the step „HTML editing“

HTML editing

So now there is properly named HTML document and images. But the document still has links to the english images and is cross-linking other documents in english version. While doing this task check the existing documents either on http://testwww.netbeans.org or http://www.netbeans.org.

Open the respective HTML file and:

  1. Change links to localized images
    In „vim“ the simple command „:%s/\.png/_pt_BR\.png/gc“ does the work.
    Note: the regular expression is the same like above for renaming.
    Note: it is essential to put there switches „g“ - for global replacement and „c“ for confirmation. There are common images, e.g. check.png (image of green checkmark), which are used for all languages.
  2. Change links to localized documents
    In „vim“ the simple command „:%s/\.html/_pt_BR\.html/gc“ does the work.
    Note: again it is essential to use switches „g“ and „c“
    Note: On quite all web documents there is a link at the end providing the feedback form, this is never localized.
  3. Save the document and check it in web browser
    You will probably realize that lot of images get distorted. This is because there are sizes harcoded for the english images.
  4. Fix the image sizes
    Every image in the document has the name like „Figura 1: ...“. Searching for this pattern will point you to the „<img>“ tag. In this tag, read the name of image, find it between opened images in GIMP, read its dimensions and fix them in HTML. Once saved and refreshed in web browser a non-distored image is seen.
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo