Screenshots, have you ever wondered about them? Are they something that make you think twice? Do you just take them and crop to what you need?
Screen shots represent the pictorial representation of the user interface and content. That UI and content might not be your own creation, so you need to take care in what you publish.
In this article I’m describing my own experience and thoughts as an opinion. In no way do I intend to show one particular product in a better light than another. It is based on my experience of creating the ‘The Complete Guide to Collapsed Topics‘ book and the ‘MoodleBites Theme Design Level 1‘ course.
Firefox® is a registered trademark of the Mozilla Foundation.
Ubuntu® is a registered trademark of Canonical Ltd – www.ubuntu.com/legal/terms-and-policies/intellectual-property-policy
Windows® is registered trademark of the Microsoft Corporation.
Oracle® is a registered trademark of Oracle® and/or its affiliates. Other names may be trademarks of their respective owners.
Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.
I am independent from the organisations listed above and am in no way writing for or endorsed by them.
The software described here will be running on ‘Ubuntu’ with some aspects like Moodle running on ‘Windows’.
So what tools do you need besides the ‘Print Screen’ button and a graphics program to edit and crop the image? What if it could be easier and only select the area you need? To this end I discovered ‘Shutter‘ for Linux, it allows you to capture the whole desktop, a selection or a particular window and with the option of a ‘delay’ between initiating the screen shot and it taking it. This I have found particularly useful.
My setup is a little complicated. I currently have a Windows 10 machine which runs my Moodle development environments via a bespoke configured Apache, MySql and PHP installation. To test in other environments I do use Ubuntu. This is running on my NetBook but sometimes you want to only use one machine so that transfer of clipboard items and local network access is easier. So I use ‘Virtulbox‘ to run an installation of Ubuntu. Then I can take the screen shots on it, transfer the images (via Samba) to then edit with Paint.Net on Windows.
But whatever your setup the principle process is the same:
- Create and layout the content.
- Take the screen shot.
- Adjust the image.
- Combine with the content that the screen shot helps to describe.
Creating and the layout of the content
You create screen shot(s) not as a single entity but rather as an aid in describing pictorially concepts you are communicating. Therefore they have a context and with a series of screen shots you want them to look consistent and professional. To this end having them all the same size (even if they responsively resize on a web page) adds that extra element of clarity. I found this difficult to do, especially when going back and reopening the browser. Asking myself ‘did it remember the same dimensions?’. To this end and to eliminate doubt I added a new feature to my ‘Theme selector‘ block which allows you to ‘Create window’ for a given size:
this ‘pops up’ a new browser window with the internal ‘browsing’ dimensions as the ones you have specified. Then you’ll have an image that is exactly those dimensions:
and more importantly, subsequent screen shots can be the same.
That’s the technical aspect of the step, but what about copyright? Do you have permission to show the content? For the most part at all costs I attempt to only show content I have actually created or in the case of the screen shots here containing elements such as FontAwesome and Moodle icons that have permissible licences. Because principally you know if it’s your own work then there is no copyright issue and thus saves time.
Take the screen shot
Using Shutter (or any other screen shot tool) can reduce the amount of editing later to crop the section that you want because it captures in the first instant what you want.
Adjust the image
Now that you have an image, most image editing programs will help you not only crop but also you can use blurring and distortion features to hide any sensitive / private information:
Combine with the content that the screen shot helps to describe
This is where the adage ‘A picture speaks a thousand’ words comes to mind as they help to add information to the text you are communicating. But don’t forget to add a description for accessibility.
Screen shots are great but do need thought about their use. They are time consuming to produce beyond just writing text so you do need to consider this in your workflow. However they do aid and enhance the explanation.
What is your experience? What tools have you used and why? Or are you just happy with the ‘Print screen’ button? Please say in the comments.