WordPress School: Screen Capture Images

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.

In 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.

Once 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.

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.

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?

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.

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?

Jing Does Video

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

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.

• WordPress School: Image Lessons – Introduction
• WordPress School: Header Art Images
• WordPress School: Text on Images
• WordPress School: Call-to-Action Graphic Images
• WordPress School: Screen Capture Images

---

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

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---