Ever see a tutorial with a screenshot that looks like this?
If so, you know a tutorial is only as good as its screenshots.
Readers shouldn’t have to squint their eyes and hope the letters reveal themselves like in an optical illusion.
Ugh.
Let’s spare our readers the headaches. Here are the keys to taking beautiful screenshots.
The Need-to-Knows Before You Capture
In the second part of the post, I’ll walk you through the process of taking a great screenshot. But don’t skip the primer here! You need this background, or you won’t be properly equipped to execute the instructions.
The First and Only Rule: Capture a Big Enough Image
If you take one thing away from this post, it should be this:
You have to capture a large initial image.
It’s the most important thing you can do.
But if you don’t know much about digital images and terminology, you’re already lost. What is a “large image”?
What We’re Referring to When We Talk About Image Size
When we’re talking digital images, your image size is how many pixels wide by how many pixels long your image is.
When you take a screenshot, you want an image that’s a sufficient number of pixels lengthwise and heightwise.
What’s a Good Size for My Image to Be?
For rectangular-shaped, landscape-oriented screenshots, I tell Hit Subscribe authors to aim for at least 1,000 pixels wide. Whatever length you need to capture will be fine as long as your width is 1,000 pixels.
If you’re taking a portrait-oriented screenshot, you should be good if you can make your wide edge more like 500 pixels.
What Are Some Image Sizes I Can Use For Reference?
Before you get started, you might be wanting to familiarize yourself with what some different sized images actually look like. I got you.
- A favicon—those little custom images that show up in the tab of your browser when you visit a site—are usually 16 pixels by 16 pixels. Here’s what ours looks like.
- A thumbnail is usually in the low hundreds. Here’s what Hit Subscribe’s round logo looks like at 150 x 150 pixels.
- Here’s a logo that’s 500 pixels wide.
- But here’s what long, screen-length code looks like captured at 500 pixels wide.
- And here’s what that same code looks like captured at 1,000 pixels across.
When what you want to capture stretches across the whole screen like this, you can see why I recommend 1,000 as the minimum. Honestly, 1,000 pixels is often overkill. But overkill is better than underkill in the case of image size.
How Do I See What Size My Image Is?
There are a few ways you can see how big your image is.
- You can check the file data by right-clicking on your image file, selecting “properties,” and checking the width and height in “details.”
- Assuming you’re composing in WordPress, you see how big your image is by checking the image stats in the screen that appears after you upload your media file.
You can even take a quick glance at how WordPress is handling the image after you’ve inserted the image. This is always a good idea since WordPress sometimes automatically shrinks the image in the draft.
If you know you captured a large image but it’s looking fuzzy in the draft, check this setting—WordPress may have automatically inserted it at a smaller size. Very “helpful.” - Finally, you can know your image size beforehand by using an image capture tool that tells you how many pixels you’re capturing as you capture them. An example of a tool that does this is Greenshot, which I’ll discuss in more detail below.
Is There Such a Thing as Too Big?
If you’re capturing too large an image, you’ll have a huge file. This can certainly cause problems.
First off, WordPress (or whatever you’re using for hosting) might not let you upload it, and you can exhaust your storage if you’re uploading huge files.
Second, your page will be slow to load, and Google penalizes sites with slow page load times. It’ll hurt your SEO.
But better to have this problem than the opposite. Assuming you’re a beginner with digital images, you’ll do well to think of it this way:
You can always shrink an image, but you can never make it bigger.
That being said, how big is too big? At what point would you want to shrink things?
I would seldom advise working with an image that’s bigger than 2,000 pixels on its longest edge. Even 1,500 is pretty big. These numbers don’t have any conventional wisdom behind them. It’s just what I’ve come up with from working on a lot of images on a lot of blog posts.
There are exceptions to this rule—I’d never put this kind of limitation on infographics, for example. But if you’re reading a post on taking good screenshots, let’s save making beautiful infographics for a more advanced post 😀.
If you need to shrink an image down, you can use WordPress’s media editor or MS Paint’s resize feature. Below, I’m using WordPress. The number in the dimensions box refers to the pixel count. Just decrease it, and the software will decrease the other dimension proportionately—no calculators necessary. Always check to see that it still looks clear once you shrink it.
Enough Talk! How Can I Capture Good Screenshots the First Time, Every Time?
Finally, let’s get to the heart of the matter. How can you capture a large, crisp screenshot on the first try?
- Zoom in on what you want to capture if it doesn’t take up much room on your screen.
- Use your tool to draw a rectangle around the area you want to capture.
- If your tool didn’t tell you how big the image will be as you were capturing, check that the width is around 1,000 pixels.
- Upload!
Let’s break that down further.
What Are Some Good Screenshot Tools?
Of course, you’ll want a good screenshot tool.
I’m not a print-screen-and-crop fan. In my opinion, the best tools save you a step and let you simply draw a rectangle around what you want to capture.
If you agree, I have a few suggestions for you.
- I have a Windows machine, and if you have the same, the tool I like best for screenshots is Greenshot. Its customizable interface lets you automatically save screenshots to your clipboard, or you can have it open in their cool screenshot editor. In that editor, you can draw geometrically perfect shapes and arrows so that your callouts look professional. But my favorite thing about Greenshot is that, as you draw a rectangle around what you want to capture, it tells you how many pixels it will be. Takes the guesswork completely out of it!
- I don’t have experience with Macs, but I hear from authors that Skitch (owned by Evernote) or Monosnap are good options for screen capture. I don’t recommend Greenshot for Mac. It costs money, and I’ve heard reports that the Mac version just isn’t very good.
- Honestly, the trusty ol’ Microsoft Snipping Tool has never steered me wrong. If you need to do callouts or write on your screenshot, Snipping Tool is absolutely not the utility you want. But if you just want to quickly capture what you see on your screen and upload it as is, it’s fine. I have a keyboard shortcut that launches the Snipping Tool, and I use it almost every day.
What Are Some Techniques I Should Use When Capturing My Screenshot?
Here are the things that will guarantee your screenshots are clear and professional.
Don’t Edit the Image Specs to Make an Image Bigger—Only Smaller!
When I said you need a big enough image, I mean that the initial capture you do needs to be big enough, like with the bottom flower below.
You may already know that you can fidget with the specs of your image size in a program like MS Paint or WordPress’s media editor. As we discussed, this can help if you captured a huge initial image and need to size it down. But don’t ever use this to size up.
If you tried to resize the 300-pixel-width flower above by opening it up in, say, WordPress’s media editor and changing that width number to 3,000, you wouldn’t magically get a clear image. Even though it’s the right size now, it would be fuzzy. You’d have to capture all those 3,000 pixels in the first place to get the clarity you’re looking for. Your software isn’t smart enough to fill in the blanks and guess the right pixels to add to the image.
Same thing applies if you click on the image in WordPress and use the arrow to drag the corner and enlarge that way. It’s not going to help.
On a Related Note: Zoom in!
If what you’re trying to capture isn’t 1,000 pixels across, make it as big as possible on your screen without anything getting cut off. In browsers, you can hit CTRL and the + key (CMND and + on Mac) to zoom in quickly on the area your pointer sits.
Use Vector Callouts!
You want geometrically perfect circles, arrows, and highlights…unless, of course, you’re going for the hand-drawn aesthetic, like HS!
I’m sure you already know that a mouse-drawn arrow is always going to shaky and sloppy, no matter how careful you are. Undermining your credibility is not worth the shortcut.
So, how can you create these perfect shapes? If you don’t use the Greenshot or Monosnap screenshot editors, you’ll want to open your image in something like PowerPoint, Paint, Word, Keynote, or Apple Preview and use the shapes offered to you there. From there, you can export them as images…or just take another nice, big screenshot of what you just made!
Get Capturing!
That’s it, folks. Now that you’re armed with the right knowledge, tools, and techniques, you’re all set to start taking great screenshots.
Have any questions? Or maybe I missed a tool that you love for screenshots. Let me know in the comments, and I’ll update the post!
