00:00
00:00
dylan
I do work (no pay)

dylan @dylan

Age 32, Male

let's do lunch, TX

Joined on 7/14/12

Level:
13
Exp Points:
1,682 / 1,880
Exp Rank:
37,076
Vote Power:
5.49 votes
Art Scouts
1
Rank:
Safety Patrol
Global Rank:
26,686
Blams:
60
Saves:
308
B/P Bonus:
6%
Whistle:
Normal
Trophies:
25
Medals:
1
Supporter:
9y 10m 7d
Gear:
6

Photoshop Animation: part II

Posted by dylan - June 15th, 2014


edit: part III up now!

read part I here!

Hey Pops,
more on the photoshop animation front. If you missed my last post, check it out. It's got a lot of basic and fun things for you to check out, including some damned beautiful animations to watch.

Getting Started:

The first hurdle in photoshop animation is getting what is traditionally a drawing program to work as an animation program. When you boot it up, it’s not going to have things like ‘insert frame’ or ‘insert blank keyframe’ as hotkeys like Flash or other programs will. It won't even have a timeline out for you, how cold. You have to do all that yourself, which is what I feel turns people off of Photoshop animation in the fist place, the difficulty of doing something as simple as adding a frame. However, we can fix this problem by setting up some ‘actions.’

Actions help PS to finally become a competitive animation software. These actions work exactly like your ‘F’ keys in Flash, only they are much more customizable in PS, which is one of the things that makes the program so powerful. Basically, an action is a series of, well... actions that you tell Photoshop to do whenever you hit a certain F key. They can be anything in the program, from changing brushes and advancing a frame, to going through 18 different menus and completely changing the perameters of your file. 

I know that TVPaint has something similar to actions in it. When I try out TVPaint more in-depth later this fall I’ll make sure to do a writeup on it. As far as I know, ToonBoom does not have a version of these, but I’ll do a write up on that after checking out the software more this fall, as well.

step one, watch the second Alex Grigg tutorial from part I of my posts. It’s incredibly important that you learn how to use and create actions in order to make PS a viable program. He talks about his actions and explains how to make your own at 35:45, so skip there if you need to, but you should honestly watch the whole video. A lot of what he’s doing may not make sense if you don’t.

So now you should know how to make actions, great! I've included my set of actions (many of which are, or are derivitive of, Alex's) in the .zip file on the dumping grounds. You can use those as-is if you'd like, but making them yourself (or at least editing mine) will allow you to really customize photoshop in a way that works with you.

I'm going to list my keys, along with the general idea of what they do, here so that you can get an idea of what actions can do. I’m on a mac, so PC users remember that my cmd is the same as your ctrl. There are a few that aren’t in the downloadable zip, as I’ve just made them in the past few days, but I’ll put them at the bottom of the list. If you think they’d be useful, have a crack at making them yourself! They’re super simple.

