The tools you have to use will usually determine the types of tutorials you can build. Fortunately, Windows comes with many of the tools you need when the operating system is instlled. If you hae powerful image editing progrms, you might want to take the time to learn how to use them. If not, you can accomplish a very nice tutorial using screen shots to illustrate your steps.
Step 1: Plan your Tutorial
This is the most important step in the entire process. You need to see the feature you are trying to teach through the eyes of a person who does not know how the feature works. You need to be able to document each "baby" step of the way. Keyboard shortcuts that you use regularly may not be a part of the toolset of the novice user. The best idea is to put in all steps. The more veteran user will notice places where the process can be expedited.
We suggest you build a practice document that you will use to illustrate the feature. The document should allow you to practice at least once each of the steps you need to accomplish the feature of the tutorial. Make a note (mental or on paper) what choices you have when executing the steps in the tutorial and why you make those steps. Once you have complete at least one trial run-through, you are ready to begin.
(For purposes of this exercise, we will use the AutoSum feature in Excel.)
Step 2. Think through the size of the screen shots that need to be shown.
In this case, the document in the Excel window does not need to cover the screen. The window has been sized down to a reasonable size.
What happens if you use a full screen in 1024 width resolution and the visitor has a 800 width monitor setting? Can you illustrate what you want to show with a picture that takes up less than the entire screen width. If the answer is no, we suggest you first set your monitor settings to 640 x 420. At leat the individual will be able to see the entire image on his screen without having to scroll horizontally.
Step 3: Create an initial document
We suggest building a sufficient amount of document content so the learner will recognize the situation when the feature you are teaching will be needed. You may need to include some words that serve as a "setup" or motivation for learning the feature. Now it is time to begin to collect screen shots of your work.
Step
4: Capture the screen
Once you have the screen containing an initial setup, look for the Print Screen key on the keyboard. When you depress this key, the operating system makes a copy of the screen and saves it to the clipboard. Usually, the entire screen has much more than you want in your tutorial. You will want to open a drawing program and use it to edit the screen shot. Windows comes with a suitable program - Paint.
You can find Paint by clicking on Start + Programs + Accessories and selecting Paint.
When you first open the application, you will see a blank canvas. You now need to insert the screen shot captured earlier from the clipboard.
Paint uses the familiar Copy/Paste process and will let you paste the contents of the clipboard to the canvas. You may use the Edit + Paste or the Keyboard shortcut of CTRL + V to paste the clipboard contents to the canvas.
Paint will usually ask of you wish to expand the canvas to fit the image from the clipboard. You should indicate yes.
Once you see your screen shot in the Paint Canvas you are ready to begin.
Step 5: Edit the Image in Paint
You might note that sometimes you accidentally point the mouse over a toolbar button. This can cause an unwanted Tooltip to be displayed.
If that happens, simply return to the original document, move the mouse to a location where the tooltips won't appear and capture the screen again with the Print Screen key.
Note that sometimes you may want to use the Tooltip as a clue when you are showing a feature that is executed from one of the toolbars.
After you have made a fresh copy of the screen to the clipboard, open Paint back again and paste the new version to the canvas.
This might be a good time to consider adding any "attention-getting" drawings on the document image which you think would be appropriate to help draw the attention of the learner.
Paint has drawing tools on the left tool panel which are activated with a mouse-click.
The oval or rectangular tools at the bottom of the tool buttons lets you highlight a location. The line tool lets you create an arrow pointing at an object.
The drawn objects can be in different colors. Click on the color of choice and the drawing will be made in that color.
Lines may be of different thicknesses by clicking on the line segments of different thicknesses below the palette of painting tools.
You may also add a text message on top of the image. The best advice we can offer here is to think what you would say to the student if you were looking over his shoulder while he is trying to exedute the feature you are teaching.
Paint lets you add text by first clicking on the A in the column of tools and then creating a text field by clicking and dragging where the text is to appear.
You can control the color of the text with the color selections at the bottom.
Once you build the image you want, it is time to export the part you want
to keep.
Step 6: Copy the section to the clipboard
Usually you do not want all of the image on the canvas. You would like to capture a portion of the total image and just use that. Paint lets you do exactly what you want and it is pretty easy.
Make a mental note of what portion of the entire screen shot you now want to use.
Click on the "dotted-rectangle" at the top of the Paint tools.
Make a rectangle around the border of the portion of the image you want to keep. Remember that any portion of the image outside the rectangle will not be exported. Eliminate any portions that will be distracting to your learners.
Once you are satisfied that the dotted rectangle is sufficiently large enough to cover what you want but not too large (this adds Kilobyte weight), you should copy this selection to the clipboard.
Use the Edit + Copy procedure found in many of the Windows applications.
This will take a snapshot of your Paint image and copy it to the clipboard.
You should have just the portion of the total image you captured inside the dotted-rectangle.
Now, you can copy this selection to your tutorial document. This may be a word processing document, a presentation document, etc.
In this example, we have chosen to copy the document to MS Word. A blank document is opened and the contents of the clipboard are pasted into the Word document.
Note, you may also use a CNTL + V process to paste the contents of the clipboard.
The proof is in the final product
.
This snapshot shows a blank Word document with the exported image.
Now, all you have to do is to build as many images as you think you need to illustrate the feature you are teaching.
You build them one at a time and pass them through Paint for any editing necessary.
One at a time you will copy the selection portion of the canvas and paste into your tutorial document.
You will need to add whatever words you think will help the learner understnd the process or the steps in the process.
That's It! Now take a look at a sequence of images that were captured using this process. See if you can "feel" a flow of an instructional sequence that matches the images. If you had these screen shots in your posession, you should be able to make a useful tutorial on the AutoSum feature in Excel.
|
Picture 1 |
|
Picture 2 |
 |
