Adobe Labs
 
 

cap bottom

Tutorial Builder

Automatically create interactive step-by-step Photoshop tutorials

Tutorial Builder is an experimental technology that automatically generates step-by-step Adobe® Photoshop® tutorials from a sequence of actions recorded from the application. In other words, Tutorial Builder allows content authors to create tutorials just by demonstrating the appropriate sequence of steps in Photoshop. The resulting tutorials not only include text description and tool icons for the recorded actions, they also include all the code required to replay each step using the TouchSDK.


To view and interact with the interactive tutorials produced by Tutorial Builder, please check out the Tutorial Player companion app. With Tutorial Player users can connect to Photoshop and interactively play back each of the steps of the tutorials in Photoshop. You can also use Tutorial Player to easily edit Tutorial Builder tutorials and preview their behavior. We have also released an iPad version of Tutorial Player, which is available to download for free from the Apple app store. If you have an iPad, check it out and watch for updates. . 


Adobe research scientists, Wil Li and Mira Dontcheva, give you a preview of a new tool called Tutorial Builder which could allow you to easily put interactive tutorial projects on a tablet device. 00:05:48 | 10/14/2011 | Comments

Please note that the Tutorial Builder extension currently supports most, but not all, of the features in Photoshop CS6. The Tutorial Builder release notes provide additional detail regarding which features are supported (as well as other currently known issues).

Tutorial Builder is based on a research project originated by UC Berkeley computer scientists Maneesh Agrawala and Floraine Berthouzoz with collaborators from Adobe (Mira Dontcheva and Wilmot Li) and the University of Tokyo (Takeo Igarashi).

Getting Started

Follow these steps to get started with Tutorial Builder:

  1. Watch the Creative Technologies Lab: Tutorial Builder demo
  2. If you do not have Photoshop CS6, download the free trial
  3. Download the Tutorial Builder extension and the supporting Tutorial Player
  4. Double-click the downloaded extension to launch Extension Manager CS6 and install the Tutorial Builder. Windows 7 and Vista users should make sure that they are logged in with an Administrator account.
  5. Open Photoshop CS6 (or restart if it was already open).
  6. Select Windows > Extensions > Tutorial Builder to open the Tutorial Builder panel.
  7. Follow the operation instructions in the Tutorial Builder release notes
  8. Ask questions or share your feedback in the Tutorial Builder forum

    Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Adobe.com Terms of Use.

Community

Below you'll find references and links to help you participate in the Tutorial Builder community.

Online Forum

Ask questions and discuss ideas with other users of Tutorial Builder in the discussion forums. We would like your thoughts on the extension, especially regarding additional features and any bugs.

Visit the Tutorial Builder discussion forum

Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Adobe.com Terms of Use.

Resources

If you want to learn more about releases on Labs as well as other Adobe technologies, visiting a user group or connecting with an Adobe Community Professional is a great place to start.

Product Details

Documentation

Frequently Asked Questions

What is Tutorial Builder?
Tutorial Builder is an experimental technology that automatically generates step-by-step Photoshop tutorials from a sequence of actions recorded from the application. The technology takes the form of standalone plug-in for Photoshop (CS6 and higher) that allows users to create a tutorial just by demonstrating the appropriate sequence of steps in Photoshop. The resulting tutorials not only include text description and tool icons for the recorded actions, they also include all the code required to replay each step using the TouchSDK. This means that users who view Tutorial Builder content on a tablet device that is connected to a running instance of Photoshop can follow the tutorial by interactively driving the application one step at a time. Tutorial Builder creates tutorials in HTML, which makes it easy for authors to edit the automatically generated content.
How do I turn my Tutorial Builder HTML tutorial into an interactive tutorial?
The HTML generated by Tutorial Builder includes all of the TouchSDK code necessary to drive Photoshop. To use the tutorial’s interactive features on a laptop or desktop machine, download the Tutorial Player application (developed on Adobe AIR®) and follow the instructions in the release notes to connect to a running instance of Photoshop.  One the application is installed, open the HTML tutorial in Tutorial Player. Clicking on the “Show me in Photoshop” link after each step will cause the application to execute the corresponding action in Photoshop.
Can Tutorial Builder generate screenshots for my tutorial?
The current version of Tutorial Builder does not automatically generate screenshots for each step of the tutorial. One way to include screenshots is to manually capture screenshots (e.g., using Alt+PrintScreen in Windows or Command+Shift+4 in Mac OS X) at the appropriate moments while you are demonstrating the tutorial. You can then simply add these screenshots using the editing features in Tutorial Player for the Desktop. Please see the release notes for instructions on how to edit tutorials with Tutorial Player. 
Can Tutorial Builder record everything I do in Photoshop?
Tutorial Builder currently supports most but not all of the features in Photoshop. The Tutorial Builder release notes provide more detail about which features are supported (as well as other currently known issues). For example, Tutorial Builder does not record any brushing actions because these operations are not currently supported by the Photoshop ScriptListener plug-in (which Tutorial Builder leverages to record user actions).

System Requirements

Tutorial Builder works on both Mac and Windows and requires that Photoshop (CS6 or higher) and the ScriptListener plug-in (which comes with Photoshop) be installed. We tested Tutorial Builder primarily on Mac OS X 10.7 and 10.8 and Windows 7, but the plug-in should work on other supported operating systems.

Tutorial Player works on both Mac and Windows.  In order to drive Photoshop interactively from the tutorial, you need to be running Photoshop CS6 or higher.  We tested Tutorial Player primarily on Mac OS X 10.5 and 10.6 and Windows 7, but the application should work on other supported operating systems.

See Photoshop CS6 system requirements

Release Notes

This release of the Tutorial Builder is designed for evaluation purposes only. The software contained is not final; however, many portions of the technology are fully implemented and ready for you to try and discuss.

Read the Tutorial Builder release notes

Top Technologies


Technology Groups