What's in a Screen shot?

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.

Disclaimers

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 and am in no way writing for or endorsed by them.

Note

The software described here will be running on ‘Ubuntu’ with some aspects like Moodle running on ‘Windows’.

Tools

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 ‘ Virtualbox ’ - 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:

1. Create and layout the content.
2. Take the screen shot.
3. Adjust the image.
4. Combine with the content that the screen shot helps to describe.

The process

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.

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.

Conclusion

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.

And finally

What is your experience? What tools have you used and why? Or are you just happy with the ‘Print screen’ button?