Piskel像素画动画教程眨眼的猫

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

文本概览:全文约 2,036 字,阅读约 6 分钟。

看完本文你会学会画20×20 的像素画小猫,然后做出眨眼动画。

一、画布先缩到 20×20

浏览器打开 Piskel[2]。入门这一课只用浏览器。点 Resize,宽高都填 20。

Resize 面板里宽高都写成 20。格子少,才逼你先把脸和耳朵摆对,而不是一上来铺纹理。
打开网易新闻 查看精彩图片
Resize 面板里宽高都写成 20。格子少,才逼你先把脸和耳朵摆对,而不是一上来铺纹理。

工具只要这几样:Pen、Circle、Move、Vertical Mirror Pen、Paint Bucket、Lighten。别的先别碰。

二、脸 → 圆 → 挪到能长耳朵的位置

先点出一张小脸:两只眼睛、一张嘴。不要先画身体。kawaii 像素里,脸几乎就是整张画。

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

20 格里先落下五官。位置差一点,后面圆形一罩,整只动物都会歪。

再用圆形工具把脸框住。圆不是装饰,是把散落的点收成一个能认出来的头。

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

圆一合上,五官才像长在同一张脸上,而不是浮在空格子里。

接着用 Move 把整颗头往下挪一点,头顶留出长耳朵的空位。没居中就再挪,别急着画耳朵。

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

头靠上,耳朵会顶出画布;往下挪一截,镜像笔才有地方对称。

三、镜像笔画耳朵,再一口气填色

耳朵用 Vertical Mirror Pen:左边画一笔,右边自动对称。头没居中时,关掉镜像、改用普通钢笔也行,别为了对称把脸挤歪。

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

镜像笔省的是对称检查的时间。中线偏了,两只耳朵会一个贴边、一个悬空。

选一个喜欢的颜色,Paint Bucket 填身体。工具本身没有秘诀,关键是先把封闭色块找出来,漏一个像素就会流到背景里。

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

先点中油漆桶,再选颜色。封闭没做好就点下去,颜色会从耳朵缝漏出去。

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

一整块颜色铺上,剪影立刻可读。条纹和高光留到下一步。

四、条纹、腮红,再用加深减淡分出体积

细节用钢笔加。给猫画了几道条纹——不必抄成豹纹,一块补丁、一撮刘海也行,只要能让这只动物不像纯色色块。

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

条纹跟着头形走,不要横穿眼睛。几笔就够,20 格装不下“真实毛发”。

腮红几乎是这套风格的签名。钢笔点粉色,贴在脸颊两侧。

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

左右各一小块粉。没有它,脸会扁;粉块太大,又会吃掉眼睛。

阴影用 Lighten 工具:按住 Ctrl+Shift 涂暗部。涂在下巴底下,你也可以沿耳朵内侧走。高光只按住 Shift。同一工具两套修饰键,比新开一层阴影图层更快。

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

暗部贴在下巴和头的交接处。涂太宽,20 格的脸会脏成一团。

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

高光点在额头或鼻梁一侧就够。两边都提亮,体积会重新变平。

静帧到这里可以导出:右侧菜单 Export → PNG → Selected Frame。

原尺寸就是这么小。先在 100% 看能不能认出是猫,再决定要不要加笔。

五、复制帧,做成慢眨眼

静态能交作业了。要让它活一下,只加一种动作:眨眼。

先按复制帧按钮,得到第二帧。

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

第二帧先跟第一帧一模一样。改的是眼睛,不是整只猫。

选中第二帧,用眼睛周围的颜色把眼珠盖掉,再画成闭眼的一条线。

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

闭眼用眼周同色盖住,再加一条线。换一个新黑色,眼窝会像挖了两个洞。

默认 FPS 对眨眼太快。右侧把帧率拖到 2。

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

2 FPS 看起来慢,但 20 格小图本来就不该像频闪灯。先慢,再决定要不要加半帧。

只留“睁、闭”两帧,猫会不停眨眼,像抽筋。回到第一帧,再复制好几份——复制了 5 次,让睁眼时间远长于闭眼。

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

时间轴变成:睁、睁、睁、睁、睁、闭。循环时才像活物在偶尔眨眼。

导出 GIF:Export → GIF,勾上 Loop Repeatedly。成品循环如下。

睁眼占大多数帧,闭眼只闪一下。这就是“慢眨眼”和“狂眨眼”的差别。

放大展示。

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

整数倍放大,格子还在。

参考资料

How to start drawing cute pixel art?: https://foxfable.neocities.org/pixeltutorial

Piskel: https://www.piskelapp.com/p/create/sprite