主题：【文摘】像素初步 -- Ambrossi

哈哈哈，可以上传了，终于可以把这个像素入门系列转过来。本来想直接转的，又希望做些铺垫，就先写了一点介绍。等不及了，先转了吧，那个慢慢写。

话说兄弟我还住在一大豪斯里的时候，上下四人，每个人回到家里干什么那是很不同的。按下两个不表，我和另外一位都是往电脑前一坐，我是武的：开个黑羔羊或者盲守护，五分钟内鼠标键盘噼啪乱响，人神虫的哀嚎就响彻陋室了，他是文的：开个coldplay或者Four_tet，鼠标也是有节奏的吧嗒~~~吧嗒一下下的。我在干什么大家都知道，他在干嘛呢？就在点像素呢！我老是嘲笑他坐禅，因为看着实在无趣的很，开个PS，加上grid，开点吧您就。一幅像样点的没有个十天半月的出不了个雏形。他也嘲笑回来：你个几年旧的游戏，又是rep又是vod，天天看战报，你以为围棋打谱呐？不过笑归笑，还是要承认他厉害的，这不人家写了个系列，好的不得不推荐。

是为序。

他现在的空间 外链出处

--------------------------------------------

这一章是为一些刚接触像素但还不太了解的朋友准备的，其实网上有很多地方都有这些教程，我也是从网上学到这些技巧的，但我还是准备写一章，是想和大家分享我的一些摸索的经验，所以我将这个栏目命名为"探索手札"。

那么什么是"像素"呢？其实这里的像素是特指像素艺术，因为不这样说明，任何在电脑上出现的图片都是像素，那就显不出像素艺术的特别之处啦。所以像素画是指一种有目的地控制每一个像素来完成的画。所以可想而知，画像素一定很烦琐，因为要一个一个像素的点，但我是迷进去了，可能是我有控制欲，想控制每一个像素，哈哈。而像素图和一般图的区别很简单，参看[图-1]就可以了解的了。（一句话，像素是不要"AA"－"AntiAlias"抗锯齿的图。）

