Skip navigation

WordPress School: Screen Capture Images

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In this mini-series of tutorials helping you learn how to create and use graphic images in your WordPress site, we’ve covered header art images, adding text overlays to images, and made a call-to-action graphic with a link wrapped around it, all common uses of images with WordPress sites. I’ve also introduced you to the free online web app Autodesk Pixlr, a powerful graphic editor.

In this part of the image lessons, the last in the series, I will teach you about creating a screen capture.

A screen capture is an image taken of your computer screen. Screen captures are used often for all types of web content, demonstrating software, web apps, mobile apps, tutorials, techniques, and more.

Images - Screen Capture with camera - Moire Pattern - Lorelle WordPress SchoolIn the old days of computers, we experimented with cameras, adjusting the shutter speed of the camera pointed at the screen so the Moire pattern wouldn’t appear. It was difficult to get a sharp image.

With the need to capture an image of the screen for tutorial purposes as well as to provide a visual image to help support staff literally see what the user was seeing, the PRINT SCREEN (PRNT SCR) was added to most keyboards and incorporated into most operating systems.

Once you capture an image, then what? You must save it. How?

In Windows, you can paste the Print Screen captured image into any graphic program, including Microsoft Paint, or use the Microsoft Windows Snipping Tool.

On the Mac, you have the ability to use CMD+SHIFT+4 to initiate the screen capture, then drag the cross hair pointer over the area. Click when done to capture the screen. Then paste the image into a graphic program or work with the image saved as a PNG file to the desktop (since OS X v10.6).

There are many other tools to capture the screen for different operating systems. While these are helpful tools, and many use these and nothing else, I’m going to introduce you to a tool that makes the process easier and faster all around.

TechSmith Jing Screen Capture Tool

In this tutorial, as with all of my tutorials on this site, I use two tools to capture the screen in still images: PaintShop Pro and Jing by Techsmith. While I use PaintShop Pro for most of my graphic work, you may use the graphic program of your choice and it may have the ability to capture the screen built-in as does PaintShop. Check the help files and feature list of your graphic program for specifics on how to capture the screen.

I tend to skip all the fuss and use Jing daily. It allows you to capture images on your computer screen as well as do video capture. It requires registration but is free. The images are saved as PNG files.

Images - Screen Capture with Jing - yellow sunshine bubble - Lorelle WordPress SchoolOnce you’ve quickly installed Jing, a small yellow bubble or sun will appear at the side of your monitor screen. Look around the edges.

Hover over the yellow bubble and three options will expand out. To create a screen capture:

  1. Hover over the yellow bubble and choose the plus
  2. Click and drag the guidelines around what you wish to capture on the screen
  3. When you release the mouse, you may click and drag the edges to resize the area to capture
  4. When ready, at the bottom left of the Jing capture area, click Capture Image
  5. On the next screen, you will be able to add highlight, arrows, circles and boxes, and words to emphasize elements on the image
  6. When ready, click Save and save the file as a PNG where you can find it again

If you wish to resize or edit the image, you may choose Copy to copy the image and paste it into your graphic editing program and edit it further.

Images - Header Art Project with Pixler - Screenshot example with Jing and layers of instructions - Lorelle WordPress School.

Jing features tools to annotate the screenshot. Located on the left side of the screen is the arrow, text, boxes, highlighter, and color selection tools. Select the color first then the tool to color the tool.

I have used Jing for many years and do so on a daily basis. It is a powerful and easy to use screen capture tool. The only drawback is that it saves file names with underlines between the words. When imported into WordPress, the underlines are preserved in the Title of the image in the Media Library and requires change for readability.

I use a free utility program called Rename Master by Joe Joe Soft to do a search and replace of the file names to remove the underlines and replace them with spaces. I’ll go into this in more depth later in the course when we talk about all the tools it takes to blog with WordPress.

Screen Capture Tips

Jing and other screen capture tools make it easy to capture the screen, but there is more to making good screen caps.

Most importantly, width matters.

Consider the following two examples. In the first, I’ve set the browser window to stretch the full width of my computer monitor and created a screen capture of the feature I want to talk about in my tutorial.

Images - Screen Capture full width of computer monitor - Lorelle WordPress School

