超赞！超经典的像素画系列教程_微精选

超赞！超经典的像素画系列教程

【回音UI分享会】

微信公众号：echo-share

我们是一群普通的设计小青年，却有着不普通的设计师梦想。我们是回音UI分享会，定期线下论坛，线上设计资讯与优秀内容分享，关注我们，让我们一同成长。

欢迎关注认证微博 @回音UI分享会

或者加入QQ群(标明微信)：4439351(④群)标明微信

来源:未知作者:ui制造者

我们这里说的“像素画”并不是和矢量图对应的点阵式图像，像素画也属于点阵式图像，但它是一种图标风格的图像，更强调清晰的轮廓、明快的色彩，几乎不用混叠方法来绘制光滑的线条，所以常常采用gif格式，同时它的造型比较卡通，得到很多朋友的喜爱。绘制这种像素画除了须具备相当的耐心之外，造型、绘制方法也很重要。本系列教程将由浅入深介绍绘制像素画的各种绘制方法和技巧，希望大家喜欢。

（注：文本插图中标注PIXEL FOREST字样的由本文作者郎绘制，其余插图由ICONCN的Jill绘制，在此表示感谢。）

当许多不同颜色的点一个个巧妙的组合与排列在一块后便构成了一副完整的图象，这些点便称为像素(pixel)，图象称之为Icon(图标)或者称为像素画。其它的点阵式图象虽然也由像素组合而成，但是它们在制图过程中并不是十分强调像素，甚至根本无需去考虑到像素的变化，与之相比像素画对于像素更是逐个描绘，处处见真章。
　　
作为像素画来说应用范围相当广泛，直至今天我才恍然大悟，原来从小时候玩的FC家用红白机的画面直到今天的GBA手掌机；从黑白的手机图片直到今天全彩的掌上电脑；即使我们日以面对的电脑中也无处不充斥着各类软件的像素图标。如今像素画更是成为了一门艺术，深深的震撼着你我。下面我们就来谈谈第一步，工具的选择和使用。
像素画欣赏（建筑）

　
　　　　

　　很多人被应该使用什么工具来制作像素画所困绕，其实选择什么样的软件，因各人的习惯而定，无论你选择了什么软件，其制作像素画的流程还都是一样的。制作像素画的软件一般可分为两种类型，一种是用来制作Icon图标的专用软件，比如Microangelo、Iconcool、Articons等等；另一种则是用来编辑位图的图形软件，比如：Photoshop、Fireworks、甚至Windons自带的画板工具。因为我偏爱于Photoshop的缘故,所以本系列教程所使用的软件皆为Photoshop 6.0。

　　当以Photoshop作为绘制像素画的工具时，首先当然是要掌握Photoshop的使用，如果你从没有接触过Photoshop，那你可以先用Windons自带的画板工具来代替。

其次是要善于利用Photoshop的功能上的优势：

1、画布大小你可以随意设置（但是分辨率最好保持在72dpi左右）；
2、各类工具的快捷键以及便捷的复制粘贴功能；
3、网格、标尺、辅助线功能帮助你正确定位；
4、最最强大的图层功能，让你随心所欲，驰骋画布。
5、双窗口功能，复制出一个内容、名称完全相同的视图，一个放大了绘制用，一个保持100%大小预览用，这对绘制像素画而言是很重要的一个功能。（菜单View/New View）
6、历史记录功能等。

　　像素画欣赏（人物）

　　
正如组成汉字有基本的点、横、竖、撇、捺等笔划一样，在像素画中也有规范的笔划，我们称之为基本线条。每种特定线条都是根据像素特有的属性排列而成，并且广泛运用于各类像素画的绘制中。很多人画像素画时总感觉边缘粗糙，主要就是由于线条使用不当造成的。

如下图所示，规范的线条所绘制出来的像素画画面细腻、结构清晰；而非规范的线条使用时像素点“并排”“重叠”现象严重。

　　下面我们一起来看看像素画中常用的几种线条。

1、22.6度的斜线

　　选取铅笔工具并选择1像素的笔刷，以两个像素的方式斜向排列，共分为双点横排、双点竖排两种排列方法。此类线条较常用于建筑的描绘，因此3D建筑的统一透视角度也为22.6度。

　　2、30度的斜线

