On this page
- The role of a screenshot in documentation
- Screenshot guidelines
- To embed a screenshot in a page
- Screenshot applications
- See also
There are two main functions of a screenshot:
- To anchor a user on a page they are already looking at, or
- To help a user visualize something they haven't seen yet, but may want to explore
For the first, the overall context of the page is not as important because the user already has the context, so you can use a smaller area of the the entire screen. For the second use, beginning with a visual of a greater portion of the screen can be helpful to put everything into context, and then subsequent screenshots can be portions of that.
- Screenshots will be formatted to fit a 760 pixel wide area. If the screenshot is bigger than this, the image will be resized to fit. When an image is re-sized, it will get a little fuzzy, so if you are able to output your screenshot at 760 pixels or less, the image will be crisper.
- Whenever it would reduce ambiguity, highlight the area of your screenshot that is meaningful (see examples below).
- Keep annotation to a minimum to insure that it is simpler to re-create screenshots for future versions.
- Use red for annotation, as red stands out well against the default theme.
- Use the default Open Atrium theme to ensure consistency between screenshots
- Use numeric pointers to annotate areas that require some explanation, and then describe these references below the screenshot by number. (see examples below). Doing this will simplify the translation of the page.
- Avoid hotlinking to images to avoid future issues with the image not available. Instead, download the file and upload it as an attachment to the documentation page, as described below.
When you are creating or editing a documentation page and would like to embed a screenshot, use the following procedure:
Scroll down to the bottom of the page and click the + sign next to the File attachments title:
This will expand a form for you to attach a file. Select the file and click Attach. Once the file has finished uploading, you will see some additional details about the file, including it's path on community.openatrium.com:
Copy this path and paste it into the area of the documentation where you would like to add the screenshot.
The documentation pages uses a syntax called Markdown to embed images, so we will need to follow the pattern below:
![Alt tag of image](full_image_path.jpeg)
You would then wrap this code around the full path you just copied. If you click the Edit tab to edit this page, you will see this syntax being used for the embedded screenshots.
Before you save your page, be sure to un-mark all of the images as listed. Listed files will display on the documentation page, and since we don't need to offer the screenshots for download, we can remove them from the list:
In addition to the screenshots you see above, below is an example of using annotations in a screenshot:
1) Click the Create content link will take you to a form to add a new page
2) Clicking the Search button will open up a drop-down form to search
If the screenshot is central to the documentation page, then you can use headers for each reference, but be sure to preface the headers with the number.
- Mac: The screenshots you see above were created using Skitch, a free tool for Mac OSX.
- Linux: For Linux users, take a look at Shutter for a full features screenshot tool.
- Windows: For Windows or Mac users, Jing is also a nice screen capturing and annotation tool.