Tutorial 1: How to create a tutorial panel in Preview

blank slate blackboard

A well designed digital tutorial needs to be simple, clean and visually appealing.  This tutorial is how to create those annotated screenshot images that are used in online tutorials.  The images in this post are in  fact sreenshots that I have annotated and uploaded to my blog post.


The tools that you require for this tutorial are as follows;

  • A mac computer or Laptop.
  • Mac application – Preview (free on all Macs)
  • Grab application – Free on all Macs
  • 💡 An idea for a tutorial

Create setup your desktop background as a solid colour.  In this instance I have used white as it is nice and clean and will work with the aesthetic of my blog.

1 Take a screenshot of feature or element.

preview-12 Open up the screenshot that you have just taken and open up in with Preview.


3 Open up screenshot with the Mac Application – Preview


4 You will need to use Mac’s own free application Grab

When you use Grab it will enable an option of a Timed Screen  in order to get a screenshot  image of the opened menu.  REMEMBER open this image in Preview.


This is a simple and effective way in which to create the instruction panels for an online tutorial.

If you would like a hand with a design project, please Get in Touch.

teamSimon is a Sydney based digital designer. He is the Director of a boutique digital design studio, Bailey Street Design located in the vibrant inner west suburb of Newtown.  Simon studied graphic design at Shillington College and specialises in web design for small and medium size businesses.  Simon and his team (Toby the studio dog) are passionate about visual communication in the digital environment

Leave a Reply

Your email address will not be published. Required fields are marked *