Picture 3 |
 |
Picture
4 |
It probably would be nice to have a picture of the mouse hovering over the AutoSum button showing the Tooltip. This would best be displayed as a picture shown AFTER Picture 2. This would show in a picture the actual location on the toolbar where the learner has to click. Remember that Step 1 in this process is planning. You don't want to skip an important step and have to go back to fill in something you missed.
With each of the screen shots displayed in order, the developer only has to supply a collection of words describing what is going on in each picture as well as related important information. Depending on the final choice for displaying the tutorial, the developer has whatever features of that program to learn to use to present the tutorial. (This tutorial was prepared using Dreamweaver with the intent that it would be viewed as a web page using any of the common Internet browsers.) The choice of a development application usually depends on the capabilities of the developer, the availability of the learner to view the tutorial, and any other technical considerations weighing on the decision. We have seen excellent tutorials as web pages, PowerPoint presentations, Word documents, and even sheets in Excel!
Technical Notes:
The above screen capture process will make the resulting word processing document heavy due to the embedding process of pasting an image from Paint. The normal filetype taken from Paint is a BitMap (BMP) type of image - very heavy. If the size of the tutorial document is critical as in most bandwidth issues, there is another step you can take which will minimize the final weight of the tutorial document. There is a solution.
Finish pasting all of the images to a single word processing document. Save the word processing document as a web page (htm or html) by changing the file type when you save. This will cause Word to create a web page with images. Web pages do not embed images, but link them from an external file. Word will create a folder of all images with names like image1.jpg, image2.jpg, etc. The conversion from BMP to JPG preserves the quality of the image but reduces the file weight significantly. Simply re-insert the images in their logical places from the folder of files and you will be replacing a heavy BMP file with a lighter JPG file..
Also note that the process of resizing an image for purposes of display on a document does not affect the weight of the image. An image with large dimensions may be sized to display with smaller dimensions, but the KB or MB weight remains the same. We have received images saved as BMP that exceed 13 MB but converted to a JPG reduce to 300+ KB. If the image is going to be displayed with smaller dimensions, the image should be resized with an image editing program and saved to a filetype with less weight than a BMP. A link to a nice (free) image editing program can be found in an article in the Technical Articles Section.