第2章 二维平面像素介绍

2.1什么是平面像素

    第1章已简要引入了像素的概念，本章将具体介绍二维平面像素(Pixel)，它是视频显示的基本单位，缩写为px，是由英文“Picture”(图像)与“Element”(元素)组成。如常说的1080p，就是指分辨率为1920×1080px，具体指画面的宽为1920个像素点，高为1080个像素点。像素画就是利用“像素点”绘制出的电脑数位影像，属于位图的一种。当放大画面时就会发现图形是由一个个小方块组成，而这些方块就是像素点，填充对应的方块就能绘制出一副像素画。

这里指的像素画不单单是像素游戏里的画面，因像素画应用范围很广，可用于游戏、Icon、GUI以及纯插画等，这些像素风格的图形应用都可以算作不同类型的像素画。虽然像素画绘制方法并不难，但想要画好却不易，适用场景的不同也导致像素画风分类众多，针对不同类型的画风又需使用完全不同的技法。因此了解像素风的产生、发展、分类以及创作方法等内容，才会更有助于创作像素画。

2.2像素画的产生

像素画早期多应用于像素游戏中，而“画布”就是各类显示设备，为更好展示画面还要遵从游戏平台的系统要求，顾及相关硬件的性能限制，早期像素游戏还要考虑图形所占用内存空间等问题。

如任天堂公司在1989年发售的第一代便携式游戏机GB，屏幕分辨率为160×144px，仅能显示黑白灰阶四色，且CPU为8位元(8bit)，游戏卡最大容量也不过32Mb。在无法突破硬件限制下，游戏的像素图形就要在这些种种限制内进行创作。

放大《Super Mario Land (World)》游戏画面，同时对应观察游戏的全部素材图片，就会发现场景画面是由一片片8×8px的砖块(tile)构成，在需要时按照一定的组合进行排列，即可拼出对应的游戏画面，大大节省了占用空间。

2.3像素画的进化

随着硬件设备以及游戏平台的不断升级，逐渐弥补着早期性能不足的问题，间接促成不同像素画风、绘制技法的发展。如同一款《马里奥医生》在不同游戏平台的画面质量也是有很大差异。

GB版仅通过“黑、白、深灰、浅灰”四色表现，使用相对传统的黑色描边技法，颗粒感较强； FC版仅在GB基础上将角色精灵换为彩色版，也多了一些细节，但颜色有限且没有体现出光影；

SFC版(SuperFamilyComputer)角色精灵抛弃黑色描边，虽然造型相差无异，但突出的光影效果显得更加立体； GBA版，虽为掌机但硬件性能不逊色于家用游戏机，因此画面也有了质的飞跃，大量使用了手工抗锯齿AA技术(Anti-Aliasing)，使图像边缘看起来更平滑。

2.4像素画的分类

本节将从像素风的游戏与插画两方面来简要介绍几种常见的画风与各自特点，网页设计、GUI、icon等在后面的章节会单独提及。另外，仅根据笔者主观经验进行分类，无法做到绝对精准，或多或少存在多个画风交叉的现象。

2.4.1黑白画风

【特点】追求GB一样的画质，颜色控制在2-4色内，大量使用抖动。

【难度】★★☆☆☆，需要掌握抖动的绘制技法。

【应用】多以插画形式出现。

2.4.2复古画风

【特点】追求复古，但有的仅体现色彩明快的色块（类似超级玛丽），而另一类强调实色描边（类似洛克人），但都是此类特点，刻意追求早期像素游戏的画风。

【难度】★☆☆☆☆，几乎没有什么难度，也不用掌握复杂的绘制技法。

【应用】主要出现在追求复古感的游戏中。

2.4.3等距视角画风

【特点】没有任何透视点，也称Isometric风格(简称ISO)，最大特点就是所有画面元素以2.5D伪三维的45度视角来展现。

【难度】★★★☆☆，需要使用规律的像素线条来绘制场景，且具备抽象思维。

【应用】大部分角色扮演类游戏、模拟经营类游戏都采用这种风格，如经典名作《仙剑奇侠传》、《皮卡堂》与现在的开罗系列(Kairosoft)游戏，以及前文提到的eBoy团队也是擅长此类风格的插画。

2.4.4极简画风