　　选取铅笔工具并选择1像素的笔刷，以两个像素间隔一个像素的方式斜向排列，当竖向排列时则形成了60度的斜线，此类线条使用较为灵活，经常与其它线条配合使用，以便完成一些特殊的造型。

　　3、45度的斜线

　　选取铅笔工具并选择1像素的笔刷，以一个像素的方式斜向排列，此类线条掌握比较简单，较常用于平面物体以及建筑斜面的绘制。

　　4、直线

　　选取铅笔工具并选择1像素的笔刷，同时按住Shift键，拖动鼠标就可准确的绘制出直线来。

　　5、弧线

　　因为弧度大小的关系，因此弧线画法有很多种。选取铅笔工具并选择1像素的笔刷，分别以像素3-2-1-2-3、4-2-2-4、5-1-1-5的弧型排列，其排列具有一定的规律性以及对称性，如图所示。此类线条较常用于人物头像、动物的绘制。

　　一副像素作品如果总是要一个个点出来啊，实在是受不了，所以把常用的线条笔划以及基础图形定义成笔刷，可以大大的提高工作效率。

自定义笔刷具体步骤如下：

步骤一：新建一个文档，大小随意，解析度设置为72dpi左右以及RGB色彩模式，选择背景色为白色，前景色为黑色。

步骤二：选取铅笔工具并选择1像素的笔刷，分别绘制线条或者基础图形。

步骤三：绘制完一个线条或者一个基础图形之后，选择Edit—Define Brush（编辑—定义画笔），这时画面上你绘制的线条或者基础图形就会定义成一个新的画笔，画笔控制面板中也会出现。

步骤四：当你自制完自己的所有个笔刷后，你可以把原有的笔刷一个个清除掉，然后点击画笔控制面板上的圆形小三角，选择“存储画笔”，这样一个完全属于你自制笔刷文档(.abr)就完成了。你可以随时根据你的需要，“载入画笔”或者再增添新的笔刷。

放大图

掌握了像素画基本线条的画法之后，我们来尝试基础图形的绘制。通过本章的学习，我们将初步了解到线条之间的组合规律。

　　等边三角形

选取铅笔工具并选择1像素的笔刷，绘制一条60度的斜线（图示红色部分）然后再绘制一条与之相对称的斜线，最后连接两条斜线，等边三角型就完成。如果把60度的斜线换成45度斜线的话，则能完成直角三角型的绘制。

　　矩形

　　众所周知四条直线就能构成一个矩形，但是在像素画中当矩形非水平位置时，画法就有所不同。选取铅笔工具并选择1像素的笔刷，以双点横线与双点竖线的画法构成矩形，如图所示。

　　圆角

　　选取铅笔工具并选择1像素的笔刷，任意画一个矩形，选择其中一个直角，在直角线内画弧线，最后删除多余的部分，完成圆角。弧线的弧度决定着圆角大小，弧线的弧度越大则圆角就越大。

圆形

在像素画中四分之圆弧直接决定着整个圆型的大小。选取铅笔工具并选择1像素的笔刷，使用画圆角的方法绘制一段弧线，把握好弧线的对称性，最后通过水平翻转和垂直翻转那短弧线组合成圆形。

在像素画中如果只绘制单一角度的形态，始终是缺乏表现力的。如果要转变角度，那就涉及到透视的规律。

在透视学中，透视可分为形体透视(几何形透视)和空气透视。

形体透视是根据光学和数学的原则，在平面上用线条来图示物体的空间位置、轮廓和光暗投影的科学。

空气透视研究和表现空间距离对于物体的色彩及明显度所起的作用。因为透视现象是远小近大，所以也叫“远近法”。

按照灭点的不同，分为平行透视(一个灭点)、成角透视(两个灭点)和斜透视(三个灭点)。而像素画中绘制一点、两点以及三点透视的线条很难有规律可寻循，因此像素画中的透视法简化变通了上述的透视规律。根据像素线条的特有属性，一种没有灭点的俯视平行透视被广泛的运用起来。

　　1、22.6度透视

因为像素画通常是用来绘制精致小巧的造型，并且我们知道像素画中线条运用十分讲究，因此为了符合人们的视觉印象和便于绘画，这种以22.6度双点线组合而成的俯视平行透视成了像素画透视绘制的最常用透视。

