
With proper planning and organization, I’ve managed to create a number of complex animated scenes with it. Frame animation in Photoshop is pretty bare bones, but it always gets the job done. Now I’ll take you through my process to animate parallax scenes in Photoshop, using the frame animation tools. However, I try to avoid slower than 1 pixel per frame, as the motion can look a bit jittery. Sometimes when I want movement slower than 1 pixel per frame I do 1 pixel per 2 frames, which requires the image to repeat twice on the same screen, as it only travels halfway across the canvas throughout the loop.

Generally, I start with my furthest background layer scrolling at 1 pixel per frame, and each layer that gets closer to the viewer scrolls at the next faster perfect rate.

This is a good size as it gives a lot of options for perfect scroll rates, and you can see the jumps between the increments follows a consistent upward curve, which will result in natural jumps in speed between layers.īefore you get too far along it’s good to test out the motion of your layers to make sure the relative speed feels appropriate for the perceived depth of the image. To do so, the pixels moved per frame must divide into the dimension of the canvas the motion runs along, so choose an even value that divides into many whole numbers. For movement to be smooth and steady the scroll rate should be the same amount of pixels each frame. With movement being strictly tied to whole pixel increments, the pixel dimensions of the canvas become critical. It’s possible to upscale pixel art assets and give them smooth sub-pixel movement in a game engine or animation software, but fundamentally speaking, you can’t move a half pixel. Pixel art is created at 1x resolution (one pixel unit equals one pixel on screen) and usually animated on the same scale. Pixel perfect movement is movement that only moves in increments of pixel units. Balanced layers without dominant points of interest help hide the loop. The drawback is some layers can look monotonous when repeated many times in the loop. Since you need very long or tall images to run across the canvas, it’s best to make images that can loop at the seams of the canvas, and repeat them. I recommend starting with something simple, like clouds or stars to practice on the execution of the animation before attempting complex scenery.

Of course, clouds are always a great subject to parallax.
