Goal: 
Make screenshots showing the problematic behavior on an issue. Screenshots are helpful for people coming to an issue, so that they can understand why it's a problem.
Skills required: 
Drupal site building
Making screenshots
Background and reference information: 
Find the issues for a project
Creating or updating an issue report
Issue summary field
Issue tags field
Detailed steps: 
  1. Set up prerequisites: Log in, and either be ready to set up an Online testing site, or have a Local development site set up, from Common Prerequisites for Contributors. You'll also need a way to make screenshots of pages in your web browser. (These steps assume you will be using an online testing site or can set up your local development site yourself.)
  2. Choose a project to work on, either Drupal core or a contributed module, theme, or distribution that you are familiar with and find the issues for the project.
  3. Search for issues with tag "Needs screenshot" -- use this link to search Drupal core for the tag, or learn more about searching for issues.
  4. Select an issue to work on. Read the issue and make sure you understand it. If not, find a new issue.
  5. Scroll to the bottom of the issue and add a comment saying you are making screenshots.
  6. Create an online testing site to make screenshots from -- see the "Using online Drupal testing sites" section of the Setting up a test environment page. In the Project field, select the project you are making screenshots for (Drupal Core or the contributed module, theme, or distribution). For the version, select the latest development branch that the issue applies to. (Branches are listed at the bottom of the version list, and end with ".x".)
  7. Follow the Steps to Reproduce in the issue summary, if the issue has them. If it doesn't, try to figure out how to reproduce the issue from the Problem section of the issue summary, and add the steps that you followed to the issue summary. (Learn more about editing the issue fields, including the summary.)
  8. Make one or more screenshots to illustrate the problem (the screenshots skills page has a list of software you can use). When making screenshots:
    • Only include the parts of the page that are relevant.
    • Make the browser window narrow, and/or crop the image to under 600px wide, so that when it is embedded in a comment in an issue, it displays clearly without being resized.
    • Make sure the image includes the URL of the page you took the screenshot of, or note it in a comment.
    • Annotate the image with arrows, boxes around parts to highlight, or words to help make the point of the image clearer.
  9. Post your screenshots to the issue. When posting screenshots:
    • Include a comment, explaining what the screenshots are.
    • Attach/upload the files in the Files section.
    • Embed the images into the comment with the HTML img tag.
    • Label the images in the comment by using a HTML header tag before each screenshot with a short caption.
  10. Remove the "Needs screenshots" tag from the issue.
  11. Edit the issue summary.
    • If there is no "User interface changes" section in the issue summary, add one (see sample HTML code in the issue summary template). Add a line under "User interface changes" noting which comment number has the most recent screenshots (the comment you just posted).
    • If there is no "Remaining Tasks" list in the issue summary, add one (see sample HTML code in the issue summary template). Add remaining tasks for example: update issue summary, get accessibility review, update patch, get code review, and any other remaining tasks you have found by reading through the comments and working on the issue. For the remaining tasks you add, add links to the Task documents if appropriate.