DocTeam/Official Documentation Screenshots
Contents |
Making Screenshots
This page lists the guidelines for making screenshots. Indeed it is important that screenshots look as consistent as possible throughout the whole official documentation.
Screenshot tools
It is not necessary that everyone uses the same tool for creating the screenshots, but the tool should make it possible to achieve the results mentioned above. Here's a list of suggested tools, based on the team's experience:
- Voilà for Mac (commercial, http://www.globaldelight.com/voila/voila_overview.html)
- Shutter for Linux (open source, http://shutter-project.org/)
- FireShot for Windows (free Firefox add-on, commercial pro version also exists, https://addons.mozilla.org/en-US/firefox/addon/5648/)
- Snagit for Mac and Windows (commercial, http://www.techsmith.com/snagit/)
- Jing for Mac and Windows (free, http://www.techsmith.com/jing/free/ or commercial pro version, http://www.techsmith.com/jing/pro/)
Reference web site
The reference site for all screenshots is the Introduction Package. Make sure that you have an instance which you can make the screenshots from. When installing the Introduction Package please keep the original background color, so that all screenshots are homogeneous (no pink, sorry ).
Screen size
Screenshots may capture the whole window or only part of it if that makes sense. When capturing the whole window, all screenshots must use the same size: 1024 x 768. Larger screen sizes are acceptable if they are really necessary, but should be avoided.
Font
The recommended font is Arial, which comes by default on Windows and Mac OS X. On Linux, there are instructions on how to install this font, see:
- http://lifehacker.com/272976/install-microsoft-fonts-in-linux
- http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/
(untested)
Another sans-serif font may be used instead of Arial. Just make sure that it is well-centered when used in the "circles with numbers" (see below) as some font may seem weirdly aligned depending on their base line.
Annotating screenshots
It is ok to annotate/highlight screenshots with numbered circles, rectangles and/or arrows. Here are the preferred settings. Try to stick as closely to them as possible.
A part of the screenshot can be highlighted either by surrounding it with a rectangle or by pointing to it with an arrow. Numbered circles are used when there are many parts to single out (too many arrows would become confusing). They can also be used to indicate an order to follow.
Circles with numbers:
- white border, 2 pixels
- blue background (#0066FF = rgb(0, 102, 255)), 50% transparency
- shadow, black, horizontal offset: 2 pixels, vertical offset: -2 pixels, blur: 3 pixels, 60% transparency
- text: white, Arial (sans-serif), 20pt
Rectangles
- blue (#0066FF = rgb(0, 102, 255)) border, 2 pixels
- shadow, black, horizontal offset: 2 pixels, vertical offset: -2 pixels, blur: 3 pixels, 60% transparency
Arrows
- blue (#0066FF = rgb(0, 102, 255)) stroke, 2 pixels
- shadow, black, horizontal offset: 2 pixels, vertical offset: -2 pixels, blur: 3 pixels, 60% transparency
