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.

Tools

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.

preview-2

3 Open up screenshot with the Mac Application – Preview

screen4.jpg

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.

screen6.jpg

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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s