TFScreenshotsGuidelines

Screenshots for DevToolshow 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

Take screenshotsIn this step you are working with the real application you have to document.

Transfer the material to the machine you will use for processingUsually it is better to do following task on a system where you can have other applications installed. Anyway this step is optional.

Rename the images and HTML filesDifferentiating the english and localized content is by the file names.

„Post-process“ the imagesTake out the unwanted parts of image, add highlights, etc.

Edit HTML filesLet the localized HTML documents to reffer to the propper image files and of course to another HTML.

Taking screenshots

Prepare the IrfanView for taking screenshotsIrfanView 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

Prepare material you will work onOpen the tutorial, on-line help, etc. in the browser. Before you start your work you should see the translated text but the english screenshots.

Prepare the applicationFollow 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.

Take screenshotEither via pressing configured shortcut or with timer delay. You will get a screenshot displayed within the IrfanView.

Roughly crop imageVery 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.

Save imageChoose 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.

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.

Open the terminal windowWe are using the unix shell scripting. Once opened the terminal, change working directory to that one containing the images.

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.

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.

Do not use any kind of special effectsThe 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.

Set bordersWhen cropping the image set the border of smallest logical part (see „Correct example“) to be 1px thin around.

Colour for texts & highlightsFor 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

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.

Saving modified over existingWhen 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.

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:

Change links to localized imagesIn „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.

Change links to localized documentsIn „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.

Save the document and check it in web browserYou will probably realize that lot of images get distorted. This is because there are sizes harcoded for the english images.

Fix the image sizesEvery 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.