营口经济技术开发区奥凯包装材料有限公司 步伐员怎样从零启动制作像素 GIF 动画？我的实战心得共享

步伐员怎样从零启动制作像素 GIF 动画？我的实战心得共享

环球好！我是 Gulnur。

今天念念和环球共享一段真谛的履历：我是怎样从零基础启动，为我最可爱的 VS Code 插件——VS Code Pets亲手制作并添加一只小鸡（Chicken）宠物的。

淌若你也念念让我方的像素画“动”起来，但愿我的这份实战心得能给你带来启发。

缘故：为了那只“不存在”的小鸡

VS Code Pets 是一个能在编著器附近养宠物的小插件。

我在翻看插件的 GitHub Issue 时，发现存东说念主相等念念要一只小鸡宠物。

固然我其时对像素动画全齐莫得考验，但我仍是决定挑战一下，亲手把它作念出来。

零基础怎样起步？

手脚小白，我的第一步当然是去 YouTube 寻找灵感。

我发现了一个相等棒的频说念 @Saultoons[1]，他有一系列非凡讲像素动画基础的视频。通过这些视频，我了解了帧（Frames）的想法、基本的畅通律例以及各式动作的措置妙技。

器具选拔：免费又好用的 Pixilart

视频里推选了 Aseprite，但它是付费的。为了裁减资本，我找到了一个免费的在线器具：Pixilart[2]。它的界面相等直不雅，大开浏览器就能平直上手画。

我先在网上找了一些像素小鸡的图片手脚参考，勾画出了基础帧的综合，然后逐步上色和添加暗影。这便是我的初版制品：

赋予灵魂：动作诡计与实战

为了让小鸡看起来更有生命力，我诡计了 5 种景象：

待机（Idle）啄米（Grain picking）行走（Walking）奔波/飞翔（Fast walking/flying）玩球（With a ball）

为了归附信得过的动作，我致使在 YouTube 上看了几十个养鸡场的视频（笑）。

一个真谛的发现：小鸡走路时脖子会前后摆動。我将这些动作剖析成多帧，并反复测试每一帧的時間终结，确保动作绽开当然。

踩过的坑与避雷指南

在这经过中，我也踩了不少坑，共享给环球：

一定要保存原始方式：不仅要导出 GIF，还要保存为.pixil方式。GIF 仅仅最终放浪，淌若以后念念修改，GIF 很难完好归附成可编著的像素点。透明配景的小妙技：Pixilart 无意在导出透明配景 GIF 时会出问题。我的作念法是先用一种独到的背繁华填充，然后使用Onlinegiftools[3]来手动去除背繁华，结束透明化。尺寸缩放：由于插件有特定的尺寸条款，我还用到了ezgif.com[4]來進行最後的剪辑 and 縮放。最终恶果

终末，我的 Pull Request 见效被并吞了！当今，全宇宙使用 VS Code Pets 的小伙伴齐能看到这只爱啄米、爱玩球的小鸡了。

淌若你也对像素画感兴趣，别彷徨，当今就出手试试吧！只有有关注，零基础也能创造出属于你的像素宇宙。

参考尊府

@Saultoons: https://www.youtube.com/@saultoons/featured

Pixilart: https://www.pixilart.com/draw

Onlinegiftools: https://onlinegiftools.com/create-transparent-gif

ezgif.com: https://ezgif.com