Powerhoof! PIXEL ART in photoshop...


I thought it might be fun to mention some of the stuff I’ve found useful for pixel/animation work in Photoshop.

Aliased tools

First thing is obviously to turn off all theΒ  anti aliasing.

Switch the Paintbrush for the Pencil, put the Eraser into pencil mode, and untick “anti aliasing” check boxes for the Lasso and Paintbucket. Β I like to go into the settings and turn off pixel grid if it’s on- that thing makes it impossible to see!

tut1


The “contiguous” toggle for Lasso and Paintbucket can be really useful. If you want to fill color on a 1 pixel diagonal line this lets you do it without individually touching each pixel.

tut2

Layers

Generally you have a layer for each frame and use the visibility toggles to hide the layers you don’t want visible on each frame… so only layer1 is visible on frame1, layer2 on frame2, etc.

But it can sometimes be useful to keep characters split up into multiple layers. To help with that, I put layers for each frame in a folder and animate the visibility of the folders on each frame. Then I can use the magnifying glass dopdown at the top of the Layers Window to hide the layers not currently visible. So as I move through the frames of my animation, all the unnecessary layers automatically hide.

tut4

Set the dropdown to “attribute” and leave the attribute on “visible”. You can use the little toggle next to “visible” to turn the hiding on/off.

I use this sometimes for walk cycles; I’ll put the head, torso, pelvis, arms and legs each on their own layer, then put all the layers in a group. I’ll make a copy of that group for each frame and animate the visibility of the groups.

Then you can move an arm or a leg up or down without having to redraw anything around or behind it.

Selecting Layers

When working with your guy split into layers like this, it helps to Alt+RightClick on a body part to auto-select the layer it’s on.

Usually Alt+RightClick only works with the move tool but if you toggle “auto select” this will work for the pencil/eraser too. (Be aware with “auto select” on, the move tool will move whatever layer you click on instead of the layer currently selected).

tut5

Creating and Collapsing Layers

In the menu at the top right corner of your Timeline window, there are a few useful tools.

New Layers Visible in All Frames defaults to ON, but I like it turned OFF. With this off, when I create a new layer it will only be visible on the frame I was on when I created it. This means i can create new layers on the fly to add details to the frame I’m working on, and it won’t mess with any other frames.

Flatten Frames Into Layers is also really useful and does exactly what it sounds like. When your many messy layers get out of hand, or when you want to move onto the refinement stage of the animation, use this to automatically flatten the layers of each frame into one single layer for each frame.

tut3

Be sure to hide your background layer before you Flatten Frames Into Layers, or you’ll end up with the background flattened in there too. You can unhide it after you’ve flattened, as this process doesn’t get rid of your original layers, just hides them all.

With complex walk anims I’ll often keep the layers separate while I’m sketching out the basic movement to keep it all very tweakable, then collapse it down and work with one layer per frame while I add details and refine the pixel jaggies and stuff.

That’s it really for basic tools setup, I’ll go step-by-step through an animation to show what I’m talking about some time soon πŸ™‚