(汗一下，还是不能上传，偷偷他的带宽~~~~朋友间的事，能叫偷么?）

那么具体怎么样去掉"抗锯齿"这个功能呢？（忘了说一句，在这个栏目里所用到的软件均为Adobe的Photoshop7.0和 Imageready7.0，简称PS和IR。所以示意图也是这两个软件的工作界面。当然，不是只有这两个软件才可以做像素，只要有放大，缩小，和输出功能的点阵式图像制作软件都可以胜任像素制作，如MS-Paint，Macromedia的Fireworks，etc。）好，如图所示，选择铅笔工具，相应的橡皮Mode一栏，有三个选项：Brush，Pencil，和Block，选为Pencil，即可。），如果要加入像素化的字体的话，将Anti- Alias的Type选为None，就把"抗锯齿"功能去掉了。

好了，万事具备了，可以用我们的铅笔工具开始在画布上点着玩啦，第一步我们是要起稿，起稿的时候很注重线条的规范性，现在看看[图-2]，图2中的第1列是像素画里基本的直线，而第2列则是被认为错误的起稿线条，错误的地方是每个小方块不是对角线相连的，也就是说图里红色的地方是属于多余的像素（说明：第1 个直线是1个像素连1个像素，第2个直线是2个竖着的的像素相连，第3个直线是3个竖着的像素相连，不同的排列形成各种角度的线条，关于这种排列涉及的各种问题会出现在"像素里的数学问题中"。）当然凡事没绝对，有的时候为了特殊效果而故意在那些地方加上"多余"的像素的，但在画直线的时候还是以上方法最准确。当我们把[图-2]恢复成原始大小的时候就发现，错误画法的线条就象被咬过一样，看着不象一条直线。

直线掌握了这个方法就很好画，而且不是只有以上3种的画法，原则上是规则的排列就可以形成各种各样的直线的了，参考一下[图-4]，比较困难的是画弧线。

弧线画法的原则是像素递减排列，象[图-5]中左边的第一张图，就是以4-2-1-2-4的顺序排列的，如果圆越大，递减的梯级就得越多，这样的线条看起来才会有圆滑感，不过画大的正圆真的很有挑战性，各位看官不妨试试自己的耐力。

画圆可以偷懒，只画出四分之一的圆弧就行，然后复制图层-->旋转90度-->再复制-->再旋转，重复3遍就可以把圆画出来。

象上面的复制法很多时候都可以用到，不管是画圆画圆柱画立方形画锥体，其实用像素来建造的房子也就是由这些基本形组合来组合去的，用这样的方法可以大大节省时间，提高效率哦！

首先当然要有一幅线稿啦，这里用前两天我画的一只番茄（其实是画圆画扁了， ：D）

将线稿存在的层独立为一层，现在有线稿一层，还有背景一层（线稿不要放在背景上，这样的好处是最后去掉背景就成透明背景图啦），现在另开一层（称为底色层吧）置于线稿层下面，用魔棒在线稿层选取番茄内部，再到底色层选一种红色做番茄的基本色（我选了这个，不知道这种番茄新鲜否），然后铺上，现在效果应该这样：

下一步，再开新层，置于底色层之上。这一层作为番茄阴影层。设定光源来自左上方，所以把阴影涂在右下方，选一种比底色深一点的红色，另外注意到番茄的蒂部是较浅色的，所以加上点橙红色，我喜欢番茄不怎么熟的状态，所以待会还会加上点绿色，那现在就成这样了，完成度25%：

下一步就是颜色的过渡问题，注意到深一点的红色到浅一点的红色间颜色过渡很生硬，直接造成没有立体感的后果，所以下一步来解决这个问题。有两个办法，一是挑选处于两种颜色中间的一种颜色（美其名曰“过渡色”），填入两色中间的地带；

由于例图比较小的原因，还有gif图受限制的２５６色，这种方法过渡的效果不明显，如果大家画大的像素可以考虑多用这种方法。那么另外一个方法就是用pattern过渡法，先看看效果：

这种方法的效果比上一种好很多，而且还省了一种颜色，又经济又实惠。

（关于pattern法，我打算另写一章，请期待。）

那么我们继续深化番茄，加上亮部，还有暗部也加深一下，最后总结，番茄的基本部分用红色３种，可以接受，顺手画上阴影吧，看起来有效果些。

黑色边线真让人不爽，给黑线上了色吧，到线稿层（这层应该位于最顶层，总管其他层），给层选上保护透明部分选项，就可以给黑线上颜色了，上一个最暗的红色。

我上色喜欢上中间色，上完后给暗部来一层，再用浅色提亮，过渡就形成了，这里的绿色我也照办。

总结，加上蒂部附近的绿色，共４种颜色，再给可爱的番茄亮部加上点闪亮的白色，娇嫩欲滴啊！

大功告成，不算透明色，总共１１色。

我非常佩服那些做ICON的人，在那么一个小小的空间中，用很少几个颜色，像素就可以画出那么多东西

首先让我们来探索一下pattern法本身。

假设我们现在只有纯黑色和纯白色，我们要用它们来调出灰色来：

（红框里的是基本的pattern形，小黑块乃是1像素*1像素，这里只是放大了而已）

以上三种很简单的pattern就可以组成三种不同灰度的灰色（分别是25%，50%，和75%），来看看成果：

25%

50%

75%

现在我们从100%（黑）->75%->50%->25%->0%（白）来排列，可以得到一个从深到浅的色阶，而其实我们只是用了2种颜色（看起来很象漫画的网点）。

运用这个方法，可以让颜色过渡看起来比整个色块的过渡自然一些。我个人爱好50%的pattern，因为这种格子是我的最爱（vans！vans！），所以我用这个用得最多，其余的pattern大家也可以尝试着去画，找到自己最喜欢的。

分析一下实例：

我的过渡只用了50%，如果有精力和有耐心，可以做上25%和75%的，一个建议就是过渡越多，画面越光滑，同时像素特殊的鲜明感也会减弱，也就是我们常说的画面开始糊起来了，所以过渡需要适可而止，不要过而不及。

回到刚才那个灰色过渡图，我们发现颜色过渡其实还很生硬，那是因为颜色过渡时取的都是直线，我们想点办法，把过渡线弄成折线，那么或许效果更自然些。

大家可能已经发现了，pattern就是说一个图案在重复运用，所以它本身并没有既定的模式，大家完全可以自创出一套属于自己的pattern。