I posted last November on TechSmith's Snagit extension for Chrome, and covered the basic mechanics and workflow of using Snagit (which is still my primary screen capture tool). But regardless of how you elect to capture screenshots (Google Screen Capture and Awesome Screenshot from Diigo are good), there is an art to screenshots. The following is a reproduction of the inner monologue that goes through my head as I create screenshots. I know this sounds trivial, but it is extremely important to craft the screenshot well. A picture is worth one thousand words.
By the way, in addition to being great teaching tools, images serve at least two other purposes. For starters, it's a bit more social because pages with no images cannot be shared on Pinterest (which is a great educational tool, by the way). Additionally, you might not realize that just because you view content one way doesn't mean that everyone else sees it the same way. Browser extensions change the rules a little bit. Even mobile views are different! This blog, www.FringeEdTech.com, is not organized in a graphical scheme for desktop computers. But the mobile site is:
|You never know when images will pop up.|
The lesson? Use pictures if you want to look great across devices, you want to be shared socially, and you just want to be cool.
|Help! Blackboard looks overwhelming!|
While this is a true depiction of how the screen looks (in this case, I'm showcasing Blackboard). there are a few tweaks that will make this a better image. I should really focus on the part of the screen that I'll be talking about (the main canvas where the text editor is). As it stands, this image is daunting. There is an awful lot of vestigial information in this image. For someone unfamiliar with bookmarks and extensions in their browser (or even unfamiliar with Chrome), this screenshot could be disconcerting. I don't need all the stuff on the screen - just a portion of it. That yellow Course Menu on the left side of the screen? That's a whole different topic, unrelated to the text editor box. So I can get rid of that, too:
|This is too simple.|
|Cutting off the bottom half of text like a BOSS.|
You also need to think about how the image looks on your page. Sometimes it's desirable to not have a border. If you want a transparent image, save it as a .png (or, less optimal, a .gif). Those file types are the most common for transparency. But again, you have to be careful - transparent images on a white background may be appealing, but if you (or someone else, or a third party extension in a browser) change the background color, all bets are off. I've included examples below of images that are full (like Dylan, the French Mastiff) and should probably have a border, as well as examples of my Iron Man helmet (if you haven't seen the creation process behind it, it's an interesting read).
Note that the following two examples are identical images, although one is transparent (which will most likely render as a white background on your browser), and the other is on a pink background (to demonstrate how transparent images might not be the best option). I intentionally did not put borders around these two images:
|Iron Man, dinosaurs, and dogs. Borders optional.|
|Ew. Just... ew...|
|I just added "alt" text to this image about "alt" text. Meta.|