Responsive screens: a laptop, tablet, and phone

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.

WordPress admin enlarged with a loupe

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.

Adding details to a screenshot

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.

An unedited screenshot next to an edited screenshot

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.

6 Comments

  1. Efrain June 12, 2015 Reply

    Thanks for the tips. I’m was about to create some screenshot for the “Features” section of my site so it came just on time.

  2. David Kartuzinski June 12, 2015 Reply

    Great article.

    The link to the mobile phone mockups doesn’t work. FYI.

  3. Chris McCoy June 12, 2015 Reply

    i love using placeit https://placeit.net/ generates them for you just drag and drop the image

  4. Emily June 12, 2015 Reply

    In mjy opinion. If your sceen shot have a few color like a sceen shot of software or WordPress tutorial, choose to save as Png-8. The file will much smaller with a better detail. Try to use numbers of color as needed. Then use tinypng.org before upload to your post. You will bit smaller. Worth it!

  5. Mohan June 29, 2015 Reply

    Hi,

    I use lightshot software for talking screenshots it is really useful to crop/save/select the area. But could you please let me know how did you got the circle effect in your screenshot ie; with magnifying glass.

    If it is with some other software can you let me know how t do it.

PSA: As of Sept. 29, 2017, you can no longer purchase themes from this website. We will continue to provide limited support, including bug fixes and security updates, until March 31, 2018. Thank you for everything. We'll miss you dearly.
+×