TUTORIALS_&_FINDINGS
[LOG_250808] // Frame-by-Frame Study

Hello, and welcome back to another blog! I'm listening to the song HELLO AGAIN by Kazuhito Murata , how funny is that lolol! I'm so grateful for all the support and questions about my pixel works.

Social media algorithms don't always show my old tutorial posts to people who want to see them. I started this blog as a permanent, searchable archive so people do not have to dig through my media tabs.

When I was younger, I spent years trying to figure out how to get this retro style. My earliest pixel attempts were quite corny. This took a long time, so having a dedicated space to help others learn this workflow means a lot to me.

Mingo's Fiery Powers (Animated Pixel Banner)
Mingo's Fiery Powers (Animated Pixel Banner) by pinkfiremage (me)

Today, I want to share how I made the animated pixel banner of my OC. It has more moving parts than a basic eye-blink animation, so it was a fun challenge to coordinate.

My inspiration

Concept art from Elf Corporation's Jan Jaka Jan
Image credit: Game Vecanti via Tumblr

I always loved reading those Tumblr blogs that share retro anime and game archives. In 2023, I saw a post on Game Vecanti showing the settei (production model sheets) for Jan Jaka Jan here.

Jan Jaka Jan PC-98 animated sprite
Image credit: decadot via Tumblr

Later I remembered, I saw decadot post an animated GIF of that exact same CG here.

The connection between a static drawing and the final output got me curious about how the process worked. I took inspiration from the fire animation and background it had, and developed this idea.

Step 1: Canvas setup and drawing

I drew this piece on a 1920x1080 canvas. I originally planned to use it as a "stream starting" screen on Twitch, but I eventually decided to use it as a profile banner instead. Any large, high-resolution canvas works well.

I drew my artwork in Clip Studio Paint, as I am much more confident drawing in CSP. Because I wanted different parts of the character to move, I kept those moving elements on separate layers. To save time, I redrew frames only where necessary, moving or rotating the existing layers back and forth!

Still drawing of OC banner before downscaling
Animation still by pinkfiremage (me), shown here before applying any pixelation

When drawing for this style, I used bold outlines and clean edges. I remembered after weeks of experimenting that details easily kept getting lost.

Step 2: Animating in Aseprite

My CSP layers all separated in the folder
My CSP layers all separated in the folder

Once the layers were finished, I exported them as separate files and imported them into Aseprite. While I prefer Clip Studio Paint for painting, Aseprite is incredibly straightforward to use for animation.

Aseprite view of CSP layers
Aseprite view of CSP layers

My workflow changes depending on the project, but the basic process involves hiding and showing the separated parts frame-by-frame. For a detailed look at the timeline, check out my YT short .

My layers all separated in the folder
Animation by pinkfiremage (me), shown here before applying any pixelation

Step 3: Applying pixel qualityness!!

Once the animation was fully timed out, I applied the exact same downscaling and colour reduction technique from my previous blog post.

Troubleshooting GIF colour bleeding

When exporting directly from Aseprite, you might find that the final GIF has weird colour indexing or "bleeding" issues. This seems to be a common thing with my digital drawings, which is understandable since painting pixels manually would ideally have fewer problems (I am still learning).

To fix this, I use a simple workaround. I export the animation from Aseprite as a sprite sheet rather than a GIF. I then upload that sprite sheet to Ezgif , slice it, and compile the final GIF there. It is a quick extra step, but it works perfectly.

Final dithered animated pixel banner of original character
Final dithered banner by pinkfiremage (me)

And there it is!!

I hope to document more of my retro graphics and pixel processes here in the future. Thank you for reading!

The final result can be found posted here:

X (Twitter) | PIXIV

References and Image Credits