Can you find the feature I am talking about? Whatever the topic, it is lost in the full width of the image and the unnecessary empty space of the spread. The feature is too small to see.

By changing the window width to a narrower size, I can bring the elements together in the screen capture image, but is it really clear what feature I’m addressing?

Images - Screen Capture narrow width of window - Lorelle WordPress School

Not really, so I add an arrow to point to what I’m talking about in the tutorial article. More helpful, but can we do better and really help you see what I’m talking about in a way that you get it without working at it?

I’ll add a red arrow pointing to the feature.

Images - Screen Capture narrow width of window with arrow - Lorelle WordPress School

This is the same as standing in front of the screen pointing and saying, “Look here! Look here!”

While this works, and it displays the entire Admin screen in WordPress to help the user find the element on the screen. What if I put the entire focus on the feature?

Images - Screen Capture focused on feature with arrow - Lorelle WordPress School

Jing Does Video

Lorelle WordPress School Tips and Techniques Badge.Jing also captures the screen with video stored as SWF (Shockwave Flash). Due to the security issues of Flash, WordPress.com and self-hosted versions of WordPress do not permit uploading of Flash directly, however, if you are on a self-hosted site, there are options to add to your Theme files to permit Shockwave Flash files.

If you wish to use the video captured from Jing, I recommend you either pay for the Snagit tool by Techsmith, buy Camtasia screen recording and editing tool, or use a free video converter such as Any Video Converter, and upload the video to YouTube for embedding in WordPress.

With the screen capture reduced to the specific feature, and a small arrow to point out what aspect I wish to address, my visual point is clearer.

Experiment with window resizing and zooming in and out to increase the text size (CTRL/CMD+Plus or Minus) to put the focus right on the point you wish to illustrate.

Here are a few other tips for creating powerful screen captures or screenshots.

  • Don’t try to fit it all in, focus on the specific element you wish to highlight
  • Avoid too many arrows and pointers as it adds confusion
  • Avoid the use of bright orange red text and arrows in the screen captures. The red radiates on a screen and makes it vibrate for some people. I used it in my examples to demonstrate the effect if you are sensitive to the color on the screen. Choose bright pastels or solid white and black when possible.
  • Bright white areas in graphics tend to distract and blind the eye, overwhelming it in low light situations, and may make the features within the visual area hard to see in bright light conditions. High contrast is your best bet when working with extreme black and white tones, even resorting to black backgrounds with white text when appropriate.
  • When possible, use centered and full-width, and set the image always as an attachment to allow the visitor to see the larger size
  • If the screenshot is out of focus for some reason, use a graphic editor program to sharpen the image
  • Protect your privacy and the privacy of others by blurring out email addresses, phone numbers, passwords, and other private information on the screenshot

Assignment

Lorelle's WordPress School Assignment Badge.Your assignment is to create some screen captures and annotate them.

You may use Jing or another graphic editor with screen capture, or use the screen capture features of your computer and edit the image in a graphic program such as Pixlr to add arrows and text to the image.

If a screen capture image will suit your article series in your test site, add it.

At the very least, write a quick tutorial on your test site on how to do something with an annotated screenshot or two.

Share the results. Please find this assignment post on our WordPress School Google+ Community and describe your experience and post a link to the post, or comment below with a properly formed HTML links so other participants can see what fun you are up to in this course.

Image Lessons Article Series

Image Lessons is a mini-series within Lorelle’s WordPress School to teach you the very basics of how to create and modify images for your WordPress site.


This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


2 Comments

  1. Posted March 25, 2015 at 10:54 pm | Permalink

    I read the tutorials but my comprehension just does not kick in. Once I am in the classroom, it brings the information much clearer. It helps to be able to refer back to the tutorials after class to help the concept sink in.

    • Posted March 26, 2015 at 6:05 pm | Permalink

      That is what they are here for. And practice makes better, not perfect. LOL! You are doing great. Keep going.


4 Trackbacks/Pingbacks

  1. […] WordPress School: Text on Images WordPress School: Screen Capture Images […]

  2. […] WordPress School: Screen Capture Images […]

  3. […] WordPress School: Screen Capture Images […]

  4. […] WordPress School: Screen Capture Images […]

Post a Comment

%d bloggers like this: