I have nothing bombastic to share this week - only a refinement on the age-old practice of screen capturing. But technology doesn't need to be new or shiny or in-your-face. Sometimes, the subtle technologies are the best.
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.
But back to the point of today.
When making tutorials (for faculty, staff, or students), it is important to give context to the image. For instance, when I make training material, it is important for me to not assume the audience is even remotely familiar with the software. Consider the following image which shows an entire screen in Blackboard:
 |
| 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. |
This is a little better, as I've trimmed off a lot of the unnecessary information. But one thing I like to do - a little artisan flair - is to trim just a hair more off the image. Looking at the bottom of the above image, it is unclear whether the text continues past the border, or if it is all contained in the text box. If I crop the image (or just capture it about half an inch up), then there is no ambiguity. If I could cut off the bottom half of the text, the reader knows that the text does, indeed, continue past the frame of the image. It's a subtle notion, but this simple maneuver can help visually inform the reader:
 |
| Cutting off the bottom half of text like a BOSS. |
This is much better! But I'm not done quite yet. The problem here is that I'm not doing the readers any favors by limiting the scope of the image exclusively to the area I'm talking about; someone who is reading my tutorial on Blackboard probably isn't that comfortable with Blackboard, and this picture yields no context. It's not easy to see where this particular region would appear in the framework of the software. So, I think I need to take another one that captures some of the surrounding area of the screen so readers can have a better feel for where the image came from. Guess I'll include part of the yellow Course Menu, just to give some context. This time, I'll still remember to cut off the bottom half of the text.
 |
| Nailed it! |
In this well-framed screenshot, the main focus is clearly on the text area. I've eliminated confusing unimportant information (like the address bar and bookmarks). I provided context for where this region is (by including part of the yellow Course Menu and part of the upper frame). I even cut off the text at the bottom (and the top!) to let people know something is happening beyond the bottom of the image, but it's unimportant.
But the art of the screenshot extends beyond the cropping of the image - you have to be aware of placing the image into the document. In general, I recommend a border (nothing obscene, but one or two pixels - abbreviated as "px" in editing software - should be sufficient). Just something to set it apart from the background (as a reference, the above images all have a 2px border.
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:
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... |
Don't forget that whenever you place any image on a page, you should add text to the "alt" tag. This is for visitors to your site that are visually impaired - the browser or screen reader will process the "alt" text in lieu of the photo. Sometimes you have to hard code this, but most editors have that functionality built in (in Blackboard, it's known as "Image Description", and in ANGEL, "Alternative Text":
 |
| I just added "alt" text to this image about "alt" text. Meta. |
So, I hope that this paints a nice picture of how to create a neat screen capture (and what to do with it when you're done). Remember that the detail and craftsmanship can speak volumes for your image.
How do you use screenshots? What are some ideas to add to making the "perfect screenshot"?
0 comments :
Post a Comment