February 22, 2010 17

How to Take Better Screenshots

By in Design, Web Design

While highlighting the features of a product or a service apart from writing perceptive content, screenshots do play a key role. The images and screenshots need to merge well with the content to give the web page a perfect blend. As part of this article, I wanted to share some useful tips and tools to take better screenshots.

Cropping: If you are blogger or a designer, you might have come across cases where-in you need to take the screenshot on the entire screen but, the dimensions of the image need to be curbed to fit the template of your site.

In such cases, focusing on the important sections of the web page is a good option. Let me illustrate it with an example. Here, I would like to take a screenshot to portray the featured templates on mytemplatebox. As in the following screenshot, if I hit PrintScreen (Windows) then, the entire screen is captured and after reducing the dimensions, the image looks fuzzy with the text blurred.

Before

After

With minor changes, the image can be made much better and presentable as follows. So, what’s the trick?

  • Re-size your browser: If you would like to capture a major part of the screen relatively more in height then, you can get rid of the status bar, bookmarks and navigation bars until you capture the screen. To mention, in the above example, we could capture four thumbnails of themes rather than two by getting rid of the toolbars on the browser. It helps the reader get a better feel of the image and it’s subject matter.
  • Crop: Using your favorite image editor, you can crop the image to avoid unimportant parts of the image like advertisements, borders, links etc.,  In the above example, cropping out the sidebar links and adverts gave the thumbnails more space and ‘focus’ in the image.

Image properties: If your blog is based on WordPress then, you must be familiar with the ‘Edit Image‘ option. It enables you to edit image properties like alignment, links, border, dimensions, CSS class etc.,

Rather than dragging a large image in the WP editor, it’s better to constrain properties on the image to make sure the width and height of the image are relative. You can always return to the original dimensions of the image by clicking on the ‘Original Size’ option.

Apart the dimensions, you can add a suitable border to the image depending on the template background color. Whenever an image wraps around text, it would be good to give some vertical and horizontal spacing.

Alt’ and ‘title‘ tags will help you add a description to the image and further aid in relevance and ranking on search engines. As the latest version of WordPress sports an image editor, you can take advantage of the in-built features like crop, rotation, scale, re-size etc.,

Apart from desktop based software, there are many web applications which enable you to do image manipulations with ease.

I hope this article gave a brief insight about taking better screenshots. I believe this will definitely help you while writing articles and formatting web pages.

About: Srikanth AD:
Srikanth is a Web Developer and SEO. Check out his portfolio for more information.

Tags: , , ,

17 Responses to “How to Take Better Screenshots”

  1. What a great resource!

  2. 1) wow great post and great advice. I tend to only read the blogs that I find interesting .

  3. fine focus , hunt this from blogsearch after that good luck for you.just adjoin the rss feed to my reader,keep update!

  4. great information you write it very clean. I am very lucky to get this tips from you.

  5. wall sconces says:

    Amazing, I found your site on google poking around for something completely unrelated- now I’m gonna need to go the old posts. Good bye free time today, but this was a really spectacular find.

  6. I would like to express my appreciation for your post. That’s really great to know that there are such people like you who do their job very well and with such enthusiasm.

  7. Thanks for sharing this.

  8. Saw a link to this post over at Reddit. Thanks for posting it.

  9. Amy says:

    Thanks very much for sharing all of the great info! I am looking forward to seeintg more.

  10. Maria says:

    Informative post, bookmarked the site with hopes to read more!

  11. Kim says:

    Thanks so much for sharing this excellent content! I am looking forward to checking out more blogs.

  12. Great blog, saved the site with interest to see more!

  13. Thanks so much for posting a lot of this awesome info! Looking forward to reading more posts.

  14. Thank you so much for writing a lot of this excellent content! Looking forward to checking out more posts!

  15. Great blog, bookmarked the site with hopes to read more!

  16. Hello webmaster might I use some of the information from this article (paragraph exerpt) if I provide a link back to your site? Thanks either way, and hope you have a excellent day! Cheers !