【特点】颜色、造型极其简化，人物五官多数用几个像素点来代替，甚至可以没有五官。由于这类图形尺寸极小，需要等比放大后进行展示。

【难度】★★☆☆☆，虽看似简单，但需极强的概括能力，才能抓住人物特点。

【应用】一些小众游戏采用过此风格，还有的设计师也钟情于这种画风。

2.4.5极繁画风

【特点】虽然看似复杂，但也不是无从下手，很多细节可以通过复制方式处理。与极简相反，此类作品在100%视图尺寸下是最佳的观赏比例。

【难度】★★★★★，刻画细节需要有耐心，并且要熟悉掌握像素线条的特点。

【应用】多以大型插画出现，通过大量细节体现画面的宏伟气势。

2.4.6写实画风

【特点】参照正常比例的人物造型，追求现实世界的真实性。

【难度】★★★★☆，需要一定的美术基础，才能把握人物比例与造型。另外大量使用手工抗锯齿AA(anti-aliasing)这种技法来弱化线条的像素感。

【应用】多用于横版动作游戏(ACT，Action)、格斗类游戏(FTG，Fighting Game)以及一些写实的插画，。

2.4.7Q萌画风

【特点】五官及身体比例以卡通方式夸张呈现，由于素体人物基础造型相对一致，不同的身体器官均可自由替换，方便Diy出个性造型。

【难度】★★★☆☆，要以基础人物模板为标准，把握好细节，确保相对统一。

【应用】早期社交软件中虚拟卡通人物秀、部分卡通风格游戏均采用这类画风。

2.4.8油画式画风

【特点】经典名作《合金弹头》将此类画风运用的登峰造极。其画布尺寸巨大、结构多变、塑造质感，追求油画式的堆积上色方式，但却严格按照像素规范用色，可以说是拥有像素灵魂的厚涂作品。

【难度】★★★★★，需要很深的美术基础，以及色彩把握能力。大量使用手工抗锯齿AA(anti-aliasing)与抖动这两种高级技法使得画面极其细腻。

【应用】多以艺术插画形式呈现，或用于大型游戏场景。

2.4.9光影渲染画风

【特点】不受传统像素规范制约，借助流行的渲染技术，大量使用光影特效。

【难度】★★★★☆，需要掌握一定的渲染技术。

【应用】近些年较新的游戏多以此类模式制作场景。

2.5常见绘制方法

像素画与其他绘画形式有相同之处也有不同之处，根据以往经验大致总结了三种创作方法。

2.5.1绘制线稿法

直接在画布上按照像素规范绘制好线稿后平涂上色，这是最主流的一种创作方法，常见流程有7步，分别为：绘制线稿草图、修整线稿线条、填充固有色、画出暗面、画出亮面、抖动技法处理过渡色、手工抗锯齿处理边缘。当然不同画风导致部分技法不一定都用到。

【优势】只要以像素画的技法就可以天马行空进行创作，适用于各类画风。

2.5.2色块构图法

通过涂抹色块方式绘制出大体轮廓造型，然后在逐步添加细节与上色。

【优势】适用于各类画风，尤其是绘制大型场景。

2.5.3缩图修改法

将手绘草图或素材图片缩小尺寸后，精简多余颜色，最后按照像素画的规范对细节与线条进行处理。如图所示，字体经过缩小尺寸与去除杂色后，仅需把不规则的线条与像素点简单调整即可。

【优势】效率高、速度快，节省构思时间，色彩、造型基本还原素材图片。但不适用于等距视角、极繁、Q版卡通等画风。

2.6常见绘制软件

目前有很多专为像素画打造的软件，有的方便制作GIF动画、有的方便绘制ISO等距视角、有的专门应用于像素周边产品的设计。但归根到底主要还是利用“位图软件”+“点阵原理”的方式绘制，因此笔者推荐Photoshop，它是最知名的位图处理软件之一。

由于Photoshop版本众多，选择够用的版本即可。如配置不高的电脑推荐使用经典的7.0版本，土豪级配置的电脑推荐使用最新的CC2017版本，配置高但不需要“Creative Cloud”等多余功能的电脑推荐使用CS6版本。另外，不同版本界面菜单及图标存在一定一些差异。

2.6.1 PC端