-Barney

  1. Really useful stuff. Cheers.

    Reply
  2. Tiago Franco

    Thank you so much for sharing this. I also do pixel art animation in Photoshop, some of these tips are so very useful. Your technique for walk cycles seems great, I never thought about using the layer filtering that way.

    Maybe you could do some kind of screencast showing all this and other techniques in practice?

    Also, your animation style is gorgeous, I can’t wait to play Crawl.

    Reply
    • Hey thanks, I’m glad you found this useful πŸ™‚ finding a comfortable workflow can be a real headache. Streaming some animation work might be fun some time, I just need some free time to figure out how streaming software works and do some tests πŸ™‚

      Anyway, thanks for the encouragement!

      Reply
      • Tiago Franco

        Not necessarily a stream, a simple screen recording with some commentary would be sweet. πŸ˜‰

        By the way, here’s something I did when trying to integrate some of your tips into my own workflow πŸ™‚
        http://f.cl.ly/items/171U0G2m0x2F3I2v430U/test-dash-anim.gif

        Cheers!

        Reply
        • yeah cool, i’d really like to do that some time… looking at what you did makes me think i could at least make slowed down gifs with some annotations explaining why certain frames are how they are etc

          just gotta find time some day which is the big struggle, so damn busy now!

          Reply
  3. Gustavo Leite

    Hi! What size of image do you use to make this characters animation? And what frame speed?
    Very nice tutorials! =)
    Thanks a lot =)

    Reply
    • for the hero i have a little image 36 pixels high, with the hero himself about 17 pixels high. when i’m first designing the keyframes, i make the image like 600 pixels wide or something and draw the key poses out in order from left to right so i can see them all next to each other (that helps to make sure your characters proportions don’t change over time).

      once i’m happy with the key poses, i move all the images to line up in the one spot and crop the image to more like 50 pixels wide- then i start animating between the frames on the spot.

      most of my frames are up for 0.1 seconds- 0.2 to feel like it stalls in a pose, and 0.07 or 0.05 for quick positions passing between key frames

      i hope that helps, let me know if i didn’t explain properly!

      Reply
      • Gustavo Leite

        Thanks a lot!!! Awsome!!
        If you need somebody to make music for one of your projects call me… I will be glad to help =D

        Reply
        • hey thanks πŸ™‚ we have a musician handling our soundtrack right now, but if we get a chance to work with more musicians we’ll be sure to put the word out πŸ˜€

          Reply
  4. rowert

    Hey Barney, thanks for the great article. I’m doing pixel art by myself (unfortunately not yet on your level…). I’m using Photoshop CS5.1 but your tip with Alt+Rightclick while having the pencil selected just doesn’t work in my version. Which version are you using?

    What’s also odd: When I use the move tool I just have to leftclick on a layer to auto-select it (I don’t have to Alt+Rightclick like you have described. Also that doesn’t work at all this way in my version.)

    Just a tip because you mentioned drawing or filling diagonal lines: When drawing geometry like angle lines and else I just make a single dot with the pencil, then holding SHIFT and then making another single dot somewhere else. Photoshop will then draw automatically a line between those two points.

    Looking forward to Crawl!

    Reply
    • hi πŸ™‚ I’m using CS6- maybe it is different between the versions, or maybe there is another setting somewhere which enables it?

      When you talk about left clicking the layer to move it, I wonder are you referring to clicking the layer name in the layers panel, or clicking on pixels of content from that layer in the image? (I am referring to clicking pixels in the image in my post)… If you are also referring to clicking pixels, it actually sounds to me more like you already have “auto-select” ticked but I can’t be sure really what differences there are with CS5

      Thanks for reminding me of the clicking then shift-clicking- very useful for pixel art, I really should have included that in my post! πŸ™‚

      Hopefully we have the game ready soon! Thanks for commenting πŸ˜€

      Reply
  5. Hey everyone !
    I have a question: What version of photoshop is this ?
    Because I have one big problem with PS + PixelArt: The pencil tool doesn’t work.
    If you resize you pencil tool to be one pixel on then use it as your tool to draw, the following happens on CS5, CS6 && CC: You click on a pixel and the pixel doesn’t change color. Or worst the adjacent pixel changes color.
    This seems to be tied to the zoom level, on different zoom levels the bug doesn’t occur in the same place but still occurs.

    Do you guys know about this bug ? Or do you think this is only on my computer ?
    This seems to be less frequent on CS5.

    Reply
    • hmm, sorry i haven’t seen anything like that- i’m using CS6 64 bit… sounds super annoying!

      Reply
  6. A friend wants me to do some animations for a game he’s doing. They’d be similar to this. Unfortunately I don’t have a lot of experience with animating in photoshop, but it’s the only tool I have. I am sure there must be an effective workflow method, and I’m pretty sure your attribute-magnifying glass is the key. But I cannot get it to work! This has left me in the situation of having to click the frame, hide the layers, next frame, hide layers etc. That is horrendous. There’s got to be a better more effective way. I’m only doing 10 frames-ish, and it would be horrendous with more ! Any chance you could upload a quick video showing you doing this? I can’t seem to get the visibility to work.
    Huge fan of your animation!

    Many thanks!

    Reply
  7. Also as an aside, why is onion skinning only available in video-timelines? It would be incredibly useful in frame animation… Is reducing the opacity of layers the only way to emulate this? Surely then I’d have to go back through and increase it again before exporting? Surely that’s a bit much!?

    Reply
  8. Pingback: » Tips for Pixel Art Animation in Photoshop { FIELD NOTES }

  9. I can not thank you enough for this.

    I’ve been working on a game for the past year http://legit-games.com and had NO idea I could simply use the attribute drop down filter for each frames layer group.

    I was pain painstakingly having to turn off all frames I would add from each previous frame…

    Thank you, thank you, thank you, thank you.

    Reply

comment...