如图所示，正方体的透视就是以22.6度的双点线构成，左右两个面透视角度一样，并且每个面都是平行四边型；整体结构清晰明朗，造型表现直观，并且易于掌握。

　　2、45度透视

虽然转变了角度，但是每个面都是一个平行四边形这个透视规律是不会改变的。但是由于左右两个面透视角度一不同，所以在实际的绘制中很难把握好，大家应该多观察多动手。

　　3、圆柱的透视

以顶面的椭圆的圆度来决定俯视角度的高低，如果椭圆越接近圆则俯视角度就越高，反之椭圆越扁则俯视角度就越低，如图所示。

　　4、锥体的透视

锥体分为四面锥型，圆锥型等等，但是画法是没有区别的，底面决定锥体的大小，斜线控制着锥体的高度。总的来说，还是要多加练习，尝试用不同角度的斜线来绘制各种高度的锥体。

练习示例

造型是体现像素画特征的基本要素。造型的能力一方面来自于平时生活中知识的积累；另一方面则可以借助图片资料作为参照；甚至通过临摹优秀的像素作品以及对素描、速写等艺术学科的参透也能提高我们的造型能力。

通俗一点来说造型就是用来表现作品形态的一种构图概念。学习造型没有捷径可寻，只有通过多看、多记、多学、多练才能有所提高，因此本章学习的并不是教你如何去造一个型，而是引导你有一个正确的造型思维方式去造更多的型。

　　造型方法之一、把造型复杂的东西简单化

如图所示，这是一个打开的盒子。在构思一个打开的盒子时，首先想到的不是打开的盒子如何难画，而是盒子的整体形态是什么，根据这个形态再去想象出盒子的大体的形状，最后才去考虑把盒盖如何打开。此种方法虽然过程烦琐，但是有利于把整体不至于产生严重的变形，非常适合初学者。

　　造型方法之二、逐步深入刻画

在鼠标随意绘制出来的草图基础上，一步一步的深入下去。如图所示，海豚的造型过程，粗糙的草图通过一步步调整形态、柔化线条之后出现了精致的造型。此种方法虽然虽然简便，但是对于没有一定美术基础的人来说不易掌握。

　　造型方法之三、寻找图片资料作为参照

当你为表达不出心中所想而困惑时，不妨试着找找相关的图片资料。如图所示，那是一台笔记本电脑的图片，通过对图片的提炼与加工，很容易一幅像素画就完成了。其实通过图片绘制像素画更有小窍门，比如在Photoshop中打开一个图片实例，缩小并且降低该图片的透明度。随后新建一层，选取铅笔工具并选择1 像素的笔刷勾勒出造型的轮廓，这样就把一造型简单绘制出来了。

但是要注意的是这样做虽然有了造型的形，但是还是缺少造型的神。还是那句话多看、多记、多学、多练才是造型的学习方法。

　　要理解和运用色彩，必须掌握进行色彩归纳整理的原则和方法，其中最主要的是掌握色彩的属性。像素画中色彩运用当然也遵循着这种规律，但是在这里我们并不会去解析这些烦琐的问题。毕竟这只是一篇像素画的教程，如果想要深入这些问题，不仿可以找些关于色彩的明度、色相、彩度以及色彩混合、色彩对比、色彩搭配等文章来读一下。

针对像素画色彩运用，我们大致可以简单的理解成为：平面的纯色填充、中间色的过渡、色彩明暗关系的确立。而其中平面的纯色填充，并没有任何技巧性的东西，只要有足够的耐心就可以了。因此本章着重于像素画颜色过渡规律的学习。

像素画颜色过渡方法之一、均匀过渡

同一色系中把颜色由深至浅或者有浅至深的排列，以起到均匀渐变的效果。此种过渡方法普遍运用于小范围的像素绘画中。如图所示：

　　像素画颜色过渡方法之二、双色过渡

根据其中一种颜色点的疏密排列，产生过渡效果，此种过渡方法较常用于平面的绘制上。绘制这些点因为具有规律性，所以这时你可以使用一下复制与粘贴功能，将会大大改善你的工作效率。如图所示：

　　像素画颜色过渡方法之三、圆柱体过渡

同一色系多种颜色的渐变过渡，以至达到一种立体感，此种过渡方法适合于圆柱类物体的上色。如图所示：

