Guidelines for Taking Screenshots
Who is Your Audience
Do you really need to be showing this or is a bit of text going to do the trick?
What Are You Trying to Show
Narrow in on the element on the page that you are focusing on.
How Little Can You Get Away with Showing.
- Size: The smallest screen size we support is 800px wide x 600px high. If you want everyone to be able to view your screenshot in one screen without scrolling it needs to be 600px wide by 388px. Other than that, keep every screenshot to 600px wide. To do this in a browser copy this code: "javascript:resizeTo(600,600)" and paste it in the address bar of the page you want to take a screenshot of. Press Enter. Your browser window will be changed to that size. Length of the screenshot is not crucial. Width is. Due to the sidebar appearing to the side it is necessary to allow enough room for the sidebar to show up and any padding, borders or buttons that we place around the screenshot.
- Borders: Do not include any borders. We will add them in html. Unless it is a screenshot of a dialog box that has unique borders i.e. the title of the application appears in the title area of the window's border don't include them. If your method of shooting screenshots does not allow you to crop out the border of a window, the WDC will crop out the borders for you. If all of the images are the same size this greatly decreases the amount of time it will take us to do that. Please indicate if the window border is integral to the meaning of the screenshot by typing in red "screenshot needs window border" under the screenshot in the word doc that you will give us.
- Extraneous graphics: Do not include any extraneous graphics; buttons, borders, banners in the screenshot. Anything that does not have to do specifically with what you are trying to convey in the image should not be included when you take the screenshot. If you include those elements it increases the download time for users and adds unnecessary complexity to an image of something they don't understand in the first place that you are trying to explain to them. Make it easy on people.
In Microsoft Word
If you are laying these screenshots out in Word and you are circling things and pointing to things with arrows try not to use arrows. A square box around some content is more desirable than a circle or oval. Most content comes in boxes, so go with that shape. It will make it much cleaner and easy to understand. The WDC will add a 20% black rectangular mask which will mask out everything that is not being discussed in the screnshot, so keep that in mind.
- Alt Tags - In Word right click on an image, go to "fomat picture", click the "web" tab, type in the meaning of the picture. If this picture wasn't here, what would we be missing? That way the WDC can tell what to put as the alternate text of the image on the html page.
Source Art
Make sure you provide the Web Designer with the source artwork either in .png or .tif format. Do not give us jpgs. If we edit the jpg and re-export it as another jpg, it loses graphical integrity (the image quality gets worse). If you are showing screenshots that people might need to read this might present a problem. It is also the desire of the Designers here at the WDC to provide the best quality images possible. Please help us reach this goal.