In order for the screenshots to be understandable by as many users as possible, you should reset your interface to remove any customization you've made. Otherwise, users might be confused about differences between the screenshots and their own interface.

If the feature you want to document is available to unregistered users, the easiest way to reset your interface without messing up your account and preferences is to open your browser in "anonymous", "privacy" or "private browsing" mode.

If you need an account to use the feature, you can either create a new account specifically for the purpose of making the screenshots, or you can use your regular account after disabling your custom scripts and gadgets that change your interface.

Change the zoom level of your browser, so that the screenshots are of the highest resolution possible. This can usually be done through a menu, or by pressing Ctrl++ several times, until you reach the maximum zoom your window can accommodate to display the feature you want to illustrate.

For example, if you just want to illustrate a specific button, you can increase to the maximum zoom level, even if the rest of the interface looks weird or impractical.

On the other hand, if you want to illustrate a menu like the template editor in VisualEditor, you can increase the zoom level, but it's likely that you won't be able to use the maximum zoom, otherwise important features will be missing from the screen.

To take a screenshot on an Apple computer, use the keyboard shortcut: ⌘ Command+⇧ Shift+3 to take a screenshot of the whole screen; to take a screenshot of part of the screen, use the keyboard shortcut ⌘ Command+⇧ Shift+4, and then drag the crosshair pointer to select the area. Continue to press the mouse button until you are ready to take the screenshot, then release the mouse button.

In the image editor, use the rectangular Selection tool to select the area you want to keep, then use the Crop function to remove the rest of the picture. This process differs between image editors; a quick look at the manual or a search online should provide you with the specific process for your software.

Only keep the part of the picture you want to show. This will make it easier for users to understand what you mean by minimizing distractions. This will also make it easier to determine the copyright status of the picture: you should remove any logo, images and text content unless they're necessary for the screenshot. Most of the time, if your goal is to document the interface of the software, you don't need to show the content of the page you're using it on. See Commons:Screenshots#Software for more tips.

When the cropped picture is ready, give it a descriptive name and upload it to Commons. The following link should direct you to the proper process: commons:Special:MyLanguage/Commons:Upload/screenshot. If you're taking a screenshot of MediaWiki, choose the first option (GPL), since that is the software's license.

If you're including images in your screenshot, try to choose images that are in the public domain, to keep things simple.

If you're including a significant amount of text (for example a whole paragraph of an article), you'll need to credit the page' authors in the upload form. Use the copyright tag {{Wikipedia-screenshot}} to take into account the different components of the image.