Click on any phrase to play the video from that point.
[Adobe TV presents...] [Prototype] Hi, my name is Wil Li, and this is Mira Dontcheva, and we are researchers in the creative technologies lab at Adobe. Today we're going to be demoing a piece technology called "Tutorial Builder." Now tablet devices have become more and more common, and one really compelling use case for tablets is as a delivery mechanism for tutorials. This is especially useful for applications like, for example, Photoshop that have a really complicated UI, have lots of tools and panels and whatnot, because now we can view a Photoshop tutorial over here on a tablet and then try to follow along on the applications here on our machine without sacrificing precious screen real estate for the tutorial. With the Photoshop Touch SDK we can now right mobile applications that talk to Photoshop. What does this mean for tutorial content? Well, that means that we can now create interactive tutorials that not only show you how to do the steps in Photoshop, they can actually help you do those steps in the application. Now the challenge in creating interactive tutorials is that not only do you have to know how to use Photoshop, but you also have to know how to program. Writing code is not for everybody. With Tutorial Builder, we can now automatically create interactive step-by-step tutorials without ever looking at any code. Great. Let's see how this actually works in Photoshop. Here is my Tutorial Builder panel--right here--and it has two buttons. If I want to start creating a tutorial, I just hit the "start" button. Now I can go ahead and open an image. Let's open this one. Tutorial Builder asks me when I first open an image whether I want to use this as my before image in the tutorial. I'll say "yes." Here we can see this image of somebody standing on top of a mountain or near some mountains at least. Maybe one thing I want to do here is to turn this from a color image into a black and white image. First, let me look in my adjustment layers, and I'll add a black and white adjustment layer. Maybe to make it a little bit more dramatic, I'll change some of these sliders. Get a little bit of a deeper sky. Maybe something like this. That looks great. Now perhaps I want to create an even more dramatic effect and increase the contrast here. I'll add the curves adjustment layer and really bring out those contrasts, make it even a little bit blown out here in the rest of the sky--something like this. Finally let me use the crop tool and create a tighter composition here. Maybe something that looks like this and just focuses on the person in this image. At this point, I'm done creating my tutorial, so I hit "done" in the Tutorial Builder panel. It asks me if I want to save the tutorial. I'll say "yes." It also asks if want to use this a my after image. Now I get the Tutorial Builder dialogue that just lets me enter some information here. I can make a title for this tutorial--"Black and White Landscape." A caption--"TB demo." The author--I'll put my name here. Finally, let me set a location to save this tutorial to here--TB demo. Let me create a new folder here and call it "black and white." There. Okay, and then I'll hit "process" and the system will go ahead and create this tutorial for me. Now we're done. Now that we have this tutorial, let's take a look at what Tutorial Builder created. On our iPad we have this application that let's you view the tutorials that Tutorial Builder creates. Here it is. You see this tutorial. It's got a before and an after image. These are the images that you saw in Photoshop. Then you see a number of steps describing what Wil did. He opened the file here--step 1. Then he created in step 3 a black and white adjustment layer. He changed some settings and he created a curves adjustment layer and finally cropped. What you might notice is this tutorial not only has text that describes what you should do, it also has these links "show me in Photoshop." If you press these links, what this app will do is it will send that command to Photoshop and execute it. I can click "show me in Photoshop" for the open, and there the image opened. Now I want to create the black and white adjustment layer, and I might not know where it is in the UI. I can just say "show me in Photoshop" and Photoshop creats that black and white adjustment layer. I can play with the settings myself, or if I just want to reproduce the settings that Wil used, I can, again, say "show me in Photoshop," and I can just keep going. I can create a curves adjustment layer. I can change those settings and then finally crop. Just like that we created an interactive step-by-step tutorial without looking at any code. We feel like Tutorial Builder is going to be really useful for content creators who want to produce these kinds of interactive tablet-based tutorials, and we really hope to get this out there into the hands of users some time soon. We're planning a lab's release, hopefully, for the very near future. Hopefully you'll get a chance to play with this soon too. Thank you. [Tutorial builder is based on a collaborative research project with the following contributors: Floraine Berthouzoz (US Berkeley), Maneesh Agrawala (UC Berkeley), Wilmot Li (Adobe Systems), Mira Dontcheva (Adobe Systems), xbytor, Luanne Semour (Adobe Systems) Maryann Amado (Adobe Systems), Takeo Igarashi (University of Tokyo, JST ERATO] [Experience design by Raschin Fatemi and Marcos Weskamp] [Executive Producer - Bob Donlon, Producer - Karl Miller, DP/Post - Erik Espera, Director/Motion Graphics - Kush Amerasinghe] [Adobe TV Productions - tv.adobe.com]
