Onion Skin Photoshop | Photoshop Animation Workflow


Subscribe Here





Photoshop Animation Workflow


Lumen Shop is not designed as an animation program, however, if you are familiar with Photoshop for creating digital drawings and artwork, then you can use the Timeline feature and maximize all of those skills that you already have in order to create animation, so I’m going to go through a basic workflow of Photoshop and then give you a couple of little add-ons that you can use to make the interface flow a little bit better for an animator. Let’s start by creating a new document and we can use one of these film and video presets so we can get an HD document 1920 by 1080 and we’ll just name it. Something simple like that, so here we are in. Photoshop. I just have my plain white background here, and I can add letters and do all the things that I normally do in Photoshop. In order to animate, we first need to bring up the timeline window. So if you go up here to window and bring up the timeline. This little timeline shows up down here or it might be floating. I like to dock it down at the bottom so that it doesn’t get in the way and there’s nothing in here right now. So what we are going to do is create a video timeline very easy. Just click that button, and as you see, we have a layer that has been turned into a video layer now. If you zoom in to this, you can see that, actually. It is five seconds long, right, and then we can also see that the frame rate of our timeline is twenty nine, nine seven, and this is an important fact that you need to pay attention to at the very beginning. Because once you start animating. If you need to change this, then you will end up messing up your animation. It will cut frames in half theres. Just this weird way that Photoshop changes frame rates and stuffs ends up being missing. So you want to decide at the very beginning? What free rate you are working with now? If you’re working at 2997 that’s great. Animators are working at different thing means they might be working at 24 If you’re working at film or maybe you’re animating on twos. So that’s essentially working in a twelve frame per second or a fifteen frames per second frame rate. So in order to change that you go over here to this little hamburger menu, and you see this set timeline frame rate And so I’m gonna put in twelve because that’s usually what I work at. It’s the shortcut for animating on Tuesday now. If I zoom in further here, you can see that my one second has now twelve different frame markers on here so now. How do we get to the next step where we’re actually putting animation in here now? You don’t want to just draw on this layer here, because if I draw on here and I move it along, you see that it it actually is holding the same throughout this timeline, right, nothing is changing so like if I went to the next frame, and then I tried to draw again. Then it’s just adding it to, so this is basically like a static background layer. You can put your guides on here or you could draw it background on here or you can just use this. As a white layer because it’s putting weight and you can add a new transparent layer, This is always probably a better practice than just drawing on the face. White, let’s say. I want to put in our ground line, so I can do that and the layer if I wanted to. I could actually have notice that. Wherever my time honor is, that’s where it’s actually putting the new layer, So I’m having to move it back, so put it there and let’s say I wanted to do a guide layer That has like a timing chart on it for or something. This is a motion path that I’m going to use and I’m gonna mark out my timing and spacing with a little bit of easing towards the top there. Okay, so I like to name these. This is guide, this is ground. [MUSIC] Okay, so we’re still static here. We haven’t actually done in the animation. So how do we do the animation over here In this little film icon, we can add a video group. The groups are where the animation frames are collected. So if I add this group and you look over here. In the layers section, you see that the icon is this little folder slash Clapper from film set and this acts like a folder that can hold lots of different layers. So if I have this selected and I make a new layer, it puts in this new layer here, but if I zoom out, I can shorten that layer down to one single frame, and in fact, just for the sake of simplicity. I’m gonna shorten these seconds so here. I have one single frame, right, and you do our little drawing on this frame. Our first drawing there you go, there’s no character. So how do we get to the next frame? So if I move to the next plane, you see? Oh, it disappears right because the only one frame long. And that’s just what we want, so we want more of these one frame bits in here that we can draw. Now if I go and make another new frame, you see? Oh, yeah, it’s like five seconds long and now. I have to shorten it. This is not efficient. If you have to do this several hundred times, right so to make it a little bit more efficient. What you can do is once you have single blank frame. You can drag that frame and you can copy it by dragging it to the new layer and see that it makes another blank frame right after it. You can select multiples of these drag them and copy, and we will keep on doing that, and so we have a hearty amount of blank frames, so this is basically like pre loading your frames, but this way we don’t have to be going through those steps every single time now a little bit later. I’m going to show you this great extension panel that automates a lot of these annoying processes and makes Photoshop animation a lot more friendly for workflow for now. I want you to see how the logic of Photoshop works. So if you look over here again in the layer panel, you see this video group? It does act just like a folder. You have all these layers, but they’re only one frame block, right. I’m gonna rename this to animation. So now we want to do our next frame. We’ve got our first frame, right. How do we see the previous frame? We need onion skinning, and, yes, there’s onion skinning. It’s over here in this little hamburger menu again. It is enable onion skins pretty much anything that you might want to have if it is in. Photoshop is gonna be in this menu over here, so we’ll turn that on and you can see our little friend here, and so now I can draw my next frame, which maybe is gonna be, and I can go to the next one now. Here’s a little trick for you. If you’re animating, this is just a general animation trip on the guide layer in order to keep your drawing size consistent. You can make a guide for this and features or something like that, and then you can kind of see it underneath, and then you’re sort of always tracing from the same drawing, because what happens if you trace straight ahead, your drawings will suddenly search too. Well, they won’t. Suddenly they will gradually start to get bigger or smaller. Depends on the way you draw so. I’m putting in about a five frame. Hold here and actually what I can do now that I’ve got this, Uh, let’s challenge being off for a second and just look at this. Oh, you see? I’ve got this little like cycle here. If I wanted this to cycle longer. Then I can select these frames and I can duplicate them, and now I say a little bit longer, So the reason that the timeline animation works well is that these layers they function similarly to layers in premiere two layers and After Effects, Photoshop does have another way of animating its called frame animation. You can see down here. There’s this little icon, and if you click it, it will switch to brain animation. Now, if you look, it looks like, Oh, look, we’ve got all these frames here, right. Um, and we can play it, but the problem with this method of animation. Is that notice how it’s actually playing kind of slow? We don’t have that frame rate that we’re defining we’re defining how long each frame lasts by this sort of random mathematical formula. What is 0.08 of a second? I don’t know, and I get me my calculator, please. And so in order to get your drawing to last the right amount of time, then you need to be able to know what frame rate you’re playing at. So if you’ve been animating this way, it’s working for you. That’s okay, you can continue that, but just be mindful that your way you’re setting, you do need to actually do the math so that you aren’t working on fours or on sixes or something like that when you play it back like I said, this is a little bit more logical because you can treat it almost like an editing program. You can pick frames up and move them around you. Can you can extend frames if you need to? But you always know, okay. I’m working at 12 frames per second. That means this is going to last half a second. Okay, let’s get on to a little bit more animation here. There’s our cycle and we want to turn onions getting back on so now. I’m just gonna do a little bit in order to draw on the later you do have to have it selected a little bit of anticipation. We’re this creature, so the nice thing about working digitally is that you can draw directly on top of your previous drawing, so let’s say. I wants to letting this little ball. Get back to its normal shape. But it also needs to move up right so I can use the move tool after I’ve drawn it and then move it up to the marker. And if I want to, I can even like, rotate it a little bit, so it does sort of allow you to make it a little bit easier on yourself now. I’m the other thing that you can do if you want to is. You can make your onion skinning the settings. Whatever you like, like if you want to see two frames before or if you want to change the opacity and change the blending mode that can be useful so now. I can see two frames before my blank frame here, and and let’s say is this. He’s getting back to his normal shape, so I’m actually going to trace my template down here and again. If you note, I am always tracing from the template rather than from the labs, drawing just to avoid that accidental expansion, my drawings tend to just get incrementally bigger every frame, and I know other people whose drawings just get incremental a smaller now. I don’t recommend copying and pasting frames because it’s very obvious that you copy to face it. You don’t get the line vibration. You can get the little nuances that come from Hand-drawn animation, So I would definitely say go ahead. Use a template, trace your own drawings, but it’s much better if you draw every frame rather than copying and then pasting or copying and pasting parts. I haven’t see people just like copy and paste one part, and it’s obvious It’s very clear that you copied and pasted it. Papo, alright, so here’s. Something that sometimes happens. If you notice there’s this piece up there that’s not moving. That’s because I accidentally selected this bottom layer. The white layer here, and this sometimes happens with the touch screens. What you can do is you could lock those layers, so you don’t accidentally do that? I’m going to get rid of that. [MUSIC] [Music] remember? Repetition is of the trade [Music] all right, and now we are back to the beginning, so let’s see what it looks like. Turn off, onion skin. Hit spacebar. And you can see it playing now. I can turn off my guide layers here, all right, a little bit of volume inconsistency at the bottom there. They got a little bit sloppy, but otherwise there you go now had an export, so if you just go to file export render video and you have some options here, you can export as an image sequence, if you like image sequences, but if you are just doing regular videos, then you can export just to an h.264 video and you have other options that you can explore. I generally like to transform my frame rate to 24 just to be industry standard. You can export to an image sequence. If you prefer, you can do Pngs for JPEGs or tips or whatever. If you do that, you can. If you do Png’s you can actually have an alpha Channel, so this gets useful if you are having lots of different layers and doing compositing stuff and like After Effects or something, but for our purposes. H.264 we’re just gonna export a regular old video. Okay, so that’s the basic workflow. The last thing that I want to show you. Is this really great panel? It is a Photoshop extension. It is called annum Desin. There’s also in color. If I turn that on, you see all of these fancy. Little buttons appear so this was designed by an animator Stefan Barrio, who’s from France and he was tired of having to do all of these going into this menu to turn things off and on and to duplicate frames and all that, so what he’s done is he’s automated a lot of those with scripts and so I can start a new video group which woops it went over here, but that’s okay, let’s put this one on top, so that little button has just given me a one frame thing, So if I want you, I can add some hair, a little creature, and then if I want to add another frame boom. Oh, hey, look at that all. I have to do is hit that button. What if I want to turn the onion skinning on? Oh, there’s a button here. Yes, this is exactly what I need, so I can add this and I can just go ahead and add his hair. [MUSIC] See how much faster this is, so thank you. Stefan, this makes animator’s lives easier. There’s a lot of other features. If you wanted to, let’s say, you’ve got a keyframe, you can color a frame red so that you can pick it out from the batch, and then you can add another frame here. And then if you were like inbetweening, this becomes very useful and stuff, so I can turn that off to make it blue. I can do make it green. It’s just really very handy. There’s lots of functionalities. He has some tutorials on how to install it and how to use it so those will be in the links in the description of this video for your exploration and anyway, thanks for watching happy animating in Photoshop you.