get connected

Screen Shots

Phillip Benson

Every webmaster knows the problem: How do I capture the image on my screen to use on my website? That depends on exactly what you want to capture, of course.

The easy answer is simply to press 'Prt Scr' and then save a copy of the image on your site. If you only want to capture the active window, then hold down the Alt key before pressing 'Prt Scr'. As the advert says "Simples!"

The problem is, it isn't always that simple …

Phillip Benson

What if you … ?

  • want only part of the screen
  • want to include the pointer
  • want only the pointer
  • need a specific toolbar
  • need separate regions of the screen

Then you need a tool to do the job. Luckily, there are a few on the market, one of which is HyperSnap from Hyperionics at a cost of $35.

A few screen capture programs are listed at the end of this article.

HyperSnap allows you to ...
Part screen shotCapture part of the screen

By dragging over an area, you can select a discreet part of the screen and then save it.

 

It would be tempting, at this point, to simply save it in your images folder on the website and link to it, resizing it to fit the page as required. Therein lies a problem.

Each file on a website has to be downloaded to the user's browser before it can be displayed. An image that has been resized in a web design program for display purposes can impact on the performance of the site.

If the image has been saved, imported, and reduced on the page for display, the size of the file that needs to be downloaded is larger than necessary.

If the image has been enlarged (stretched) the image file does not contain enough information to enable the image to be properly displayed and can look very 'blocky'.

Always resize the image in Photoshop (or the program you use) to the finished size in pixels that you will need it to be displayed before saving it to your images folder on the site. It will now contain all the information needed, but no more and will display correctly without overloading your Internet connection

Screen shot with pointerInclude the pointer

If you are required to show the pointer, for a program training manual, for instance, it is useful to be able to include the position of the pointer on the screen.

Any tool tips being displayed are also captured, as you can see.

You can also capture just the pointer ...

cursor  pointer  hand

A specific toolbar ...

toolbar

... or separate regions of the screen in one go ...

regions capture

It can also capture a complete web page in one go, including the bits you would need to scroll to see, DirectX images, and lots more.

So, if you want more than Windows gives you, HyperSnap or one of the other capture tools around, can solve the problem.

Posted 1 June 2009

Links

HyperSnap The program outlined above.

Snagit by Techsmith

Fullshot by Inbit

www.sxc.hu Loads of (mainly) free images you might find useful if you can't get it from your own PC's screen.

Copyright © 2009 - 2010      The Association of Masonic Webmasters
Terms and Conditions     Contact Us