像素画横版游戏兔子跑步动画教程

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

文本概览:全文约 1,454 字,阅读约 4 分钟。

跟完这篇,你能在 Photoshop 里画出一只拟人小兔子,并拼出可循环的 6 帧跑步动画

同样的方法在Aseprite也适用。

成品长什么样

小画布、1 px 铅笔、双窗口(一个放大到约 700%,一个留在 100%~200% 对照)。常见教法是先拆关键姿势再补中间帧;这篇反过来:先锁静态立绘,再拿 6 帧把腿、手、耳、腮、肚皮和尾巴对拍推进去

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

1. 先画静态角色

动画前先定长相。头部草图随便多画几个,挑一个风格对的。

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

新建约 400×400 的文档。眼睛从两根竖线起步:各高 3 px、宽 1 px,中间留空。

接上鼻子和五官,线可以先粗后收。

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

修圆轮廓,加两颗大门牙。

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

补几个像素做出微笑。

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

耳朵尽量窄:内芯 1 px,外轮廓也是 1 px。

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

一只耳耷拉下来。

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

画另一只耳。

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

鼓腮帮,收完头部。

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

身体拟人化,躯干画成水滴形。

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

短腿大脚,先画前腿。

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

后腿略向右错开,避免完全重叠。

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

整体左移 1 px,删掉腿与肚子之间的空隙像素。

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

站姿只露一只手前臂,水滴形,略压住躯干。

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

清掉手臂上多余线。立绘线稿完成。

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

2. 上色与阴影

选一款偏黄棕的毛皮色,油漆桶铺满(鼻子先留白)。

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

肚子和门牙涂白;鼻尖留一颗粉红,其余仍白。

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

用更深一档毛皮色压暗背光区,腮帮可加点纹理。后腿、后耳整块偏暗,耳尖可留一颗本色。

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

肚子加一层偏冷的浅灰阴影。

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

部分黑线改成深棕,降低对比;腮帮再加一点深棕细节。站姿精灵完成。

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

3. 画 6 帧跑步

角色小,6 帧就够。头和躯干大致固定,变化集中在四肢和次要动作。

先拿掉四肢,在脚下画一条地平线,锁腿的高度。

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

框选头+上半身,上移 1 px,再把头右移 2 px。

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

躯干被拉长就压回 1 px,并整体下沉 1 px——跑步时腿大多是屈的,站姿高度不能直接套。

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

先只画前景腿:像钟摆,多数帧弯曲,只有迈步那帧伸直。蓝线草稿方便对照脚掌位置。

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

六帧各开一层画腿块。注意:腿根不是钉死在同一点——腿往后时根偏左,往前时根偏右。

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

蓝块换成毛皮色;用魔棒选腿外空白 → 收缩 1 px → 反选 → 灌轮廓色,比手描更快。

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

第 3、第 6 帧把头和躯干再抬 1 px(蹬地/腾空)。紫线标出跳起帧;地影透明度约 20%。

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

脚掌加胖,腿接到身体,补一点阴影;剩余紫线改黑并降至 20% 透明度。

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

复制腿层,整组右移几像素——此刻两腿同向,像兔子蹦,但拟人跑要对拍。

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

六帧里,一条腿的“反向”占三帧。把复制腿与原腿对调方向;复制层放在躯干下面。

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

后景腿整块加深色。腿部循环先看通。

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

到这停一下:腿通了再加手,别急着开时间轴。

手臂草图:全程微弯,第 1 帧略伸直即可。

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

新手层画在身体上方,灌毛皮色。

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

加体积。

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

再压阴影。

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

复制手臂层放到躯干后。

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

后景手臂加深,并与前景对拍——手和腿方向相反:左腿前则左手后。

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

关键在这一笔:跳起帧让耳朵因惯性下垂,不要跟着身体一起翘。

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

落地后一帧,耳朵稍直、略朝前。

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

腮帮跟耳朵同节奏:跳起略下沉,落地后再抬。

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

白肚皮也要跟着转身:前臂往后时露得多,往前时只剩一小块。

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

站姿可以藏尾巴;跑步最好加上。先用红色方块占位。

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

填色、阴影、描边。

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

第 1 帧前臂后摆时,尾巴尖会被挡住。

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

尾巴层挪到后景,修阴影。六帧素材齐了。

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

4. 拼成循环动画

按从左到右顺序,把每帧“拷贝合并”贴进新文件;背景保持透明。最终 6 层,一层一帧。地线各帧对齐;鼻子除两帧跳起外也对齐。

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

打开“窗口 → 时间轴”,选“创建帧动画”(若看到的是视频时间轴,点箭头切过去)。

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

“从图层建立帧”。

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

全选帧,延迟约 0.1 秒,循环设为“永远”。

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

导出 GIF,或直接当游戏精灵用。

参考资料

Creativo · 在 Photoshop 中创建像素风动画角色: https://creativo.one/lessons/animation/3376-sozdaem-v-fotoshop-animirovannogo-personaja-v-stile-piksel-art.html