ElearningWorld.org

For the online learning world

Elearning WorldLearning designMoodle

What’s in a Screen shot?

Introduction

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 above 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 ‘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:

  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:

Screen shot showing the theme selector 'Window size' feature.

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:

Screen shot of the Shoelace theme at 800 by 600 pixels

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:

Screen shot showing to to blur something in a screen shot for privacy reasons.

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?  Please say in the comments.

Gareth Barnard
Latest posts by Gareth Barnard (see all)
blank

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Foundation, and other plugins such as course formats, including Collapsed Topics.

6 thoughts on “What’s in a Screen shot?

  • Pingback: Theme selector block - ElearningWorld.org

  • mahesh babu

    The game bar on windows 10 is a real good addition to screenshot tools.

    Reply
  • Gareth, on a PC, I use the Snipping Tool when I am in a classroom or meeting room without SnagIt. When generating classroom worksheets or teacher “How To” aids, I use SnagIt because of its post screen grab/capture features. It is easy to use and it publishes images at the same resolution as the screen grab. There is no noticeable degradation in image quality. SnagIt has a few useful features including: timed screen capture, scrolling screen capture, window capture, targeted capture, a load of post production tools and a really impressive video capture that can be used in a pinch to send a short screen sequence to a peer to clarify a process.

    As Stuart mentioned, I use screen grabs to help clarify IT service requests through grabs of error messages.

    Reply
    • Hi John,

      Thank you for your comment. I think that the Snipping Tool in Windows is one of those forgotten applications. One that’s been there since Windows Vista but underrated. However, useful when control of the choice of applications on the machine is lost.

      I’ve not used SnagIt before but have used BB FlashBack for screen recording. I also see that FireFox developer’s edition has window capture facilities now.

      Gareth

  • Awesome post Gareth !
    Over the last couple of months I’ve taken to using screenshots more and more, to explain technical queries.
    We have hosting client who may ask a question about something, and I can type a detailed and accurate answer.
    But often people ‘skim’ and don’t read properly – which results in them not understanding.
    As a Mac user, I’ve started just taking a quick screengrab (well, actually usually selecting a region), opening that with Preview (the default Mac image previewer) and then using the simple Annotation tools – rectangles, arrows, maybe adding some text … all in the colour red ! lol
    But this seems to really help people understand what I am explaining, and it takes about the same time as a typed answer.
    So if the communication is quicker and easier for others to understand, why not go this route !?

    Reply
    • Hi Stuart,

      Absolutely, even if red is an ‘angry’ colour!

      But I think that there is a common perception that screen shots take longer. Perhaps because it involves more than just the keyboard.

      Gareth

Add a reply or comment...