I apologize in advance for how boring reading all of these action descriptions will be. You could probably figure out all of them by just importing them and messing around with em for a few hours, but having their descriptions here may be useful. Importing, if you choose to do that, is super easy: open the actions panel, click the 'other options' arrow thing, click 'load actions,' and choose my set from your files.


  • F1 - new frame. used during layer animation to create a blank keyframe one layer above the current one. It also changes the opacity of the original layer to 30%, which makes for a quick, effective onion skin that can be edited into different layer styles (overlay, multiply, screen, etc.). 
  • cmdF1 - insert frame. used during video layer animation to insert a frame without altering current timing like duplicating a frame would. It does the standard "duplicate frame," then deletes the frame it took the place of to keep timing correct.
  • F2 - expand-fill on layer beneath. this is going to be your primary bucket fill in PS. It expands your selection before filling to counteract anti-aliasing. Before using this action, be sure to create a selection with magic wand/lasso/etc. You select on your lineart layer, then perform the action, which will expand selection, drop down one layer, fill, step back up, deselect, and move forward one frame.
  • cmdF2 - expand-fill on same layer. same idea as my F2, just does it on the current layer. 
  • F3 - new color layer. does the same thing as F1, just with the blank layer ending up on the layer beneath the current. This is the layer all of your F2 fills should be heading. Thinking about it now, this would make for a better cmdF1 hotkey than I currently have.
  • F4 - set framerate, this one you’ll want to do EVERY SINGLE TIME you create a new document. First thing. Trust me. Changing your FPS later on will be a huge pain if you try to go from Photoshop’s default 29.97fps to something like 24 or 25, causing all sorts of annoying timing issues. Get into the habit of using this hotkey each time you make a new document. I prefer to have my final product at 25fps, so I start with 12.5 for storage space reasons (as it’ll double to 25 with no timing issues). If you like 24, use 12 instead of 12.5. Maybe there’s a way to change the default somewhere else, but I don’t know it. If you figure that out, you can avoid this step (and should inform me so I can avoid it as well).
  • F5 - double framerate, if there comes a time when you want to add in some ones, or change your timing a bit, use this hotkey to set your framerate to twice the one you chose with F4. Remember that going up to a higher framerate may cause performance issues if your computer isn’t the best (like mine) or if you have heavy effects, so I tend to save this step until as late as possible.
  • F6 - duplicate frame. Just quicker than going through menus. This one will duplicate your current frame to the next one in a video layer. Unlike cmdF1, this one WILL change your timing. Be careful. It's a lot like hitting F5 in Flash, how it'll add an extra frame of exposure, moving all your animation from then-on over by one frame.
  • cmdF6 - delete frame. This one will delete the current frame on your video layer, I most often use this to fix timing issues when I’ve messed them up with F6.
  • F8 - new blank video layer, this one’s great. It creates, as you’d guess, a new blank video layer. The beauty of this one is that it deletes everything on the new layer before your current spot on the timeline, making it easier to see where you're working. It seems like having some extra tail end wouldn't be a bad thing, but when you've got a ton of video layers all starting at frame one and going on until the end, things get confusing. 
  • F9 - merge all visible on current layer, this is what I use to combine all different assets into one layer. Like if I have different bits of line art on separate layers that need to be combined onto one layer before filling. Great for cleanup animation and just cleaning up your timeline in general. Just make sure to hide all the layers you don’t want included! Before using this action, create a new blank video layer to put all of your merged frames onto.
  • cmdF9 - F9x16, just does the F9 copy as many times as you’d like (16 is pretty arbitrary), to make the process of batching up all your work much faster and easier on your wrists. It’s the exact same steps as F9, just duplicate them a bunch.

not-included actions:

  • shift F1 - change layer beneath to opacity 30% and the layer above to opacity 50%. Quick way to make an onion skin while inbetweening. Might alter it later to reposition the layer above and below to the same time as the current frame.
  • cmdF4 - add spill room. So I started noticing that PS doesn’t let you draw outside the stage, which can be an issue when animating things entering or leaving the frame. This action first bucket fills the current layer (so make sure your on your original, solid background layer), then expands the canvas by 100px on all sides. This will give you extra drawing room, and since photoshop adds the extra room in your secondary color, you can see where the actual stage ends. You could honestly add this as part of your regular F4 key to make it simpler. 
  • shift cmdF4 - remove spill room. Just takes off 100px on all sides.

So those are the actions! Wow, that was a lot of stuff. The main takeaway is that actions will make photoshop as viable an animation program as any other, perhaps even making your workflow faster. If you know how to make actions, you'll be able to solve your own problems as they arise. For instance, I’ll often find myself digging through some obscure set of menus and clicks to perform a task like 10-20 times per hour, taking maybe 30 seconds before I’m back to animating each time. 

That's 5-10 minutes out of each hour that I miss out on animating, and it easily adds up to a significant chunk of time over the course of a project. And that’s not only applicable to Photoshop, I find that most programs have things that take way too long for how often I have to do them. The difference is that Photoshop has a way to work around these issues.

An action, which will take all of a minute to set up, will solve these issue forever. For work, or even something like NATA, where time is incredibly important, you'll want to save as much of it as possible for what actually matters, animating.

Anywho, you’re now ready to get into the good stuff: animating. Too bad you gotta wait til next time, probably sometime after this round of NATA closes, cause this was longer than I thought it would be. Speaking of NATA, be on the lookout, my next post will have a bunch of Creative Commons source files from my NATA round 2 film. Should be more useful this time, I've got some quadruped walk cycles (a hare and a fox) from multiple angles for you. Yay!

Man, I am so sorry for how dry all this info must be so far. I’ll try to make the next one more fun. No promises, though.

here's those files one more time:
http://www.newgrounds.com/dump/item/b0bcc23b80a3ac72e049528dbf143629

love you dad,
dylan


Comments

These are so useful, thanks so much! Also your pine animations is wonderful!