【风农翻译】开始画像素画 #8

这是来自佩德罗・梅代鲁斯（Pedro Medeiros，@saint11）授权的一系列像素美术教程，由风农翻译整理。

佩德罗・梅代鲁斯最为知名的作品莫过于《塞莱斯特山（蔚蓝，Celeste）》，不过他持续在网络上发布的像素美术教程也同样相当知名。这里选择的教程就是经过风农翻译整理内容。

这个是系列的第 8 节。这篇技术细节比较多，可以跳过你不感兴趣的部分。

本节主要是文件格式和导出方法。

Bitmap and vector 位图和矢量图
我们先来讲讲图片在电脑上是如何保存的。简单来说，有两种 2d 的图像文件类型，位图和矢量图。

矢量图是点、线坐标，以及颜色信息的集合，可以用来创作能缩放到任意分辨率的图像。它主要的缺点在于难以用在表现细节的图像上，像是照片，你几乎无法在像素级别进行控制。尽管我们能创建出看起来像是像素画的矢量图，或者把像素画导出成矢量图格式，但几乎没人这么做。也有些例外情况，比如说要把像素画打印到很大的板子上。

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

复制代码

典型的 SVG 文件内容，和代表的图像

而位图图像，才是像素画能够存在的原因。位图把图像想象成很大的网格，打印在屏幕上，每个像素都单独存储。

位图保存方式的示例

这样保存的文件有时候比较大。一个 1080*1920 的图，意味着包含了 2.073.600 个独立像素需要保存，所以有时候需要用高效算法来压缩一下。

Image compression 图像压缩

图像压缩是为了减小图像文件的体积，但是依据使用算法的不同，有些算法可能会损坏原数据。

压缩可以是有损或者无损的。有损压缩一般对于照片或者大幅插画是可以接受的，但是像素画就不可以。用 JPG 格式保存像素画会造成随机的颜色变化，图形虚影。在压缩像素画时，我们必须检查是否用的是无损压缩，比如 PNG 格式。

PNG（无损）对比 JPEG（有损）

总的来说，你的编辑器提供的图像格式，比如 Aseprite 的.aseprite 格式，或者 GraphicGale 的.gal 格式，可以安全的保存所有的图层和元数据。

在 Aseprite 里保存

在 Aseprite 里用保存对话框进行保存（Ctrl + S，或者 Ctrl + Shift + S 做另存为新文件）

Aseprite 的保存对话框

很直观，是吧？在这里保存为 .aseprite 格式，保存所有文件信息，以便你以后可以回来做修改。

导出预览

在完成了你的精灵图之后，你可能想要发布到什么地方，或者发给谁，但如果直接保存成 .png 文件，会有两个不好的地方：第一，你的图像会保存成一个扁平的文件，就是说失去了图层和元数据，第二，你的 png 文件可能会长这样：

这个石头太小了，看不到细节

导出做预览的正确方式是用导出对话框，在“文件 -> 导出”（File -> Export）菜单

Aseprite 的导出菜单

这个对话框里有非常多有用的选项，我们一个个看一下：

Output File 输出文件：文件名。如果你直接输入想使用的文件格式，Aseprite 就可以保存为这个格式。推荐静态的图用“.png”，动画用“.gif”。

这里不会把保存命令的默认格式也改掉，所以不用担心这里选择的格式以后会把所有东西都拍扁。

Resize 缩放：像素画对于目前的显示器来说通常都太小，所以需要缩放。Aseprite 提供了很多的分辨率供你选择。

整数倍缩放对比非整数倍缩放

你可能注意到了，只能缩放成 100% 的整数倍，不能有小数，比如 250%。这是因为非整数倍的缩放会损坏像素画。这是个像素画的严重缺陷，并且没有什么办法能避免。记住缩放一定要用整数倍（200%，300% 等），不要用非整数倍（130%，250% 等等）。

如果你一定要满足某个大小，试着缩放到最接近的最小的倍数，然后把画布延伸到你需要的尺寸。

通常放大 200% 或者 300% 发布到网上足够了。

Layers 图层：当你导出文件时，他会被拍扁，就是失去所有图层信息。这个选项可以让你选择导出时需要包含哪个图层。

