The "How to Create a Tutorial" Tutorial
Computing Resources >> Tutorials >> Getting Started >> How to Create a Tutorial


The Outline

The Handout

The Website

The Video

Uploading Your Files

Evaluate this tutorial

PDF Handout


The Handout

The more time you spend on the handout, the less work you’ll need to do later on in the process. Why create the handout now? This will help you organize your work (and take advantage of MS Word’s spell and grammar check). You can also create all of the graphics you need, to be used later for your web pages. Read through your handout multiple times. Does the text flow smoothly? Is it easy to understand? Are there any typos, run-on sentences, or grammatical inconsistencies?

Here are some things you should include in your content:

  • Why is this tutorial useful? Why would someone need to know this particular piece of software (or whatever you’re doing your tutorial on)? What can this software be used for? Be practical, but don't shy away from being educational, theoretical, or even funny!
  • What are the objectives of this tutorial?
  • Are there any words that should be defined at the beginning of your tutorial before continuing? If so, create a list of definitions for your handout. Don't forget to include any acronyms that you refer to later.

Don't forget to create the graphics for your tutorial during this process. Save high-quality jpgs of your graphics, to be used when you create the website.

How to Create Screenshots

You can take screenshots a variety of different ways. If you're on a PC, the easiest way is to hit the "Print Screen" key. Then, open up a graphics program, such as Photoshop, and paste it in. You can then use Photoshop to add in callouts or descriptions. Here is an example of a marked-up screenshot, showing Dreamweaver's interface. You can also create screenshots using SnagIt, and mark it up using SnagIt Studio. Check out our tutorial for more information about how to use SnagIt and SnagIt Studio.

When creating screenshots, keep in mind the size of the window you were capturing. I had trouble making the images smaller without losing clarity of the image. However, if the images were too big, it threw off the formatting of the page (depending on the size of the computer screen). One idea is to create thumbnails of your large image, and link the smaller thumbnail from your webpage to the larger image.

The Review Process:
Your handout must be reviewed and approved by a labstaff member. If you are reviewing a handout, look carefully at the content (as this same content will be used for the web pages and the video). Does it make sense? Are there any glaring omissions? On the other hand, does it try to cover too much? Is it organized in a way that makes sense? If this tutorial covers a software program, walk through it as you’re reading the tutorial, and point out any inconsistencies that occur. Don't be shy about being critical here (or about being positive!) - it's much easier to fix things now, than after hours have been spent on web pages and videos.

next section >
© 2005 Sara Fuchs | iSchool | UT Austin | webmaster