528 Tracing a photograph in Adobe Sketch

- Hey, gang, this is Deke McClelland. Welcome to Deke's Techniques. Now, as you may recall from last week, we're working inside that mobile app, Adobe Photoshop Sketch, or just Adobe Sketch, for short. And last week, we learned how to use the app. The week, I'm going to show you how to put it to use, specifically we are going to take this photo that I shot using my iPad, and I can't tell you what a horrible camera it has, but the subject is beautiful, and so we're going to take her and we're going to trace her using the ink pen tool, in order to create this basic line drawing.

Here, let me show you exactly how it works. All right, so here we are, seeing side-by-side, the line art that we'll be creating in this movie, along with a full-color final artwork that we'll create in subsequent movies. Currently, however, we're seeing the artwork inside Photoshop, which is why I'm going to go ahead and switch over to my iPad Pro, and launch Adobe Sketch by tapping on its icon. Now you can see, I've already got this project, here, called Colleen 3.0, because I have three different variations on this artwork, and it contains a total of 10 sketches, and I'll be documenting exactly how these sketches work throughout these movies.

So let's start things off by creating a new project, which you do by tapping the plus sign on the left side of the screen, and now I'm going to import a photographic image. And you do that by tapping on the third icon in the top right corner of the screen. And that's going to bring up this images menu, which, as you can see, allows you to draw images from a variety of sources. I'm going to tap on My iPad in order to access the photographs on this specific device, and then I'll tap Favorites, in order to load a few photographs that I've favorited in advance.

And I'll go ahead and select this first one, right here. Now this is the image I'm choosing to work with. I'm assuming that you would like to trace an image of your own. All right, now, I can scale this image by pinching it. So, in this case, I'm pinching outwards to scale it larger, or pinching inward to make it smaller. The problem is, because I have my iPad oriented horizontally, so that it fits nicely inside this horizontal video, I'm ending up with a horizontal canvas, as well, which is not what I want. So I'm going to go ahead and escape out of this image mode by tapping the Done down here at the bottom of the screen, and then I'll go up to this gear icon in the top right corner, tap on it, and select Rotate canvas 90 degrees, in order to rotate that horizontal canvas so it's vertical.

That ends up rotating the image as well, but that's not really a problem. So I'll just go ahead and tap off the menu to hide it, and then I'll go ahead and, once again, tap on that little image icon, the one that looks like a mountain range, in order to, once again, access the image, and then I will rotate it using my thumb and forefinger. And notice how it snaps at 90 degrees, so the image is exactly upright. All right, now I want it to take up the entire canvas, so I'm going to zoom out here, by pinching out on any portion of the screen that does not contain the image itself.

And I'm actually going to pinch out a little farther here, and then I'll pinch the image the image as well, in order to make it larger. And I ultimately want it to be about this size. It looks pretty darn good, and you do want to get the sizing down before you start tracing the image. Which I think is fairly obvious, but it's just something to bear in mind, because once you begin tracing, you really want that image to remain the same size. All right, now I'm going to tap the word Done, once again, in order to accept that change, and you can see that we're now seeing a cropped version of the image.

But bear in mind, it's only temporarily cropped. We still have access the entire thing. Now another thing to consider when you're using Sketch is that it's ultimately a single-layer image program. Now that's a little bit misleading, because you actually have a couple of layers. One, which represents the image itself, and the other, which represents all of the painting that you're about to do, which is why I recommend you work in the same way we worked back in the old days of Photoshop, back before it had layers. That is to say, go ahead and create multiple variations on your image.

And so I'm just going to go ahead and accept this image as it is now. In the event that I need to come back to it, by tapping the word Close in the top left corner of the screen, and that's going to take me back to my project. A couple of problems with my project. It's called Project, which is not something I want. So I'll just go ahead and tap on the word Project in order to light it up and bring up my keyboard, and then I'll tap that X above Colleen's head in order to get rid of the existing name. And I've already created the name in advance, so I'll just go ahead and tap and hold and choose paste in order to paste the words Cartoon portrait, and then I'll tap the Done button over on the right side of the keyboard.

