Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

DocTeam/Official Documentation Screenshots

From TYPO3Wiki
Jump to: navigation, search
This page belongs to the Documentation Team (category DocTeam)

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:


notice - Note

Results may vary depending on the screenshooting tool used. As such you should try to stick to these guidelines as much as possible, but it's not necessary to adhere to every single setting.

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:

(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.

A typical screenshot with the various types of annotations

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

Sample PNG Images:

Circle 1.png Circle 2.png Circle 3.png Circle 4.png Circle 5.png Circle 6.png Circle 7.png Circle 8.png Circle 9.png Circle NULL.png

Download Sample as PSD File:Circle.psd

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

More information

For more information see Documentation images.