Animated Self-Portrait: Bring Your Evil Twin to Life

1. Trailer: Wait. Say, "This is Joy talking." This is Joy talking. This is Noelle talking right now. This is Joy talking. We sound pretty similar, but my voice sounds a little deeper. Okay. Is there any way we can cut that? I can say it again. Take two. We're Joy and Noelle. We're illustrators, animators, and we're also twins. I'm Joy. I'm Noelle, and we create animation for TV and web videos, and we've also directed and animated five independent short films together. In this class, we're going to be animating a self-portrait in Photoshop. You can go with our theme, which is animating your evil twin, or you can choose your own. It's really up to you. We'll walk you through our creative process from brainstorming to character design, from rough animation to your final animated self-portrait. This class is really for all levels of animators who have a basic knowledge of Photoshop and just want to make something personal, artistic, and fun. You'll leave this class with something that you can use for your logo, website, film bumper, or reel. You might even spark ideas for your next film. Can't wait to see what you guys come up with. 2. Overview: In this section we're going to be going over the project and what you'll need to create your animated self portrait. All you'll need for this project is a sketchbook, Photoshop, and a tablet or some tea. We're going to demonstrate sketching, designing, and animating in Photoshop CC 2015. Try to keep your animation to 10 seconds or less. This is a bite size project not a short film, which keeps it completely doable and simple. Noelle is going to cover the design units, while I'll cover the animation units. This just not mean that Noelle isn't an animator herself, it's just how we decided to break down the glass. Thanks, Joy. Anyway, as you complete each unit, upload the stages of your work to the project gallery so everyone can see and enjoy your work and you can use the same. Next up, we'll start brainstorming. 3. Brainstorm: This unit is where you get to play with ideas. So grab a coffee and sketch, read, write, listen to music, watch films. This is where you can take a little time to get your ideas together and inspirations and influences for your animated self portrait. So we say all of that now. But honestly, while we should be going outside to be inspired, we're mostly just clicking around the Internet. When you've gotten inspired from all the film, books, art, music, whatever you can get your hands on, you're going to need a place to keep all these thoughts and images, and we like to create boards on Pinterest. These are some of the images that we collected to inspire us for this project. Here are some of our favorites. You can also collect animation inspiration and make an album on Vimeo. Joy, do you have anything to add about that? Yeah, I do. Now before I started the project, I immerse myself in animation for inspiration, just like how we gathered images and other materials on Pinterest earlier. I now need to figure out how I want this to move. When you're finished, you can share your inspiration boards and images to the project gallery. Either post a link to your Pinterest boards or just attach your style board and images. So enjoy the brainstorming phase because after this you have some real work to do. Yeah. Is that it? Yeah, that's it. Bye. Bye. 4. Sketch: I'm going to be covering character design, and in this unit we'll be doing a rough sketch. Break out your sketch book or you can work right in Photoshop using a tab letters antique. This is the stage where we're going to take all the ideas you collected from the brainstorming unit, putting them into your self portrait. This doesn't have to be super realistic. It can be about how you like to draw, but it can be stylized, it can be exaggerated. Just have fun with it. Let's get started. I have my document here and I set this up going File, New. The document type I chose is a film and video preset at 1920 by 1080 because ultimately I knew I wanted to use this for video. You don't have to use these presets, but just keep in mind where your animation is going to end up. Before I get started, I go to my Preferences, Performance, and make sure that the history states are set at least 100 because you're going to want multiple levels of undo. I like to sketch with a grid. I set that up in here, a grid line every one inch, and I chose a light gray color. I'll be using a textured brush for sketching. I like to use a brush like this for both sketching and final art. It mimics the look of a pencil, and I've included this in the resource section of the class, so feel free to grab that if you like. I'm going to make a new layer called sketch. I'm going to be starting off pretty rough and cleaning up as I go along. The theme is evil twin, and so I'm going to draw my twin here. Normally I would just trace this so that they look exactly the same, but I'm not going to do that now. I'm just going to, magically there she is. We won't have to do that again. If you're feeling stuff, just go back to your brainstorm and style of words. Something that inspired me when we were brainstorming for this project was, I was researching twins and I came across something from Psychology Today in 1989, which says, "While most people begin life separate and must learn intimacy, my twin and I began life intimate and had to fight for separateness." I liked the idea of being so close to someone that being separated was actually a fight. I started moving them around. That seemed like a good fit, like a puzzle. I sent this to Joy and made her laugh, and I'm always looking for that kind of a reaction from her. I decided to go with this. This design will end up either being a character model or the first or last frame of your animation. For us this ended up being the last frame, because I gave Joy this, and she animated this. Like an exquisite course. I know most of you are saying, "That's great, but I don't have a twin that I can hand this off to." That's true, but you can take a break from it, walk away from it for a day or so, and then when you come back maybe you'll have a new idea or something you didn't see before. Plus what's fun about a personal project? You don't have to know where it's going right now, you can just figure it out as you go along, and your sketch will help with that. I don't want to destroy my original artwork by erasing, I want to be able to keep it in case there's something I want to change later. What I'm doing right now is I'm painting on top of the layers using a layer mask right here. This is the icon for layer masks. White is completely visible and lack is invisible. If I'm painting on this character's layer mask in black, it's making this line invisible. If I go too far with this, I can just paint in white again and it comes back. You could see if you right-click you can disable the layer mask. All the artwork is still there. If you're not happy with it and you just want to get rid of this, you can delete it. But this is going to help me figure out how I want these to look. I'm going to start getting rid of these lines. I'm going to duplicate them so that I always have this, keep it in that folder right there. Now I'm going to apply the layer mask so I can start editing this design a little more. I think I'm going to draw a border around length with its style. There, that looks pretty good. If you haven't done this already, save your sketch as a PSD. Now we're going to save it as a JPEG for uploading, so File, Export, Save for Web. I'm going to save this as a JPEG at 50 percent, 960 by 540. Saving them in my sketch folder. Now I'm going to upload to the project gallery. Here's my project, edit project. See. Now we have a rough sketch. Save your project. Now it's your turn. Don't forget to post all the stages of your work, and check out what other students are posting and leave feedback. 5. Ink: This unit covers final character design, where we'll be inking and coloring your self portrait. I'm going to go over how I organize my project, some workflow tips, setting up actions to make designing and animation easier. Finally, I'll mention some resources for choosing color. Here we have our evil twin sketch and there's nothing really evil about it yet. I mean, it's creepy. But when it's animated and they split, and you see that they share this eye, and then it winks, I think that's where you get a little mischief. I'm going to save this as a new project. My ink and color folder and I'll call it Ink_and_Color. When I'm coloring, I keep almost everything on separate layers so I can easily change colors as I go to see what I liked best. You don't have to work this way. I'll just show you how I do it. It really simplifies things for changing colors later on, if I want to. I make a layer guide and inside that group, I make two layers: one called line and one called color. I'm going to duplicate this layer guide for everything that I want separated. So now the hair has a line and color layer in there. So I'm going to go ahead and do this for everything I want separated. Okay, now that that's done, I'm going to merge my sketch because I have that file saved already so I can just merge all that and name it sketch. I'll bring it up top, turn off the layer guide, and I'll bring down the opacity on this to 25 percent. So next I'm going to ink the line layer only for each group. So I'll start with the hair and work my way down and I'm using the same brush for final art as I did for my sketching. 6. Color: So now everything is inked in black and if you remember, my final design doesn't have a black outline, so I'm going to want to make this outline color the same as the fill colors. I just chose color as I went along. These are little swatches that I just made in Photoshop and they're labeled for everything. But there are a couple of different sites that are great for color. One that I use all the time is Adobe color. It's great because you can browse all these different themes and edit them and make them your own. You know, don't steal other people's work, but you can edit these complimentary colors, move things around, change that swatch and you can save them and make them your own themes. I actually, just as an example for this class, I made a theme out of the swatches that I chose for my self portrait. If I go back to Photoshop and go Window, Libraries, my swatches are there. I have other swatches saved from other projects that I worked on. This is really great because you can just click on these colors, it goes right into your swatch right there and you can add them and label them. I'm not going to use this since I have my swatches right here, but that's just something to keep in mind. When you're choosing colors, you can remember that some colors represents certain things. This great diagrams have all the meanings of color. I guess I happen to like gray and orange together, which is why I chose those for my self-portrait and I just pick colors that I like, which accidentally happen to be four cappuccino colors. Andrew Kuo, has this really funny diagram on his wheel of worry in color, and orange represents death. I've heard him say before that if he has a really dark concept, he'll purposely not choose dark colors. So you can just go with things that you like. It's a self portrait, so color it your favorite colors, even if they're the most hideous colors on the color wheel. Now that I'm finished aching, I can turn off my sketch, just throw that in a group. We're going to start coloring all of our layers on the color layer. I'm going to grab the hair color. Since I want to keep these separate, one way to do this would be select the line layer, use my wand, jump to the color layer, and fill. That was so easy, but if I deselect, I have this horrible anti-alias line separating the color and the line layer. It's really annoying to have to go in there and paint this line, so I'm going to show you a trick I learned from Alex Grigg's, Photoshop animation techniques. He has a great technique for coloring for animation. So you're going to want to remember this for Joy's animation units. As I'm doing this, I'm going to record an action for it, so we never have to do this again. If it's not already open, you can go Window, Actions to open your action window. I'm going to click on this folder down here to make a new set called color. Then I'll go to this icon right here and choose New Action, I'm going to name it Expand>Fill. Now it's recording, but we don't want it to record yet, so I'll press "Stop". We don't want it to record yet because I'm going to make a selection on this line layer first. Now that I've made that selection, I can hit "Record". So now we have our selection, I'm going to go to Select, Modify, Expand, and am going to expand by two pixels. Depending on your brush, you may need to change this, but for me this will work. So now if you zoom in, you can see that the selection has expanded into the line layer. Now when we fill on the layer below, you're not going to get that anti-alias separation. Rather than choosing the color layer, I don't want the action to record me choosing a layer named color because I just wanted to choose whatever layer is below my selection layer. So a hotkey for that to just automatically move to whatever layers below the selection is, option Open Bracket. So now that we've moved there we can fill. Make sure we've chosen our hair color, choose eye for eye dropper, and I'm going to either hit, "Edit", "Fill", "Foreground Color" which will automatically fill, or a hot key for that would be Option Delete. So now I'm going to deselect and go to my Actions and stop recording. So now whenever you need to cover something, you can just either go to your Actions and hit "Play", which I don't want to have to open this window every time. So I'm going to double-click on my "Expand Fill" option and you can set a function key for this. So I'm going to set that to F4. So now whenever I need to color something, I'll just hit "F4" and it will fill it for me. This color layer did not fill all the way because of my annoying hair design, but for everything else this should work. Now we have a hair color with a black outline, but the line layer should match the color layer. I'm going to lock transparent pixels, this little icon up here, and make sure that I have the hair color selected and I'm going to hit option "Delete" on my keyboard or "Edit", "Fill", "Foreground color", and now the line matches the color layer. Now we're going to do that for everything else that we want colored. We're going to remember these two things. Setting your action for expand, fill for coloring and locking transparent pixels, filling with your foreground color to color the line layer the same as your color layer. Then I'm just going to go down the list and color in all of my line layers. Now that all of our outline color are done, we're going to go in and choose our fill colors and select my line layer for the face. Make my selection with the wand and hit "F4" to fill and now we'll go down the line and do that for all of our color layers. Now all of our color layers are filled and this is something that would have taken a really long time and would have been very annoying and is now done in a matter of minutes, so thank you Alex Grigg for that coloring technique. Now to do the design on the sweater, I'm going to merge these two layers since I know I don't want to change the color of the outline anymore, I'm going to merge these two layers and call this sweater color. To do a sweater design, I'm going to choose a lighter gray. I don't want to have to bit your need with this, I want to be able to just draw pretty freely for the sweater design. So I'm going to make these clipping mask by right-clicking and from the menu, I'm going to choose, "Create Clipping Mask". Now whatever I draw in this sweater line layer is only going to be visible within the contents of the sweater color layer. So if I release this clipping mask, you can see that all of that artwork is still there, it's just clipped to the sweater layer, which is what we want. So now I can draw this and I don't have to worry about being too neat about it. Now while your lining color layers are still separate, there's still time to make changes to any colors that you want. So if you're not happy with something, you can easily go and pick a different color. But I'm happy with these so now I can merge anything that doesn't need to be on separate layers so that everything will be less complicated for animation. So now I can merge the hair group by just hitting "Command E" on my keyboard or right-clicking and saying merge group, so now that's on one layer. I'm going to do that for everything that can just stay on one layer. Now I'm just going to throw all of these layers in a group, and now I'm going to make my border around this. So I'll bring up my guides, sets about where I want it, and to make the border, I'm going to choose my background color, which is this gray right here and I'm going to fill the background. On a layer above my artwork, I'll make the border. There are a bunch of other ways to do this, but this way, I think will be better for animation. So I'm going to choose a white and I'll grab my Elliptical Marquee tool and I'm going to hold down "Shift" and "Option" as I click on the center and drag out. It's about where I want it and I'm going to select the Inverse and fill the Inverse with white, and that's my circular border. I can turn off these colors, turn off my guides, and that looks pretty good. I think that's where I want it. So I'm going to save, and now I'm going to save a JPEG for uploading. So File, Save for Web, make this 50 percent. Now upload to the project gallery. There we go, save your project. Now our character design is inking colored, and we can move on to animation. Don't forget to upload the stages of your work and check out what other students are posting and leave feedback for each other. 7. Project Set Up and Resources: We're almost ready to animate. We're just going to set up our project in Photoshop. I'm going to walk you through that in case you're not familiar with animating in Photoshop yet. If you are, feel free to go ahead and jump to the next section but I have a couple of great resources that I learnt how to animate from, and they're really awesome. So lets go. I've opened up the project that Noel designed for us right away. I'm just going to save it as a separate file. So this was pink in color and we're going to animate. So we'll call this rough animation. First things first, open up Window Timeline. Don't forget to do this, set the frame rate. I animate at 24 frames per second. It's usually set to 30. Then if you change your mind later, it's a big pain, layers are not lining up correctly. Just do this stuff right away. Just think about it. Open the timeline, set the timeline frame rate. Next, you could enable timeline shortcut keys, but I don't and I'll explain why. If you check Enable Timeline shortcut keys, what it does is it activates your arrow keys to be able to move forward and background the timelines. You have to create a new layer anywhere but at the start of the timeline and move it over one frame that activates the arrow keys, is just a tiny glitch in Photoshop. That if you hit Up, it goes to the front of the frame, if you hit Down, it goes to the end of the frame, and if you hit Left, it goes previous, Right goes forward. That's nice. But I prefer to be able to move my drawings around with the arrow keys. So for instance, if I try to move the hair layer and I press Left and Right, nothing happens. So instead of enabling the timeline shortcut keys, I'm going to set shortcuts. Turn that off. Go to Edit, Keyboard Shortcuts, Shortcuts for Panel Menus. Scroll down to timeline video. I'd like to set a shortcut for our next frame. I'm going to use the shortcut Command L. For previous frame, I'm going to set the shortcut Command K. See all of our layers now laid out over time. Well, in the timeline, they're all five seconds long. I don't know if I want this frame to hold for five seconds. So I have to trim them. There's a solution, I'm going to set up this. Shortcuts for Panel Menus, Timeline Video, and scroll down. You can set your command open bracket for the trim startup playhead and command close bracket for trim ended playhead. Okay. Then you can move down to frames. Command close bracket, because I want to trim it to two frames at the end of my playhead. The way I learned to animate Photoshop was Alex Grigg's Photoshop animation techniques. I think I'll mention him in the design section, but he has a lot of cool shortcuts for setting up action. One other thing, metcalflovesyou.com, are his Photoshop animation tutorial, and he has shortcuts that will make your life so much easier. I copy these Command L for next frame, previous frame Command K, trim the start of the playhead and end with the brackets and enabling your onion skins. One helpful tip, you can set up a PSD that just has a couple of 100 blank layers. You cut them to two frames each however long you like to animate on two's on three's, whatever. Then have that as a template project. Then you can just always drag that into whatever animation that you're working on and have all of your blank layers set out. There are a couple of extensions available that simplify this and just animating in Photoshop in general. I haven't tried them yet and I'm sure I'll be kicking myself for not doing this sooner, but I would suggest taking a look at AnimDessin2 by Stephanie Baril. I believe you can trim multiple layers at once. It also has simple buttons for everything that's usually hidden in panel menus and keeps everything in order of workflow. There's also the animator's toolbar from photoshopanimation.com of all places. I leave it up to you to decide. Okay, next up, we're going to start bringing these portraits to life. 8. Keys: Welcome to the animation unit. In this section, we're going to be blocking out the animation and roughing off the action first. If I ever just jump right into animation, those drawings just tend to look a little stiff, it's like sketching in the design section but we're going to be figuring out the motion. There's a million ways to animate something, so we just have to figure out what that is now. We have our timeline, we set it to 24 frames per second, and now we're ready to make our second key pose. What are keys? Keys are the storytelling drawings. In the case of our self-portrait, one girl splits and becomes two, those are our two storytelling positions. We need to create a new layer and it goes until the end of time. Just go ahead one frame, trim that with your hot keys, I always rename my layers, so I'm going to call this A-pose. I'm going to make all of these fit nice and neatly into my B-pose, so I'm going to make them a group for now and I'm going to label these. Turn the opacity down by hitting B3 and turn it down to 30 percent. I'm going to pick a color, say blue to roughs. The first key pose of our self-portrait is one girl, so I'm just referencing the second B-pose to make my first drawing. I'm going to separate one half to its own layer so I can move some things around a bit, hit L to activate my lasso tool and then select this area of the drawing, hit Command, Shift J to copy and paste this onto its own layer. Now it's time to clean this up because all of the other drawings are going to be based on both of these. Make sure that your playhead is of the correct spot, create a new layer. This is my clean up drawing, so I'm going to label this A again, and I'm going to label this "rough" and since it's a rough I'm going to make it blue. Speaking of colors, the color palette. I'm going to use a smaller brush. Don't trace them exactly, that rough is really there just as a guide. Now I'll show you the actions for coloring, I'm just going to hit F4. Now I'm going to have to lay this out over time and see how they're working together, so that I can animate between drawing A and drawing B. I'm going to change the name of this folder to A, and we should be good. Now I'm just going to toggle back and forth between these. You can drag the playhead or you can hit your shortcut keys Command K to go back a frame if you set those same as me. Command L to go forward one frame, so I'm just going to toggle back and forth. 9. Extremes: I could draw a midpoint directly between these two poses, but that's not interesting, which brings me to extremes. They're the ends of the action where there's a change in direction. It gives more life to the action, more contrast. This would be your new midpoint. This might be the midpoint going back to B. Maybe a couple of eases as here. We don't know, we're still going to figure out our timing. Now, I'm going to try to create this extreme position. I'm going to highlight my layer, I'm going to turn the opacity down by I think, V3, that brings the entire layer down 30 percent. I'm going to turn on my onion skins. I have this set to Command Shift O. Yes. To get to your onion skins, you can just go to this little window up in the corner right here, make sure that's turned on. Then go to your onion skin settings. That's the default. I'm going to change this to two before and two after, and keep it on multiply because I'm working with a light background. Turn on my guides and just plot out how far I want to push this. I'm going to pick my blue color again, just going to be super loose. This is where being very rough comes in handy because you're just figuring things out. Looking good. I'm going to turn the opacity back up by hitting V0. Now, I'm seeing things that I missed before. I'm going to turn this back up to 100 as well, but you have to be over top the layer on the timeline. Hit V0 to bring that back up. The reason we're still seeing everything is because the onion skins are on. So you can take them off, but I have my shortcut set to Shift Command O. Now, we can toggle back and forth. Command K to go back a frame, Command L to go forward one frame. Sometimes, if you don't have the onion skins on, this is where toggling can help you see even more. Let's see. Done a lot of works so far so don't forget to hit "Save". I'm just going to clean this up a little bit. Now, everything in our extreme pose is finished. We're happy with how it looks. We want to move it around, we want to change the duration or anything like that, you can put everything into a Smart Object. Like working in Flash, if you were to put everything into a symbol. I'm pretty happy with my B pose and my extreme pose, I'm not going to change anything about them so I'm going to put them into a Smart Object. With my B folder selected, I'm going to go to "Layer", "Smart Objects", "Convert to Smart Object". Now, I can just move this one layer around, and everything is contained, it's in one nice flat layer. If you wanted to change anything in the layers, you just double-click in your Layer window and it opens up a new project, and all of your layers are still here. All you have to do before you go back to your next project here, any changes that you make, you just have to save. Let's try it again with our extreme. I'm really happy with how it looks. I'm going to go to "Layer", "Smart Object", "Convert to Smart Object". Now, we have our layer right here, but after toggling back and forth, I realize there's something I want to change. Let's go in and fix that. I just hit "Save", then close our Smart Object and the changes are made in our original project. The change was so obvious. Maybe I should have done something more obvious but I think you get the point. We have our X, our extreme, our B pose, and our A. If we now want to make this extreme longer, we can just drag out that one smart object. Whereas before, if we have 20 layers, we have to be dragging them all out one at a time. We're going to play that back and see how that looks. Okay, it's looking pretty good. Keep going with your keys and extremes and in the next section, we're going to be finishing up our animation. 10. Midpoints: Now, we already have a little bit of animation happening, we just have to break it down even further, and that brings us to our midpoints. The midpoints are literally the breakdown positions, they take you from one extreme to another. We're going to focus on that first, and then we're going to break it down even more and get into our in-betweens, and anticipation, and reaction, and counteraction, but for now, we're going to take it one step at a time. You can use your onion skins to do this or sometimes, there's better playback if you just turn your opacity down on the layer above and below and just work between the two layers. Now, we're drawing on our rough layer, and we have drawing A on a low opacity above, and our extreme on a low capacity below, and I'm just going to start on wrapping out in midpoint. I'm going to keep my drawings really rough and I probably won't clean up until the end, because I might have to change things. I'm going to create a folder for this and call this M for midpoint, and throw the rough layer in there. Where you place the midpoint is really important because the spacing of the drawings is going to change the timing of the animation. So if I put this directly in the middle, it's going to have a fairly even motion. I'm also not going to stretch this drawing too much, so I'm going to reference my key pose. I want the exchange to feel more impactful and have more of that change, and to also feel like you're feeling it and not seeing it, and then you feel like there's more change if that drawing is the only one that stretching. But yeah, I'm not over exaggerating the drawing. Now, I can leave this over time and see how it's looking. Then I want this to last maybe two frames. I think that's looking pretty good. Let's work on this midpoint. I'm going to duplicate my rough, select all, delete, a new layer, make a new group. Now, I'm just going to work on the midpoint between our extreme and our B pose, we're just breaking it down to just doing our midpoints. We have our first pass which is the keys, our second pass which is our extremes, and we go through and do all of our midpoints, and then we'll get to all that stuff in-between. I'm going to save my work so far. One other thing about midpoints is that they create an arc in your action. Here, in this case, I'm actually not going to draw an arc because I want my line of action to be straight and fast, and that's why this is just straight, but normally, an arc would be nice. I feel like it would slow down this action, I want to make it look a little bit too bouncy and that's really what I'm going for. I'm going to move this over in time. If I know the opacity up on all the layers. It's looking pretty good. Her hair, which is going to have some counteraction in front of you, the hair is going to be moving there a couple of steps later. Now, we just have to break it down even more, but it's getting there. That wraps up part 1 of the animation unit, and we're going to go adding in-betweens, anticipation, and settles in the next unit. 11. Anticipation, Action & Reaction: Are we there yet? We're almost there. We roughed out our keys. We've talked about extremes, our mid points. Now we just have to finish the damn thing. What's next? Anticipation. All anticipation does is it tells the viewer what you're going to do before you do it. Then in order to do that, it would make your animation move in opposite direction of where it's going. Get as creative as you want and if you want to have your character jump up before they go down or go left before they go right, it's a great way to bring more life into your artwork and make it look a little bit less computery and robotic. Secondary action such as a blink can also anticipate. I'm going to go into my smart object. Let's think about this. She's going to start with her eyes open, she's going to blink somewhere around here, and then she's going to open her eyes again. I'm going to split these layers and save it. It's going to take her four frames to blink and then she is going to open your eyes again. Going to delete these. I'm just going to organize this so that we have two clear beginnings and ends of our cycle. This is the beginning. Her eyes are open, her eyes are going to close, and then they're open again. This is going to be a little cycle, so we'll call the first open position C, and it's going to open again with C, and then somewhere in the middle, we're going to have close D. So we'll call this CDC. Create a new layer. I'm going to trim it and turn on my onion skins. Now we're going to draw D. I'm going to point red. I'm just going to draw the top of her lid and her eyelashes. Turn off the onion skins. You can see that she's got a closed eye and if you play this, actually thinking that I might give her a little lid color. I'm just going to duplicate that layer, select all, delete it so it's empty, and I'll just color it the same color as her cheeks. We probably only need this drawing to actually last for two frames. Now I'm going to just do a midpoint between the open and the eye, just between C and D. We'll make a new layer, turn the onion skins on, leave it open, and a closed eye. So I'm just going to have her starting to close her eyes. I have my line layer, call this M. I'm going to duplicate it, eyeliner, color those pupils, select all, delete, duplicate it again, then call this eyes, the whites. Turn on our onion skins and color the blue. Then the eyes, I'm going to color the whites and the lids on the same layer. She's blinking, simple blink. From D to C, she can have the same exact midpoint, so I'm just going to duplicate this, move it over in time. See how that looks. Here, I'm going to do one more drawing between the closed eye and half-closed eye. I think I'm going to also trim this to one frame because it's feeling a little slow. I'm going to duplicate this whole folder. Just going to call this ease, I'm going to move it over, and I will make it purple, and I just need to fill everything, so select all, delete, delete. Now I have the blank layers, and we just need to twin these. Save all the changes that we've made in our smart object. That's a little animation cycle. Let's see how that looks in our main animation. That little blink adds a little hint of an anticipation before our action. Let's say we want to see what a real anticipation would look like. Duplicate my rough layer and maybe it'll just be one frame. The blink layer start giving us more organized. I'll make my midpoints red. I'll name my anticipation, going from outward in a little bit down. To anticipate, we would probably go inward and a little bit up, just to go into the opposite direction. Normally, she's going out. We're just going to take this and move it in a little bit, and maybe up. Cheeks going up, shoulders might go down. It would be even better if it was more obvious. Maybe redo my timing chart. Our keys are midpoints and I don't we have this anticipation pose. I think I'd probably want at least one ease between those, two eases at least here, two eases going out of the extreme, maybe three eases there. We can try that and see how that looks. Going through our in-betweens, we're just breaking it down. I know I want to ease out of this so I'm going to add an in-between between the midpoint and the anticipation. We're just going to keep in-betweening now. We have our anticipation, our action, and now we need a reaction. We're going to settle back from our extreme into our B position, so it's going to be different depending on what you're animating. It's not really necessary for me to go over every single drawing here, but I will do at least one more ease just to show you how it's going to settle. Also, I'd like to add a little wink at the end here. Reaction's done, just need to settle and the follow-through with the hair. Let's watch that playback. Cool. I'm going to press "Save" so we don't lose any of our work. Probably need to take a break, and that's my dog crying so I need to take her out for a walk. Then we're going to go back in. We're going to clean this up and color it. 12. Animation Ink and Color: Hey, it's ink and color unit for animation. Finally, we're almost there. The light is at the end of the tunnel. Remember those actions from the Alex Grey tutorial I was telling you about, they're really going to come in handy here. You should make some actions, if not, whatever works for you, whatever keeps you saying. I'm going to start by creating my template. One group for the head, I'm going to have another group for the body, I can just call it sweater, so sweater. Inside these groups, can I make my layers? I'll just duplicate this one. Select all delete, select. I'm going to keep my rough layer at a low opacity as I'm working while I'm cleaning up. I have this at 30 percent, but I'm going to bump up all my clean-up layers to 100. I know that inside the head layer, I had four layers. Face, fills, the color was on separate layers and her line layer. I'm going to make all of the heads orange. Let's duplicate this, drag it into a sweater layer, make all of these sweaters yellow. I think there was four layers in here as well. We had the neck, sweater and then I had my two clipping masks for her pattern and her arms. That's just a way to keep it organized. I can duplicate this group, name it template. Then every time I need to make a new clean up drawing, I can drag this template into all of my layers, but that at the bottom for now and duplicate it as I go for every new drawing. I'm going to save. It helps if you keep the rough layer on but also if you still look at your initial two poses that you are inbetweening and you keep them on a low opacity. But yeah it just helps to have them there as a guide. This is another reason why I don't like to use onion skin sometimes because that would be looking over all of these different layers and it would get crazy. Save. See how it's playing back, looking pretty good. Just keeps it going. Now that we have one drawing down, the next thing to do would be to go in the exact same order that we did our inbetweens. It may be hard for you to remember how you did that. I was good about labeling stuff. Do all of the extremes and then the midpoints first, so I would even do the anticipation before I went into any eases. For example, I would do my anticipation next. Like I said, I duplicated my templates, so now all of my layers are ready to go and I'm just going to begin drawing. I'm anticipating into my midpoint from my a position, so I'm just going to reference that, I'm just going to pull that over and turn the opacity down. We have all my layers copied and duplicated and do this for every single layer, that's really all I need to get going on this drawing. Just save another version of this. Save as "Cleanup animation version 1". I had strongly suggest saving different versions every hour or less, you never know if you make a mistake and then you can go back and retrieve the lost work from the earlier version. For my cleanup I'm going in order, we have keys, those are inked, we've our extreme that's inked, anticipation could technically be considered another extreme, that's inked, midpoint, inked. One more and midpoint to go, and then we're just going to have our eases and that's it. Just like before, I'm just dragging out the keyframes that I was inbetweening from. I'm going to go ahead and start making this as well. Our midpoints and all of our extreme, you're done. Now, it's time to go into our inbetweens. Here they go and we're also going to turn these into smart objects so that I can have more flexibility. We're just going to finish up the rest of these eases, there's not too many left. Let's see how that looks. Great. So we're happy with the animation that we've created and we're ready to export a GIF to the project gallery. I'm going to show you the export settings here. We're going to go to File, Export, Save for Web. We're going to choose a GIF, set the size to 50 percent, make sure that the looping options are set to Forever, change your destination, rename it, and hit "Save" again, edit your project, upload photo, choose your GIF, hit "Open". There we go. Make sure that you save your project. That's it. Great job everyone. Check out the other student's work and don't forget to leave feedback. 13. Share the Awesome Thing You Made!: Hello, again. Now you've got a new little animation to share with everyone, so upload to your favorite sites like Facebook, Instagram, Dribble, Tumbr or Twitter, and share it with the world. We're looking forward to seeing all the animated self-portraits that you create, so don't forget to upload your projects to Project Gallery. We hope you guys had fun taking this class and that you now have something you can use for your logo website films bubble or real. Or your next film. Thanks for taking the class. Thanks everyone. 14. The Timeline & "Pose to Pose" Animation: Hey. Hey. How are you? Good, how is the going? I was just thinking we should talk about the Photoshop timeline. I think so too. It's a little confusing. It is a little confusing. We should go over that in greater detail. Okay. Let's do it. All right. Is that working? Yes. I see your screen. Great. First, I'm going to make a new project to start from the basics, so I'm going to call this basic bonus class. Now we have a new empty layer, just our background. I'm just going to make a new layer, layer 1, and it has nothing in it right now, it's completely blank. I'm just going to go create video timeline. If you check out the timeline, you can see that your layer 1 right here in the layer window, now is on your timeline and it lasts for five seconds. There's nothing in here, it's just a blank layer. The first thing that we do when we start animating Photoshop, we pull up this drop-down menu, and we change our timeline frame rate. We're just changing it 24 frames per second because that's how I like to work. If you work at something else, that's totally up to you. But changing it later on is really annoying, so just set it before you do anything. Click Okay. The next thing that some people like to do is to enable timeline shortcut keys because if you do that, I don't even know how this works. It's in the art skills tutorial. Joy, don't say shit in art skill share class. Sorry, I never enable the timeline shortcut keys. If you do, it enables you to use your arrow keys to go left and to go right. Is it because your layers all the way to start the play head, does your layer have to be like one frame over? Oh my God. Yes. Right, if you enable the timeline shortcut keys while your layer is at the start of the timeline, they won't work. You have to move it over and then they're working magically. This is why I don't do this. I mean, I guess you would have to just move it over once and then move your work area over and then you can use these to go forward. I'm hitting the right arrow key that's going forward in time, if I hit the left arrow key it goes back. If I hit Up, it goes to the start, if I hit Down it goes to the end. That's great for some people. However, I like to use my arrows. If I had a drawing here, I'll demonstrate that in just a minute. I like to move my drawing around and if the enabled timeline shortcut keys is on, can't do that. I'm going to turn it off now, I said I don't want to do with it anymore. Another thing that I think is really important for Photoshop, we talked about the shortcuts that we set in the previous video, I just want to make sure that they're all set here. I am on my laptop. today Put a panel, menus, timeline, video. Now I have my next frame, is I made a hotkey for it or a shortcut key, Command L goes forward, Command K goes back. Then if I want to trim the start of my play head, I trim the end of my play head, I click that. Then the only other ones I would suggest are, if you want to use the onion skins, I do Shift Command O, and then if you want onion skin settings set I just set that. We made our hotkeys, then we just do this really simply, let's say that I want this to last eight frames for my play head at seven frame and hit Command close bracket, and now my animation is in use. I'm just going to start drawing a later one, myself portrait, really simplified self-portrait. That looks like you. Looks like you too. If I hide the background layer, you can see that layer 1 is just this little face. Now I can move it with my arrow keys. I'm happy with how that looks but I'm going to turn my white background on again, because I hate looking at that grid, and I'm going to make a new layer. I want to start right here, and I'm going to create my new layer, and drag it out over time. The layers in the timeline window look like layers in aftereffects. Exactly. Now we have layer 2, let's just say that I want layer 2 to be two frames, so I'll move forward over time. I mean, you can also use the little toolbar over here if you don't want to get all its hotkeys and you just want to do things the long way, the simple way, you could just use this to go forward, you can use this to go back. This goes to the beginning, this plays. You can use this to trim, this is our little scissor right here. I just work with the keyboard mostly, but they give you the basic tools right here on the timeline. I just trimmed my layer, now I have layer 2. Layer 1, layer 2. I want to be able to animate between these two frames. I can go to Enable my Onion Skins, and now you can see this layer is a little bit transparent, but the onion skin settings, and you can see how many frames before and after that you want to see, and I usually set that to two. We will go over this a little bit in the other lessons, but it's like an onion skin, how it's see-through. If I go two frames, I can still see this drawing. What should my character do? I set a hotkey for turning off my onion skins, and I think it was Command Shift L, yeah. Now I can play this and see how this works. If you go to this window, you can set this to loop playback, and then I just hit the Space right to play. Yeah, this had a meaning. I think we need a midpoint between these two keys where I am going to say, I wanted to create a new layer, and I just did it the normal way by hitting this new layer button right here. It starts at wherever my play head is and it's super long. It's five seconds in length for however long my work area is. Then I have to move it over and I have to go over in time and I have to trim it. It's just too much work so you have to do this over and over again. So whether you downloaded the anime facade to plug in, whatever you choose to do to make your life easier, I like to use the algebraic method, which is just duplicating a layer by dragging it down to the New Layer window. My new layer is in my Layer window and on the timeline, and now it gives me a layer that is the same length as the one that I duplicated. It starts it at the same exact spot as the layer that I duplicated it from. Just to make this easier to see, I can color-code it. This is red. You can see it on the layer window that it's also red, a layer 2, which I can make green because it's a key, in layer 1 I can also make that green, is the key. Now it's a little bit easier for you to see on the timeline and the project window. The only problem here is since I duplicated layer 2, I'm just going to call this layer 3, let's rename it. Layer 3 also has the same artwork that layer 2 has, so I have to delete the artwork that's on layer 3 to have a blink layer to work on. I'm just going to go to Select All, Edit, Cut. That removed the artwork from layer 3. Now we turn on layer 3, you can see it's blank, now when I turn on layer 2, see that there's art work there. I move layer 2 over in time. I'm going to turn on my onion skins again, you can use your hotkeys, you can just hit Enable Onion Skins. Since I have it set two frames before and two after, I can now see between layer 1 and layer 2, and I can make a midpoint. Joy, can I just say, I like this artwork that you designed way more than the one that I designed. I am going to turn off my onions skins. I am going to press Play by hitting the Space-bar. Looks like he's yawning. He's sleepy. I am a little sleepy. Well, if he was yawning, I would probably want this to last a little bit longer. See everybody's self portraits are going to be different. You might not need all of the 12 principles of animation in your self portrait. You might also want to just do some straight ahead animation. What you mean by straight ahead animation, would be instead of doing it pose to pose, you just swell and making him yawn instead of working backwards. Yeah, I talked about this a little bit in the project set up, but I didn't really demonstrate it in the class. Is that if you duplicate layer 2, and now I have the same artwork on both of these, so I need to select all, and cut or delete. Now I have a blank layer. I know that I want to do straight ahead animations. Pose to pose stuff is just a little too complicated, and I'm a beginner, one easy thing that you can do if you know that you like to animate for two frames, which is really good to animate and it is a good way to work. You can go down in your timeline, trim it to two frames, you can make this layer 4, however you want to name it, and just duplicate it. These are all blank, so I'm just going to move these down over time. You can see that as I'm grabbing them, they're highlighting in the project window. This is just straight ahead animation that I'm going to show you right now, I always animate pose to pose, but straight ahead is a little bit more simple. 15. "Straight Ahead" Animation and Merging Layers: Another thing that I demonstrated in the classes that I don't always use onion skins, sometimes, I'll just work directly underneath a layer, and this might be a little confusing for some people but I do have a reason for it. Because I do pose-to-pose, sometimes, I'm working between lots of different layers and just with the onion skins, it would be too much to look at. Sometimes, I just turn the opacity down to 30 percent, and I use a hotkey at hue hit V3, it also hits at 30 percent. V0 raise it up to 100 and V3 brings it down to 30 percent. Then I just work pose-to-pose that way. This is just another way of tracing without using the onion skins. But I think to keep things simple, maybe everybody should just use the onion skins if you are a beginner, if not and you're using pose-to-pose, I recommend just turning the keys that you're working between to 30 percent just to see better. I'm going to hit Command Shift O to bring up my onion skins, and he's going to yawn. If I was going to do straight ahead animation, I would just go down the timeline. More sleepy. When you're going down the timeline, what was your hotkey to move forward in time, is that Command L? Yeah. As you're moving down the timeline, you can't just hit Command L and start drawing, you have to select the layer that you want to draw. That's true. You could do that in either the timeline or the layer window, it doesn't matter. Right. Sometimes, I don't even bother with the hotkeys and I just use my cursor. Going straight ahead, and I don't really work this way a lot because I start feeling like I'm getting lost. I prefer pose-to-pose too, I think it's just a more organized way of work. I lose my mind if I did straight ahead animation. It works for some things, like animating special effects are great to do straight ahead. The timing is not perfect, but what do you think? I think it's great. Okay. Well, I have these three blank layers here that I don't think I really need, so I'm just going to delete them for now. I'm going to see, with the timing, I noticed that this layer felt a little long. If you're feeling like the timing feels weird, you could just trim your layers. I trimmed this layer to two frames, and now I have this blank space right here, so I'm just going to select all of these layers. You can select them in the timeline window or the layer window and just drag them over. In the end, I want him to go back to his first key. I want to duplicate layer 1, and I'm going to move it down to the bottom of the timeline, then I'm just going to move it over in time, and see how that looks. It's going to look pretty snappy. Well, it's almost a little too snappy. I feel like I need another midpoint here, so maybe I'll just duplicate the midpoint that I made before. I can easily see my midpoint because I always make them red. I'm going to duplicate it, and I'm going to just keep that same exact drawing. I'm going to move it down, and over in time, then I'm just going to slide this over. Yeah, what do you think? That looks pretty good. I think I'm done. That's a great yawn. Maybe one more pose here. Let's see. I'll duplicate this, have a new layer, I'm going to select all, I'm going to cut or delete, and now, my layer is blank. I'm going to turn on my onion skin so I can trace between these two drawings. Perfect. That's a little of the two methods of straight ahead and pose-to-pose. I find that using both methods is really helpful. Figuring out what works for the timing is just like watching it over and over again, trying different things after adding new layers and seeing what works better. Maybe it's funnier if you hold something for longer. Just trial and error. Yeah, maybe when he yawns right here, it'd be funny. Like the height of his yawn. Yeah. Maybe he needs another layer right there. This is just going to show one other area that I think that people were having trouble with. Say, I create a new layer, I am going to create my new layer by duplicating this one. I'm going to delete the artwork that's on this layer, duplicate it, select "All", I'm going to delete it. We follow this stuff over, all these layers down in time, I have a blank layer, I'm going to turn on my onion skins. I'm going to select my layer that I'm drawing on, he's going to have a little boil or shake right here. The height of his yawn. Turn off my onion skins. I'm going to toggle back and forth. You're toggling, you're just going back and forth between the previous frame and the next frame. This will look funny, I think, if I duplicated these three again. Maybe at least two of these, I'll duplicate these. Pretty funny. That's selling the yawn a little bit. I just wanted to demonstrate merging layers. I'm just going to duplicate that layer again, select "All", and delete. I'm just drawing a layer right on top of this one. I'm going to see if I like it. Seems like he's saying, "Hello to a new day." Duplicate this layer, select "All", and delete. This is why I really regret not getting the AnimDessin plugin because making new layers is really a lot easier. Yeah, I think there's just a little button that says, you can either make a layer that's one frame long or two frames long, and you just click it once and it's done for you. Right, I really recommend it even though I don't teach it in my tutorial. Either just the little sparks that I just made. I'm just going to make them purple for now so that you could see them easier, see how they correlate to the layers in the layer window, in the timeline window. Let's see how that looks. That's great. That's brilliant. I'm going to merge these because I love how that looks. Wow, I merged them and they are still two frames, I don't know how that happens. You know why? In the demonstration when I merged them, I merged my two frame layer with the layer that was probably as long as the timeline, and that's why it happens. Watch this. Say for some reason, your layer, it looks like that, and you want to merge these. Control, click, "Merge Layers." Well, maybe it's because that was the layer on top. Maybe the layer on top is the one that Photoshop decides is the [inaudible] Probably the same thing as when you merge them and it's going to now name these like Layer 4 copy 11. Yeah. Yeah, exactly. It's the same rules apply as when you merge them in the layer window, how the top layer takes precedence over the bottom layer. So just be careful about which layer is on top and how many frames it is, and the name of it is, and how those usual annoying Photoshop rules. Yeah. I like how we figured that out together. You'll look it that [inaudible] it. Let's all get confused together. This was a pretty simple basic tutorial based on some of the questions in our discussion board. If you have any other questions about anything at all that was confusing in the video, we're happy to post another tutorial or we could write back in the discussion, but keep the feedback coming because we're learning a lot and we appreciate it. Yeah, we appreciate it. Thanks, guys. Okay. Now, have a good night, Nelly. Yeah, you too, Joy. This was fun. Bye. Bye. We don't really have to go. I know. Okay, stop recording.