This article explains how to create a screenshot and how to edit screenshot images on different operating systems and devices, to use in Knowledge Base articles. To learn how to add screenshots and other images to KB articles, see Add images and screenshots to Knowledge Base articles.
Visual markers are key to making documentation clear and user-friendly. These markers draw attention to specific areas in an image, guiding users through each step of a process.
Outline color
Use a red outline (specifically hex color #f71701) to delineate significant sections of your screenshots. This color choice ensures that the highlighted areas attract immediate attention.
Corner style
Adopt square corners for the outlines to achieve visual harmony across your screenshot annotations.
Line thickness
Balance the outline thickness between 4 and 8 points (pt) to achieve uniform visibility across screenshots of varying sizes.
Align highlighted UI elements centrally
Align the UI element centrally within the red outline to enhance clarity and recognition.
Sequential step markers
Using sequential step markers on screenshots links each action within the UI to its corresponding text steps. This reduces ambiguity and the need for multiple images. It’s especially useful for longer instructions within the same window or context. By employing this method, you can show multiple instructions in a single screenshot with clear indicators for each action in the interface.
Here’s an example of an appropriate scenario for using this approach:
To add these markers to your screenshots, open the screenshot in your preferred image editor. Then, save the markers from the Sequential step markers list and place them in the appropriate sections of the screenshot.
Image preparation and editing
Size
Ensure screenshots are compact in size. To enhance loading times and accessibility, particularly for users on slower internet connections, it's best to keep the dimensions of screenshots under 620 pixels in both height and width.
Cropping
Ensure that larger screenshots are cropped to highlight the UI elements that pertain to the task at hand.
Simplifications
Simplify complex screenshots by eliminating non-essential UI elements, reducing cognitive load for users. Opt for muted grayscale tones like #D4D4D4 and #E0E0E8 instead of bright or dark colors. These lighter shades help to minimize distractions, allowing users to stay focused on the important parts of the screenshot.
PII
Eliminate all Personal Identifiable Information (PII) from screenshots, including emails, usernames, and any personal data that could potentially identify an individual.
Light mode
Capture screenshots in “Light Mode” whenever possible, as “Dark Mode” images may not be as easily discernible for some users.
Paint on Windows and Preview on Mac are useful software for cropping and editing screenshot images. You can also use freeware such as GIMP on Windows, Mac and Linux. Other editing tools are listed at the end of this article.
Screenshots on Windows
Once you have the screen presented the way you want for the screenshot:
Press the print screen key (Print Screen or Prnt Scrn or prt sc or PrtSc or PrtScr, depending on your keyboard). This key is usually found in the upper right section of your keyboard. To capture only the active window, hold down the Alt key, before you press the print screen key.
Go to the Windows Start menu and open up the Microsoft Paint program from the Programs list (look under Accessories).
Once Paint is open, click Paste and your screenshot will appear.
Save your image as a PNG file, in an easy-to-find location such as your desktop.
Cropping screenshots lets you edit a big image to show the readers only what they need to see.
Open the screenshot in Paint.
On the toolbar, click Select+Rectangular Selection.
Your cursor now looks like a compass. Use your cursor to draw a rectangle around the area you wish to show up in the final image.
Click Crop.
Screen grabs let you focus on a small portion of a picture inside a larger picture. You may want to show one button on a whole toolbar.
Open the screenshot in Paint.
In the Shapes toolbar, select the rectangle shape.
In the Colors toolbar, select the color red.
Your cursor now looks like a compass. Use your cursor to draw a red rectangle around the area you want to showcase.
Some screenshots come out large. But it’s best not to use screenshots that are more than 620 pixels long or wide. Here’s how to resize a big screenshot.
Open the screenshot in Paint.
Click Resize on the toolbar. A Resize and Skew window opens.
Check if the height and width are both under 620 pixels. If they’re larger, type a smaller number into either the horizontal or vertical bar.
Screenshots on Mac
Once you have the screen presented the way you want for the screenshot:
To capture the screen, hold down the Command key, as well as the Shift key, as you press 3.
To capture a specific section, hold down the Command key, as well as the Shift key, as you press 4; then select the area you want to copy.
To capture a specific window, hold down the Command key, as well as the Shift key, as you press 4; then press the Spacebar. You can then click on a window to capture it.
As a result, there will be a PNG file on your desktop.
Cropping screenshots lets you edit a big image to show the readers only what they need to see.
Open the screenshot in Preview.
Click on the toolbar. A second toolbar opens.
Your cursor now looks like a compass. Use your cursor to draw a rectangle around the area you wish to show up in the final image.
Click Crop.
Screen grabs let you focus on a small portion of a picture inside a larger picture. For example, you may want to showcase one button on a whole toolbar.
Open the screenshot in Preview.
Click Tools > Annotate > Rectangle.
A red rectangle appears. Adjust the rectangle so that it fits around the area you want to showcase.
Some screenshots come out large. But it’s best not to use screenshots that are more than 620 pixels long or wide. Here’s how to resize a big screenshot.
Open a screenshot in Preview.
Click Tools > Adjust Size. A window opens.
Check if the height and width are both under 620px. If they’re larger, type a smaller number into either the height or width bar.
Make sure Scale Proportionally is checked and click OK.
Screenshots on Linux
Once you have the screen presented the way you want for the screenshot:
On Ubuntu Linux, click the Applications menu, go to the Accessories folder, and select Take Screenshot.
In other cases, depending on your desktop manager, you can use KSnapshot or Gnome-screenshot or use the Print Screen or Prnt Scrn or prt sc or PrtSc key, depending on your keyboard, to capture your screenshot.
Screenshots on iOS devices
Once you have the screen presented the way you want on your iPhone or iPad:
Press and hold the Sleep/Wake button, then immediately press the Home button.
Your screen will flash white for a second and the device will make a camera shutter noise (if the volume is on) to indicate that the screenshot has been taken.
The screenshot is now stored in your photos app for you to view.
iOS devices: iPhone 6 devices & above, the Sleep/Wake button is on the right side of the device.
Screenshots on Android devices
Once you have the screen presented the way you want on your Android phone or tablet:
Press and hold the Sleep/wake button and the volume-down button simultaneously. The screen flashes.
Find the screenshot in the Gallery app.
Send the screenshot to your computer. If you want, edit the screenshot in an image editing software such as Paint or Preview.
On Android phones running stock Android with Android version 9 (Pie) installed, you can simply press and hold the power/lock/unlock button, which will cause the Power menu to display. From within the Power menu, select Screenshot (the third option at the bottom of the menu) and a screenshot will automatically be saved to your phone's gallery.
Not all Android devices work the same way. If the above methods don't work and your device has a home button, press and hold the home button and the power button at the same time, until the screen flashes. For other methods, see these articles:
Last updated:
50% of users voted this helpful