And now I want to clean things up a bit by getting rid of these extra canvases that Sketch gives you by default. And so, I'll go ahead and tap on the Edit icon, which is located in the top right corner of the project, and then you can just go ahead and tap on those canvases that you want to delete, then just tap the trash can and click OK, and you'll be down to a single sketch. Now what I want to do is duplicate this existing sketch. We're still in the edit mode, and so just go ahead and tap on it, if you're working on your own sketch, and select that first icon in the top right corner of the project, and that will go ahead and duplicate that sketch, as we're seeing here.

And then, tap the check mark in order to accept that change. Now, go ahead and tap on the image itself in order to load that sketch. All right, now zoom out a little bit, and at this point, I want to turn this photograph into a tracing template by dimming it, which you can do by, once again, tapping on the image icon in the top right corner of the screen, and then, notice this slider bar, just go ahead and drag the circle to the left in order to reduce the opacity of the image and tap Done in order to accept that change.

Now there's all kinds of tools that you can use in order to trace this image, but I'm going to work the tool that produces the most uniform lines always, and that's the second tool, which is currently located, for me, on the left side of the screen, which is this guy right here. And if you want to see what it's called, then just go ahead and press and hold on it, and you'll see, at the top of the list of brushes, ink pen. And you can change it to something else if you want to just by selecting a different option, but I'm going to stick with ink pen just by tapping off the menu. All right, now I'm going to set about tracing Colleen's hair.

Now there's a couple different ways to work. In my case, I've got a stylus, in the form of an Apple pencil, and what you can do is just start tracing, but we've got an obvious problem, which is, instead of tracing with black, which is what I want, I'm tracing with turquoise, which is not what I want. And so, I'm going to go ahead and tap the Undo button, and I want you to notice something. If you press and hold, you'll see both an Undo and a Redo, as well as this clock, which represents the history of your project, which is a kind of timeline.

And another thing to note about Undo and Redo inside Sketch, and this is really an awesome feature, is that you can close the project and then open it later and either undo or redo steps from the past. In my case, though, I'm just going to click on the undo icon in order to undo that stroke, and then, I'll go ahead and click on my brush over on the left side of the screen, and I'm going to change the color first thing here by clicking on that turquoise circle above the word color, and I want to change history to wheel, which is probably the default setting for you, and then I'm going to drag this little slider below the color wheel all the way over to the left, which will give me solid black.

You also want to make sure the flow is set to 100, which it is by default, and the size is set to 3.5 by default, but you can vary that as much as you want. Now I'll go ahead and draw a line that represents this first line of hair. Now, as you can see, it's not the best line, and it might end up, in your case, being a little wiggly as well, and so what I'm going to do is just undo that guy once again, and I'll tell you, the way to work, the way to get the steadiest results, in my experience, is to presa your palm against the screen, and with any luck, that's not going to do anything.

That's not going to actually draw inside of your sketch, and then, just go ahead and move your palm along with the stylus. So, in other words, you're not only drawing with your fingers, but you're drawing with your wrist, as well. So try that if it helps. Obvious, if you've got a really steady hand, you're not going to need that advice, but in my case, I'm getting a little bit older so it sometimes helps. So you really don't want to watch me draw each and every hair at real-speed, so we're going to fast-forward through this process. But I will tell you, the reason I'm drawing some of these hairs at these weird angles is because I'm trying to create regions that I can color independently later on down the line.

And so I don't want any one region to be too large, because that will make it very difficult to color. Also worth noting is that I'm not accepting every single line that I draw. I am undoing and redrawing quite a few times as I work, and I expect you will as well. All right, that takes care of the hair and shoulders, as well as the outline of the face, which means what's left is the features. And so it seems to me, having gotten decent results so far, it's a good idea to go ahead and tap the word Close in a top left corner of the screen, in order to close, and therefore, save our work so far.

And then, just so that we don't mess up anything we've done so far, let's go ahead and create a copy of this sketch by tapping on the edit icon in the top right corner of the project menu, and then I'll go ahead and select the sketch itself and tap on the duplicate icon. And now, having completed that operation, I'll go ahead and tap the check mark in order to accept that change. Now I know, so far, it looks like we've taken the perfectly good-looking woman and made her look quite hideous indeed, but bear in mind that we're going for this final effect right here, which I think ends up looking pretty darn good.

And I assure you, we will make this happen in future movies.