Photoshop、Sai、MS Paint、MS Excel、EasyToon、Cosmigo Pro Motion、Graphics Gale、Pixel Studio、Aseprite、mtPaint、aaICo、Pixelart8、AniFX、AWiconsPro、IconLover、Articon Pro、Paint.NET、Fireworks、Microangelo、Iconcool、Articons、PCStitch、Cstitch

2.6.2 MAC端

Photoshop、Pixen、GIMP、FireAlpaca、MS Excel

2.6.3网页端

http://make8bitart.com

该站界面比较直观，功能也相对单一。

http://pix.domyself.me

该站为中文页面，虽然功能简单，但最大亮点就是能够在线制作GIF动图，同时也有作品分享社区。

http://pixelartmaker.com

该站除了创作页面也有作品分享社区，工具也较专业，包括选区、直线、取色等，并且辅助网格也有三种显示方式。

http://kandipatterns.com/assets/designer_test

该站主要用于绘制手工串珠的像素图纸。

http://www.reddit.com/r/place/

该站为Reddit在2017年愚人节期间推出的像素画活动，全程72小时，至少有十万人参与其中，目前绘制功能已关闭。

http://live.bilibili.com/pages/1702/pixel-drawing

该站为Bilibili在2017年8月推出类似Reddit的像素画活动，目前绘制功能已关闭。

2.6.5移动端

目前主流手机机型仍属于IOS与安卓两大阵营，因此主要介绍这两个平台，也可直接在对应的应用商店搜索“像素、像素画、Pixel、8bit”等关键词查找更多App。

1.苹果iPhone版

包括“Dotpict、8bit Painter、Dots、dot ART、bead pictures!、ビーズカメラ、8bit Camera、Pixel Pix、Pixel It、uniQ Pixel Artist Camera、Pixel Art Maker、Pixel Artist、Cross Stitch HD lite、Bead Master、dot ART、Dot Style、BlockCam”等。

2.苹果iPad版

苹果公司将手机与平板做了市场细分，很多App单独为iPad做了适配，而并未推出iPhone版。包括“Bead It! SD、Perler、NABBI Beads、Kids Canvas、Qixel HD”等。

3.安卓Android版

包括“Dotpict、8bit Painter、像素画图专业版、Pixel art Painter、IsoPix Pro、Pixly、八位元画家、像素工厂、数图、fusible beads、Bead Studio、Bead Template Creator Premium、Bead It!、Iron bead examples、Fuse bead picture examples”等。

4.微信小程序

如果不考虑安装App也可选择跨平台且免安装的微信小程序，包括“像素涂鸦、你萌好魔法拼豆”等。

2.7常见问题

Q：位图等于像素画吗？

A：电脑图形分矢量图(Vector)和位图(Bitmap)，矢量图是用数学方式描述的曲线及曲线围成色块制作的图形。位图虽然是由像素点组成但不等于像素画(Pixel Art)，像素画的线条规范，画面细腻、结构清晰，造型精美，与位图的最大区别在于每个像素点都是经过艺术处理过的，并遵循一些技法。

Q：存储为什么格式？

A：Bmp、Ico、Gif、Png等文件格式均适用于像素，但特别注意一定不要存为有损压缩图像很严重的Jpg格式，如不考虑多帧动画只推荐Png格式。

Q：没有美术基础可以画吗？

A：由于绘制像素画的技法较特殊，就像用积木搭房子一样，可以不需要了解任何建筑学的基础知识，凭感觉也能完成作品。但如果有一些美术基础，并且掌握了一些绘制技巧，将能搭建出更漂亮的楼房。

Q：所有画风是否都要掌握？

A：像素画各类风格的绘制方法略有区别，难度也不同，选择喜欢的几类风格即可，不用全部掌握。

Q：哪个像素画软件最好用？

A：这个因人而异，有人甚至擅长使用微软公司的表格处理软件“MS Excel”，因此找最熟悉的软件入手，画起来将更容易些。笔者日常仅使用Aseprite与Photoshop两款软件。

Q：是否需要购买手绘板？

A：看画风，有的时候意义不大。如绘制2.5D角度ISO图形时，鼠标绘制的像素线条会更加精准。但画场景或大尺寸角色精灵时，使用手绘板会便于绘制更加圆润的像素线条。另外，画像素要避免抗锯齿等情况，因此选购手绘板不用注重压感等参数，够用就好。