How to create better screenshots for your site
Creating excellent screenshots of your work isn’t as straightforward as you’d think. Especially if you’re trying to highlight the finer details in your latest designs. There are tons of great iPhone mockups (like these amazing mockups for Sketch curated by Meng To) that you can use to frame your screenshots. And there is no shortage of browser mockups, either.
But if you need to resize screenshots at all, text and icons can get distorted—or they can lose their appeal all together.
We run into this whenever we’re getting marketing content ready for a new WordPress theme. In the screenshots, we need to be careful that the typography doesn’t become too blurry. It’s a shame because we spend a lot of time trying to get our fonts just right—and blotted, pixelated text doesn’t show users all that attention we’ve put into the details.
Creating detail shots as additional images
Additional images that focus on the details are always a good idea. Whether you’re using a loupe or creating magnified screenshots, these images will help bring attention to anything a viewer could pass over on first glance. For lots of projects, detail images will be absolutely necessary.
We use loupes to highlight settings on pages with lots of settings. It takes the focus off the small, out-of-focus details, and makes the in-focus details clean and crisp.
But detail-oriented images aren’t always the solution.
It doesn’t change the fact that the zoomed-out overviews have blotches or other flaws. In some cases you could get away with an imperfect screenshot—but in our opinion it’s better to be completely 100 percent confident in every image. Even if it takes a bit of extra work.
Why not post full-resolution screenshots?
Full resolution screenshots can be incredibly large files. And you’ll lose users if your page loads too slowly. You might also run into issues with server space. Most importantly, WordPress doesn’t scale and resample images as well as you can yourself. So those details you hoped to preserve might look terrible as a result.
Edit the details in your screenshots
If you’re lucky, you might be able to just sharpen your scaled-down image so the text looks more like text and icons look more like icons.
In extreme cases, you can recreate the details in your scaled-down image and place them over top of the images. As weird as it might sound, I retyped the screenshot text in this screenshot for our theme Render. I whipped up some text boxes and used them to cover the original text.
The result is an image with much clearer text details. In the image below, you can see the unedited mockup on the left, and the edited mockup on the right.
Don’t forget about file format
Although JPGs are generally smaller files, you might want to use PNGs for your screenshots to prevent visual distortion. Pretty Darn Cute Design has a great article called PNG vs JPG that lays out what can happen to an image that’s compressed as a JPG.
Take your time and get it right
Whether you’re an agency, a freelancer, or you’re setting up a new site for a client, you need to remember that your site is where people will see your work first. It’s hard to showcase web design through images—but when you have to, it’s worth it present yourself absolutely perfect.