极简像素画4帧跑步动画教程

打开网易新闻 查看精彩图片

文本概览:全文约 844 字,阅读约 3 分钟。

跟完这篇,你能用 4 帧做出两个并排小人的跑步循环,并加上阴影与扬尘。

先看目标气质

常见做法是先画单人走路再加帧。这篇的差异:先定两个略不同的小人,再共用同一套 4 帧节奏——腿前后交替、身体上下弹 1 像素、手臂反向摆。

参考图里左边背包、右边长腿短裤,细节差一点点,人群感就出来了。

打开网易新闻 查看精彩图片

工具用 Aseprite 即可;免费网页工具也能跟同样步骤。

搭第一个小人

肤色#eec39a,背景#639bff。先画 5×5 头。

打开网易新闻 查看精彩图片

头底中间加 3 像素当脖子,抹掉左上角 1 像素。

打开网易新闻 查看精彩图片

加眼睛、深红头发。

打开网易新闻 查看精彩图片

脖子下接 5×4 身体(紫#872287),再加一层短裤蓝#225487,短裤下留 2 行当左腿。

打开网易新闻 查看精彩图片

暗一档肤色,再画手脚

在 color-hex 看#eec39a的 Shades,取略深的#e7a96e画手臂、腿,并在下巴下压一点颈影。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

加鞋子。这一步看起来怪一点没关系,进动画后会读得通。

打开网易新闻 查看精彩图片

复制出第二个角色

复制整个人。

打开网易新闻 查看精彩图片

改金发#fbf236、深蓝眼#3f3f74、绿上衣#3e743e;缩短躯干、上移手臂、加长左腿。

打开网易新闻 查看精彩图片

到这停一下:两个剪影一眼能分清,再进帧。

开时间轴

新建帧。只改第 2 帧,别碰第 1 帧原姿势。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

跑步循环的核心:腿从迈开 → 收回 → 抬起/对侧 → 再迈开。

第 2 帧:头身整体下移 1 像素(擦掉过长腿、鞋先留着),手臂收回贴身,前腿后挪 1 像素。身体变矮,就有弹跳。

打开网易新闻 查看精彩图片

第二个角色同样下沉;短躯干的那位用“缩短腿”而不是整段擦掉。

打开网易新闻 查看精彩图片

第 3 帧:手臂换边(对侧前摆),原前腿藏到身后只露鞋,另一侧腿伸出短裤与小腿。高度回到第 1 帧。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

第 4 帧:再一次“矮帧”,结构像第 2 帧,但左右腿对调。

打开网易新闻 查看精彩图片

关键在这一笔:4 帧里至少有两帧“矮一格”。

循环播看:

打开网易新闻 查看精彩图片

导出 GIF 时勾循环;否则播完 4 帧就停。

阴影层与扬尘

静态脚底影做共享层(跨帧共用)。扬尘单独一层,从后脚蹬地点往外甩。

打开网易新闻 查看精彩图片

打开网易新闻 查看精彩图片

衣服与头发阴影:在取色器里从背景蓝往下走两档,先试。

打开网易新闻 查看精彩图片

打开网易新闻 查看精彩图片

注意:上衣阴影若发脏,只加深一档,别硬压两档。

打开网易新闻 查看精彩图片

软件里看可能比导出 GIF 更淡,以回放感觉为准。

打开网易新闻 查看精彩图片

原尺寸很小,分享前可按最近邻放大(例如 800%)。

精灵表收工:

打开网易新闻 查看精彩图片

参考资料

Pixel Art Tutorial – Running animation: https://lifebe.com.au/artistic/pixel-art-tutorial-running-animation/