How to Take Better Screenshots

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.