Frames 帧：后面会详细讲，这里就是指要导出哪些帧。如果你有不止一帧，那么会发生两件事：

如果导出格式支持动画，比如 gif，那么就会导出动画到这个文件。
如果导出格式不支持动画，比如 png，那么 Aseprite 就会保存到多个文件，每帧一个。

（编辑注：现在 APNG 动画格式其实也已经得到了广泛支持）

Animation direction 动画方向：这里可以看到常用的方向，比如向前，向后等等，选最适合你的。这里的含义很直观，你也可以自己试试。

Apply pixel ratio 应用像素比例：这个不常用，如果你用的不是方形像素，选这个会把它压扁成方形。如果不确定这个是什么也没关系，他不会改变什么东西。

Export for Twitter 导出到 twitter：勾选后会让最后一帧动画持续时间整个动画的一半长度，完美适合 twitter MP4 循环。

Saving for the engine 保存给引擎

游戏引擎各不相同，每个都需要你做特定处理，不过这里是一些通用的原则：

首先是文件格式：尽管有些引擎支持 tiff，gif，甚至是 bmp，最好还是用 png。轻量，解压相对迅速，透明支持的很好。别用 jpg，mp4，或者其他的有损压缩格式。

除非你有什么原因，否则不要在导出给游戏引擎时对像素画做缩放。正常情况下精灵应该是由引擎来做缩放，所有文件都应该保持原有分辨率。

动画应该保存成图片序列，或者精灵表（sprite sheet）。QQ号购买不要用任何的视频格式，除非你在做什么特别的。

Saving an image sequence 保存图片序列

当把动画保存为 png 时，Aseprite 会创建一个图片序列，看起来这样:

在 Aseprite 里把动画导出为 png

一般这就行了，不过我喜欢文件名从 0 开始，而且我喜欢两位数字。这个很容易实现：在文件名这，只要输入文件名后面加上"00"。这里我把文件名写为 alert00.png，结果是这样：

你可以试着在名字后加别的数字

另外一个有用的技巧是加多个标签。在 Aseprite 里，你可以选择多组帧加上标签。这样一个文件里可以保存多个动画。像这样：

一个时间轴带多个动画标签

这有助于整理，导出也很方便，只要输入 boss_{tag}{tagframe00}.png，aseeprite 会这样导出：

很方便吧？如果你想多几个或少几个 0，可以把 {tagframe00} 改成 {tagframe000} 或者直接 {tagframe}。

保存精灵表 sprite sheet

有些游戏引擎推荐用精灵表，而不是多张图片，我们可以用“文件>导出精灵表”（File > Export Sprite Sheet）命令自动导出。

导出精灵表对话框，选择水平或着网格

这里我们有多个选项，可以根据所用的引擎做调整。有些需要在精灵之间添加边距，提供 JSON 描述信息，其他的可能支持去除透明部分。Extrude 拉伸可以让所有瓦片的边界颜色向外延伸一个像素，避免 3D 瓦片的接缝，如果你用的是 3D 引擎的话。不确定就什么都不选就好。

对于行和列的数量设置，如果引擎没有特殊要求，我建议选择“最适合纹理的尺寸”（Best fit for texture），让 Aseprite 自动计算尺寸。

这里需要注意的是，不勾选“Output file”并提供文件名时，点击导出不会生成文件的。你也可以选择“Open generated sprite sheet”，这会打开一个新文件，你可以手工保存。

切割工具和命令行

最后一个技巧时用切割工具 slice。切割工具适合于把多个图放在同一个画布的时候。我喜欢在给游戏场景制作素材时用这个，我可以把素材放在旁边随时比对尺寸。

首先要把精灵放到一个文件，挨着。别互相重叠到一个矩形区域就好。

单个文件里多个素材排排坐

接着选择切割工具，开始在每个物体上做选取，注意不要把其他物体的部分包括进来。之后你可以双击其中一个，或者右键点击查看属性，给它命名。

切割完，选中一个

现在，用命令行！如果你主要做美术，这部分听起来可能有点吓人，但我保证，只要简单了解并设置好之后，这能够自动处理很多枯燥的导出工作。

首先你需要把 Aseprite 添加到环境变量里，如果你不清楚这个，可以看看这个教程（百度什么的搜一下设置环境变量）。把 Aseprite.exe 加入到环境变量里。

