Comparer Barevision

adding screenshot images to KB articles

A picture is worth a thousand words, and can go a long way in helping people understand what is being said in an article. A screenshot is an image (i.e. snapshot) of your computer screen or portion of the screen. On the Firefox Support Knowledge Base, we don't want people to be shy about adding screenshots. __TOC__ = Creating Windows screenshots = ''These instructions use the Windows 7 built-in print screen command and the Paint program.'' #First, turn on the default Windows 7 Aero theme and make your desktop background white: #*Right-click on your desktop and choose {menu Personalize}.<br>[[Image:screenshots-win-1]] #*Under Aero Themes, select '''Windows 7'''. #*Then click the '''Desktop Background''' link at the bottom of the window and choose a solid white background. #Next, set up the situation you want to screenshot. When you've got it how you want, press {button Print Screen} on your keyboard. #Go to the {menu Start} menu and open up the Paint program. #Once Paint is open, click {button Paste} and your screenshot will appear.<br>[[Image:screenshots-win-2]] #Now let's crop the image to just the relevant part: #*Make sure you have the rectangular selection method selected <br>[[Image:screenshots-win-3]] #*Then use that rectangular selection to draw a box around the area that you want to include...<br>[[Image:screenshots-win-4]]<br>... and then click {button Crop}.<br>[[Image:screenshots-win-5]] #Use red callouts to highlight things (like what people should click on) in the screenshot.<br>[[Image:screenshots-win-6]] #When you are done cropping and highlighting, scale down large images to less than 650 pixels wide so they will fit on the page properly.<br>[[Image:screenshots-win-8]] #Finally, save your image as a PNG so you can upload it to the media gallery.<br>[[Image:screenshots-win-7]] = Creating Mac screenshots = ''These instructions are for Mac OS 10.7 Lion and the Preview application.'' #First, control-click on your desktop, choose {menu Change Desktop Background...} and make your desktop background white.<br>[[Image:screenshots-mac-1]] #Next, set up the situation you want to screenshot. When you've got it how you want, press {button command + 3} on your keyboard and a screenshot will placed on your desktop. #Go to your desktop, double-click the screenshot and it will open with the Preview application. #Now let's crop the image to just the relevant part: #*Use the rectangular selection to draw a box around the area that you want to include... #*... and then go to the {menu Tools} and select {menu Crop}.<br>[[Image:screenshots-mac-2]] #Use red callouts to highlight things (like what people should click on) in the screenshot.<br>[[Image:screenshots-mac-3]] #When you are done cropping and highlighting, scale down large images to less than 650 pixels wide so they will fit on the page properly.<br>[[Image:screenshots-mac-4]] #Finally, save your image as a PNG so you can upload it to the media gallery.<br>[[Image:screenshots-mac-5]] = Creating Linux screenshots = On Ubuntu Linux, once you have got the screen presented the way you want for the screenshot, click the {menu Applications} menu, go to the {menu Accessories} folder, and select {menu Take Screenshot}. In other cases, using the {key Print Screen} or {key Prnt Scrn} key will also work. = Screenshots and file size = We do a couple of things to limit how much data has to be downloaded when you visit a Knowledge Base article: *We automatically compress all image uploads so that each file is small. *We only load the images for the selected platform. So if you are viewing an article with Windows, we only load the Windows screenshots. If you then change the '''Article is for:''' setting in the sidebar to another platform (like Mac OS X), we'll then load the screenshots for that platform. =Screenshots and localization = Knowledge Base articles are written to work without screenshots. Screenshots are a great bonus that make it easier to understand an article but they are not a required part of the article. Obviously, localized screenshots are ideal but if that's not possible, it's perfectly appropriate to remove the English screenshots. = Adding screenshots to articles = Upload the image to the [http://support.mozilla.com/gallery/ Media Gallery], then use the [[Markup chart|markup]] <nowiki>[[Image:xxx]]</nowiki> when you edit the article to add the screenshot, where xxx is the name you gave the image you uploaded. = Using screenshots for different versions of Firefox = [[How to use For]] explains how to show different screenshots for different versions of Firefox. If the differences in screenshots from one Firefox version to another do not have anything to do with the content of the article, you can continue to show the screenshots from an older Firefox version. For example, a Firefox screenshot of the [[Options window - Privacy Panel]] may be missing a Sync icon in Firefox 3.6 but it can still be shown for Firefox 4 if the article has nothing to do with the Sync panel. Similarly, a screenshot of the [[Options window - Privacy panel]] created in Firefox 4, which does not contain the "Tracking" option, is fine to show for Firefox 5 if the the article has nothing to do with the tracking feature. Use your best judgement. If it seems like the image for the previous Firefox version will help and not be confusing, then use it. = Other screenshot tools you might find helpful = == Windows == * [http://www.techsmith.com/screen-capture.asp SnagIt] (30 day free trial) * [http://en.wikipedia.org/wiki/Microsoft_Paint Microsoft Paint] (built into Windows) * [http://www.irfanview.com/ Irfanview] (Free) * [http://www.getpaint.net/ Paint .NET] (Free) * [http://www.xnview.com/en/index.html XNView] (Free) * [http://www.gadwin.com/download/index.htm#AutoNumber10 Gadwin PrintScreen] (Free) == Mac == * [http://www.xnview.com/en/index.html XNView] (Free) == Linux == * [http://www.xnview.com/en/index.html XNView] (Free)