Click on any phrase to play the video from that point.
[♪ upbeat music ♪] [Adobe TV presents...] [♪ techno music ♪] [Prototype] Hi everyone my name is Mira Dontcheva, and I'm a researcher here at Adobe in the creative technologies lab, and today I'm going to tell you about a couple of projects that have to do with building games inside of Photoshop. So I'm guessing a lot of you know that Photoshop is pretty amazing. You can do a lot of really, really cool things with it, but it can be a very challenging application to learn, and so some people take classes, others spend years tinkering around on their own, and what a few of us have been doing here at Adobe is looking at whether we can use games to help people learn how to use Photoshop. So I'm going to show you 2 different games. One of them is called LevelUp, the other one is called Jigsaw, and hopefully you'll be seeing these games sometime soon. So the first one I'm going to show you is LevelUp. So LevelUp is a plugin for Photoshop. Here you can see it appears as a panel on your screen, and it includes a number of missions. They're divided up in 3 different levels, and these are missions that really have to do with things that you want to do with your own images. So the first one is to remove red eye from a photo, whitening teeth, smoothing a face, removing unwanted objects. So the goal is to play these games to accomplish these missions, but then learn useful skills along the way. So let's take a look at how we might play one of these missions. So let's go ahead and try the smooth-a-face mission. So go ahead and start mission, and you see step 1 tells me that I should open a picture that has wrinkles that I'd like to remove or soften. I don't have really a picture like this lying around so I was just going to go ahead and open the sample picture, and now it says, "Okay, go ahead and create a new layer." So I'm going to go ahead and say, "Layer a new layer," and now the panel knows that I've done this, and so it updates the next step. It says, "Okay, step 3 of the 4 steps is to choose the healing brush." Now I don't know where the healing brush is so I'm going to just go ahead and just click the healing brush tool, and here, on the left, the healing brush tool is selected for me, and now it says, "Go ahead and select a smooth area and then paint away the wrinkles." And so I'll go ahead and select a smooth area with the alt key, and then just start painting away those wrinkles, and let's do it on the other side as well. [painting wrinkles on screen] So great. Let's see how do I get to the next step? It says, "Go ahead and save when you're done," so I'm going to go ahead and hit save, sure, go ahead, and now it says, "Good job! Are you happy with your results?" I'm pretty happy so I think I'm going to just keep going. So it says, "Now lower the opacity of the layer in which you painted to bring back some of those wrinkles." Because after all no one's perfect. Everyone has a little bit of wrinkles. So let's took a look see; opacity here, we can bring this down a little bit, and sure enough mission complete. So great, so I learned how to do this on this image. Now I can try it out with my own images. So let's go ahead and close this one, and let's check out some of these other missions. This one, let's check out one of the harder levels, level 3. I know some of you are experts out there. So let's see how we might add a new background to an image. So it says, "Okay, mission 9. This one is 50 points." I guess before I started, I should note that down here there is a number of badges. Now you can see that I've been playing this game already. I'm considered a Photoshop apprentice, and I've gotten some of these badges. The more you play these missions, the more badges you can accumulate. So let's go ahead and start this one. It says, "Open a photo with a dull sky." Again, I don't have this photo so I'm just going to go ahead and click on the link which will open up the sample image, and here is this nice photo of a castle. It says to choose the magic eraser tool, and, again, I'm not really sure where this tool is. So I'm going to go ahead and click on this link, and there it selected, and then it just says to click on the dull sky, boom! Wow, it's gone. So now I need a new sky. So let's go ahead and open this new sky here. There's the new sky, and now I'm going to go ahead and select it. So it's select all. Again, these steps are updating for me automatically as I complete each step. So I go ahead and say, "Edit, copy," and then I'm going to switch to the castle, and then edit, paste, and now my sky is covering the castle. So I'm just going to move it below the castle, and sure enough, the game knows that I've accomplished this mission, and gives me points. So this is what LevelUp is like. You complete missions. You accumulate points; you get badges, and you win things. So another game we've been developing is called Jigsaw, and it's also a plugin to Photoshop. So let me go ahead and open it up here, and Jigsaw uses the concept of a jigsaw puzzle to teach people how to use Photoshop. So unlike LevelUp, which is very step by step and is essentially asking you to follow tutorial like missions, Jigsaw says, "What if we let people tinker on their own and discover how to solve puzzles?" Could that be an interesting way or a useful way to let people learn how to use Photoshop? So we have a number of different puzzles. The simplest ones, like this bunny and cat one and this one, are teaching people about layers. Once you know about layers, you're going to want to select things. So the next 2 puzzles teach people about selection. Then we start looking at transformation, scale, rotation, how would one do that, and then, of course, Photoshop is all about adjusting pictures and about making them better, and so we have a couple of puzzles that look at "How do you make pictures black and white?" And one that looks at lighting, and then finally there's a couple of puzzles that look at matting, and how do we remove objects from pictures? So let's go ahead and try one of these puzzles. Let's just start with the most basic one. The most basic one is just about layers and about moving pieces around. So if you look here in the layers panel, each piece is sitting in its own layer, and each layer is transparent except for that piece. So all I really have to do is take each piece and move it into the correct position, and while this may seem really simple for those of you who are Photoshop experts, those who've never used Photoshop before need some help, and these kinds of easy familiar looking puzzles can help them learn the tools. So let's just--let me just put these pieces--just 1 piece left. So once I'm done, I come back up to my panel, and I say, "Check," and off it goes, and what the panel does--what the game does is try to evaluate how well did I do? So it takes a solution file that knows how the pieces should be arranged, and it compares it to my puzzle, the one that I just put together, and it thinks I did well enough. It gave me some points too, which is great. So I'm ready to move on to the next puzzle. So let's take a look at what these more advanced puzzles look like. For example, the advanced selection puzzle, if we go ahead and open it, the pieces-- you know the idea is still the same: you take the pieces, you put them back together in the jigsaw puzzle, but this time, the pieces are not on their own layers, and they're on 1 layer, and this layer has a background, so you can't just--you know you can't just select and grab the pieces, right? The whole thing moves. So what you have to learn is you have to learn about the selection tools, and you know if you don't know anything about the selection tools, you might come over here and say, "Okay, are there some hints?" "Which tools should I be using?" And here it talks about the quick selection tools, so maybe I'll come over here and select the quick selection tool, and then start selecting these pieces. If that doesn't work for me, I can also check out the magic wand, and if that's not enough, I can even get a step-by-step tutorial that shows me exactly what I need to do. So for those users who are real beginners and really need a lot of help, I think that the step-by-step tutorials are probably best. So let's take a look at some of the adjustment jigsaw puzzles. This one teaches people about lighting. What's interesting about this one is that these are--no longer has to take these pieces and put them back together. What they have to do is actually apply this levels adjustment layer to make some of the pieces match the rest of the picture. So let's go ahead and see how that might work. Let's go ahead and select the levels adjustment layer, and now we can start playing around with these settings, and see if we can make the picture complete. And so this seems about right, let's go ahead and hit check, and now-- and, again, the game is checking to make sure I did okay, and it says, "Uh, you didn't do it well enough. You only got 5/6 pieces right," and in fact, it's showing me which piece I haven't done correctly. So it's this piece here, so let's see if we can play with these settings just a little bit more. Maybe this is just too much, this seems a little better. Let's try it again, and now maybe I'll get all my points. Let's see. Yes! I got them all. So these are the 2 games, LevelUp and Jigsaw. We are exploring other possible games to teach people about Photoshop and about some of our other products. We're hoping we can release them soon and have you playing. So look for them on our website, thank you. [♪ upbeat music ♪] [LevelUp Petar Karafezou-Adobe, Mira Dontcheva-Adobe Design- Resource] [Interactive & WreckingBall Media, Development and Game System Bunchball] [Jigsaw Tao Dong-Adobe & University of Michigan, Mira Dontcheva-Adobe, [Raschin Fatemi-Adobe, Diana Joseph-Adobe]