现在，保存好 Aseprite 文件，在同一个文件夹打开命令行工具。如果不知道怎么做的话，在 windows 下，Shift + 右键，选择在当前位置打开命令行。

接着是有意思的地方了，用到的命令！直接输入下面这个，把 myFile 替换成你的文件名，按回车：

Aseprite.exe -b '.\myFile.aseprite' --save-as '{slice}.png'

复制代码

我们分解一下这个的含义：

Aseprite.exe 用来启动 Aseprite
-b 表示我们是在批处理模式。不加这个的话 Aseprite 就打开了，我们不需要。
‘.\myFile.aseprite’ 是需要处理的文件名和拓展名。这个是相对于当前路径的。
--save-as 是保存选中文件的命令，它也会根据你给的文件名里带的标签去格式化文件名。
'{slice}.png' 是导出文件名, {slice} 是个标签，它表示文件名会用切割的名称并切割出来。

接下来

现在你了解到如何正确的保存像素画了！当有不确定的地方时，参考以下几点：

永远用整数倍缩放，不用小数，不缩小。
Aseprite 可以自动保存出图片序列。
别用 jpg 和 mp4，以及其他的有损压缩图像格式。
不确定时，就用 png，别缩放。

【风农翻译】开始画像素画 #8相关推荐

【风农翻译】开始画像素画 #1
完全小白起步指南这篇文章是关于如何开始画像素画,专为从来没用过像素画软件,或者刚开始学画的人设计.这里我只会讲解最基本的东西,如何创建文件,设置画布尺寸,以及如何利用受限的颜色. 如果喜欢这篇文章, ...
PHP画像素直线,画像素画原来如此简单！绝对是手残党的福利
[PConline 杂谈]你听说过像素画吗?最近网络上出现很多利用像素绘制的卡通图案,我们把这些称之为像素画.其绘画过程简单,不需要任何绘画的功底,可以说绝对是手残党的福利.但是对于像素画你可能会感觉 ...
JS_小工具_自己写了一个画像素画的小工具
自己抽空做了一个画像素画的小工具,界面比较简单,但也可以画着玩.呵呵. 有意思的地方在于可以把画的内容保存为一个数组,可以很方便地还原成图案... 主要的JS代码: //画板表格 var iconTa ...
使用 Excel 画像素画
获取文章资源,可以关注公众号:AI悦创,联系号主获取 Excel 和图片类似 Excel 文件,单元格支持编辑内容和设置背景色. 一张图片,都是由密密麻麻的像素组成,且每个像素都是一个 rgb 的颜 ...
多线程加速 Excel 画像素画
提高效率一张图片的分辨率,小点的有 50x50=2500 个像素,大的则有 1920*1080=2073600 个像素. 而且 Python 操作 Excel,逐个的给 Excel 单元格上色,还是 ...
用excel画像素画，和十字绣一样简单
如果大家能看到这个帖子,那么应该已经见过像素画了.我们电脑上的图标都是像素画,在网络世界上,他无处不在,例如: 画一幅像素画需要的工具很简单,画图板就可以制作,甚至用excel就可以. ...
熟悉PS的基本操作，以画像素画为例
准备去B站随便搜个学像素画的视频一颗想闲下来的心愿意浪费时间工具 Adobe Photoshop 2021 (Prerelease) 配置项目画布大小看自己需要图层要画的内容放在透明层 ...
excel 画散点图怎么设置图片的分辨率_Slynyrd像素画教程：像素画基础教程
Slynyrd像素画教程:像素画基础教程作者:Slynyrd[1] 翻译:三二 (转载请注明出处) 关注公众号:教你画像素画微信号:pixelfish 微博:教你画像素画2014 在合适的条件下, ...
游戏像素画风格研究：变迁与发展
游戏像素画风格研究(上) 1.概述 1.1 思考和实践的关系本篇针对像素画风格进行个人的一些反思和探讨,试图能够将像素风格这个概念用通俗的语言阐释的更加清晰一些.那么在我们开始之前,我觉得概述最重要 ...

【风农翻译】开始画像素画 #8

【风农翻译】开始画像素画 #8相关推荐

最新文章

热门文章