השוואת מהדורות

adding screenshot images to KB articles

We write Knowledge Base articles to work without screenshots but boy they sure do make things easier — especially for novice users. So please don't be shy about adding screenshots to the articles you work on. __TOC__ =What make a good screenshot?= *They illustrate a difficult to understand procedure. You don't have to have a screenshot for every step — just the ones where you want to make sure someone doesn't miss an important detail. *They match what the user sees on her screen. This is why we have the ability ([[How to use For|using <nowiki>{</nowiki>for} markup]]) to show Windows screenshots to Windows users and Mac screenshots to Mac users. *They include enough context that someone can tell what part of the interface they are viewing. *The use the current OS and Firefox default configurations. So that means, for example, Windows 7 aero and the latest Firefox with no customizations. The easiest way to get Firefox back to it's default state is to create a new profile that you use just for making screenshots. See [[Managing profiles]] for instructions. =Focus on making Windows screenshots= '''Windows users account for over 90% of our visitors. So a Windows screenshot will be seen, on average, 9X more than a Mac and Linux screenshot combined.''' Making screenshots is time intensive. If you only have time for one set, please focus your efforts on Windows screenshots. = 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} or {button Prnt Scrn} 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 = ''These instructions are for Ubuntu Linux with the Unity interface'' #First, control-click on your desktop, choose {menu Change Desktop Background} and make your desktop background white. #Next, set up the situation you want to screenshot. #Search for "Screenshot" and open the application Take Screenshot.<br>[[Image:screenshots-lin-1]] #If you set the delay to something like 5 seconds, you'll have enough time to open a menu or position your pointer over the place you wish to highlight.<br>[[Image:screenshots-lin-2]] #Save the image to your desktop (default). #Go to your desktop, double-click the screenshot and it will open with the Image viewer application. #Click the {button Edit Image} button to open the image in another application where you can crop it.<br>[[Image:screenshots-lin-3]] #Click {button Crop} and adjust the box around the area you want to keep. Then click {button OK} to crop the image.<br>[[Image:screenshots-lin-4]] #Finally, close the image and you will be given the opportunity to save your changes. #*Unfortunately, the built-in tools don't have any options for adding annotations or resizing the images. But hey! It's Linux so there are tons of free software that you can download to accomplish this. = Adding screenshots to articles = #When you're editing an article, just click the {button Image} button on the toolbar<br>[[Image:Insert Media Button]] #The insert media dialog will open. Click the '''Upload Media''' link a the bottom of the dialog.<br>[[Image:Insert Media 1]] #A new tab will open with the upload dialog. After you've upload your screenshot you can close that tab and return to the article.{note}'''Note for Localizers:''' Be sure to pick your locale from the dropdown menu in the upload dialog so we can keep screenshots organized.{/note} #Place your cursor where you want to insert the image and click the {button Image} button again. #Select the image you just uploaded and click {button Insert Media} at the bottom of the dialog.<br>[[Image:Insert Media 2]] #*The image will be inserted with the markup: '''<nowiki>[[Image:title]]</nowiki>''' #*Since we usually add an image at the end of a line of text you'll need to include a <nowiki><br></nowiki> (break) tag before it, making the markup:'''<nowiki><br>[[Image:title]]</nowiki>''' = 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. =Do we have to update screenshots for every visual change?= No! We'd go crazy if we did. For example, at one point we made a bunch of screenshots of the Options window that had the [https://support.mozilla.org/media/uploads/gallery/images/2011-01-27-07-08-51-52c5e2.png Sync panel last]. One of the last things they did before releasing Firefox 4 was to swap Sync and Advanced in the Options panel so that it looked like [https://support.mozilla.org/media/uploads/gallery/images/2011-06-01-15-29-17-74870b.png this]. Since the article was about the ''options'' listed in the window and the order of the icons at the top were not critical, we didn't change the screenshots right away (they eventually got updated when options in those various panels changed). As always, 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://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://skitch.com/ Skitch](Free) * [http://www.xnview.com/en/index.html XNView] (Free) '''Linux:''' * [http://www.xnview.com/en/index.html XNView] (Free)