　　像素画颜色过渡方法之四、网点渐变过渡

另一种平面的过渡方法，在一种颜色的基础上再叠加网格，绘制出的物体过渡自然，颜色饱满，但是难度较高，不易掌握。如图所示：

在像素画中仅仅把握住了明快的色调还不够，有时画面的色彩仍然不够生动，这是因为在色彩的运用还缺少明暗的变化。

只有遵循物体与光源之间的变化关系，才能表现出既生动又符合我们视觉印象的像素画来。

当我们准备绘制一幅具有明暗的变化关系的像素作品时，首先要定好光源的所在位置，其次根据光源的照射再在物体上添加亮部、中间色、明暗交界线、反光、投影，如果绘制的像素作品很微小的话，那就只要把握好亮部与暗部就可以了。

物体的明暗刻画

　　如图所示，在A图的基础上考虑进去光源照射的方向并且把握好物体的受光面与背光面。其中应当注意的是物体无论是受光部分还是背光部分的色调要与整体色调保持一致，亮部可以由主色加白色或浅色提亮，而暗部可以由主色加黑色或深色转暗。

人物的明暗刻画

　　如图所示，比物体的明暗刻画要来的复杂，虽然受光照射的方向一样，但是人的头发、帽子、皮肤、穿戴的色调以及物体质感皆有所区别，因此我们还是应该根据物体属性分别来刻画它们。如果有背景的画，有时还要考虑一下背景对人物的反光，也就是我们说的环境色。

重叠物体的明暗刻画

　　如图所示，两个或者更多物体重叠在一起时，除了要遵循明暗的变化规律，而且还要注意物体与物体之间重叠时产生的叠影，这样物体之间将更具真实感。

当我们看见生活中琳琅满目的物品时，可曾想过用像素画的形式把它表现出来。本章将通过一套茶具的绘制来阐述一下物品类ICON的绘制全过程。

首先绘制出茶具的整体轮廓，看似简单的一步,其实是最花工夫的,为了表现出真实的物体形态，最好找到图片或者实物进行参考。绘制轮廓过程中你要考虑到静物的绘制角度，把握好整体的透视关系，因为一些物品都是我们日常生活中常见的，已经在脑海中留下了很深的印象，如果在绘制时稍微有些变形，我们看着就会产生别扭感。

其次为茶具的整体上色，在这里要绘制的是一套白色茶具，所以根据拟订好的光源照射方向以及物件之间的相互影响的关系，为茶具铺上的是一层灰色，确立出茶具的底盘、杯身、杯口几个面来。

接着继续着色，在确立出茶具的底盘、杯身、杯口几个面的基础上根据从右至左光源照射方向的调节三者的明暗关系。如：把杯口的黑线提亮，这样杯口就更显立体感。此时基本的明暗关系已经确立，但是我们应该注意的是确立的只是三者各自的明暗关系，整体的明暗并没有统一。

然后继续刻画茶具，为了把底盘、杯身、杯口的明暗过渡表现的更为细腻和自然，再次刻画三者的明暗关系，并统一整体的明暗。此时为了使茶具的整体布局更为充实，我们再为茶具放置一把小勺。

最后，仔细观察一下整体的明暗关系，调整一下底盘、杯口、杯炳、小勺的高光与暗面部分细节，一副像素画作品就这么完成了。

像素画中绘制动物造型有着写实与卡通之分，但因像素画皆以小巧可爱著称，所以绘制像素动物画时也大都采用卡通造型。

绘制卡通动物，有几个好处，一是不用刻意准确把握现实中动物的形态，适度的夸张变形可以让形象更加生动可爱；二是上色更为简洁明了，容易博得别人的好感；三是图片资料随手可得，想画什么就什么。

本文将通过一只卡通狮子的绘制来阐述一下动物类ICON的绘制全过程。

新建一32×32的文档，绘制出狮子的轮廓。在绘制左右结构对称的作品时，你可以先出绘制一半来，而后再复制粘贴出另一半来，最后水平翻转对齐两半就可以了。这个狮子的造型，我主要参考了迪士尼的狮子造型再加以修改就成了现在的样子了。参考造型时要抓住动物的特点，才能为自己所用，比如狮子显著的特点就是鬃毛、鼻子、脸部等。