Mini-tutorial: Creating awesome screenshots

The golden rule of blogging is offer valuable content.  This tip trumps a good design, flashy graphics, twitter integration, powerful links, even advertisements.

However, quality content can be improved with an applicable and eye-catching screenshot.  Here are some tips and tools for creating awesome screenshots for your WordPress posts.

Choosing the format

  1. All screenshots should be the same format and size.  Pick a size that goes well with your theme and stick with it.
  2. If your screenshot will not be of the entire page, pick a section of the site that is applicable to the topic of your post.

Choosing the screenshot

  1. Pick a section of the site to screenshot that is descriptive of the topic and has something to look at.  For example, don’t choose blank space or a generic graphic to focus on.  Rather, choose a piece of the site that is unique and shows something about what the website is about.

Here’s and example of a good and bad screenshot of – one of our favorite blogs.  For this example, we chose a 200px square image in JPEG format.

A bad screenshot
A good screenshot

Notice the differences?  The bad screenshot doesn’t indicate the website or anything about it.  What is that blog about?

The good screenshot indicates the name of the blog, several categories, even the overall color scheme.  It doesn’t matter that the entire logo isn’t shown, people will get the idea.

Formatting your screenshot

  1. There are a few things you can do to improve the quality of your screenshot after you’ve chosen how and what to snapshot.  You can add effects like an angle, dropshadow or even the famous “shiny table effect”.  Here are some examples:
The original screenshot without effects
A screenshot with a -25 degree arbitrary rotation.
With an added dropshadow

These effects were all done in the GIMP, a free graphics editor.  If you want to add the shiny table effect, check out this tutorial.

Choose the right tools

There are lots of options out there for taking and manipulating screenshots.  Here are some of our favorites:

Firefox addons

The other option

  • If you don’t want another addon, just use the Print Screen button on your Windows machine which will add a screenshot to your clipboard.  Simply paste it into your selected graphics editor into a file of your preferred size.  Drag it until you’ve got a nice focus and you’re all set!

Graphics editors

  • Photoshop – the cadillac of image editing with virtually limitless options.
  • The GIMP – a free option that comes with many of Photoshop’s features.
  • Grabit – a handy screenshot tool but limited advanced options.  Built purely for screenshots.

A few more tips when taking screenshots

  • Choose color – bright, vibrant colors add energy to your blog post.
  • Keep them small – screenshots are just a taste of a site and shouldn’t encompass the whole thing.
  • Keep them natural – don’t resize if you can avoid it.
  • Keep them applicable – if you’re creating a showcase post, or list of multiple sites, choose the first list item as your screenshot.
  • Have your own tips for a screenshot?  Leave a comment below.

9 thoughts on “Mini-tutorial: Creating awesome screenshots”

  1. Looks pretty tight. On this page, the only thing that was even slightly distracting was having the author/Gravatar in close proximity to the screen shot. We switched to Gravatars & bylines at the bottom of the article for this reason.

  2. I tend to spend a decent amount of time checking out the local competition and their portfolio pages.

    It always amazes me how complicated and showy some of their own pages are, which often translates to being buggy and not looking the same across different browsers. I get blown away that they get work in the first place, when a simple, quick, easy to navigate design is essential for any site, which doesn’t mean it doesn’t look nice.

    Personally, and admittedly this is because I use Linux, I am a fan of GIMP and have been using it for years. Leaning more towards the design/coding side of things, I find that it does everything I need and I have never wished I had photoshop installed since I have been using it.

  3. The last screenshot (rotated with shadows) looks great, but it’s high-maintenance — having to do that for every single photo.

    Although, if you’re organized enough, I supposed you could do it with scripts.

    Actually, come to think of it, I guess you could do the rotation with scripts as well (either with The GIMP or with ImageMagick).

  4. For any Mac users out there, if you press “Cmd + Shift + 3,” you should be able to take a screenshot. At least that was the default setup on my mac. I use screenshots a lot on my blog so this is good information. I hadn’t realized it was important to consider color scheme, logo, categories in a general screenshot.

  5. I was looking for a photoshop tut on showcasing screen shots when I came across this. It is a good solution and doesn’t take long if your doing many screen shots then you need a consistent view like this.

  6. Thanks nice tutorial. I did not know you could customize it so much. I have seen screen shots like the one that is no good and does not show what site is about. Make no sense to even have it if it shows nothing about the actual site.

Leave a Reply

Your email address will not be published. Required fields are marked *