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
- All screenshots should be the same format and size. Pick a size that goes well with your theme and stick with it.
- 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
- 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 Mashable.com – 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
- 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
- Lightshot - a simple version without useless stuff
- Fireshot – comes with built-in editing tools
- Screenshot Pimp – a few more options, still simple though
- Check out all the Firefox screenshot addons here.
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.
Gomez from Auto Glass
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.
Steve from Lift Chairs
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.
J from The Digital Life & Tools Blog
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).
John from Career Options
Good tips on adding screenshot in blogs…thanks for sharing!!!
Brett from Google Wave Tips
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.
Nathan Rodriguez
Nice effects, the final result is very eye catching. Good to see the use of free software too.
kemar
Thanks very much for these use full tips on screen shots , keep them coming.