Using Split Step
See how you can take traditional, text based documentation and turn it into something visual in just a couple of minutes.
Original Material

Here is some documentation for Apple's Pages application. We are going to transform this into a visual tutorial. First, copy the text from the original lesson.
Create a Lesson In ScreenSteps

Create an new lesson in ScreenSteps and give it a title.
Create a Blank Step

Paste Text

Paste the text from the original document into the step.
Split the Step

The problem here is that we have text that describes four steps pasted into a single ScreenSteps step. So, we are just going to split it. Here I have placed the cursor at the end of the first step.

Right click (or ctrl-click on Mac) and select Split Step At Insertion Point. The step will be split wherever you have placed the cursor.

Here I have split each list item into its own step.
Add Images

Click on the Replace Step Image icon and capture an image for that step.

Here you can see that I have added an image.

Now, reading through the text I can see that they actually combined three steps into one. So I will split it up a bit more.

Here you can see that I split the instructions mid-sentence.
Add Images, Annotations and Step Titles

Add annotations and step titles. I also reformatted the original text. All in all it took me about 5 minutes.
0 Comments
Add your comment