年代久远~文中原作链接已经失效，导读的意义已经没有了……随着 Windows 的更新，Ribbon界面 的 Windows画图 也已经“面目全非”，文中相关内容也没有了参考价值。所以这一篇请跳过不要阅读。

原书是借来的，本文作为笔记，更大的用处是在书还回去之后，还能够给自己一个参考。根据自己粗陋的理解，绘制了一些插图，不知道是不是这么回事。

本方法告诉你如何用 Adobe Photoshop 和 Adobe ImageReady 创造出生动的动态图块。它可以为你开发手机游戏节省时间。

这个方法是我在“Hive of Evil”（http://www.cyberdream.ru/hoe.html）工作的时候搞出来的…… 首先，你需要建造水的材质（不需要很高的质量，但是对比度要高些）。它是全部工作最原始的资源。 建一个新文件。它应该大一些（可以用肉眼很容易的看出图块拼组和动画效果）。用资源材质填充这个图层。复制本层。改变两层中居上图层的不透明度。 图例中，不透明度设置在 30% ，但是这个值应该视资源材质的类型、对比度以及色彩等具体情况进行不同的设置。 切换到 ImageReady ……

现在，你应该创建一个新的图帧，然后将居上的图层整体稍微移动一点位置。移动的方向以及移动的步骤按照你的目标不同而不同。

关键的是你最终得到的结果应该是一个循环动画。16x16 的图块每帧持续向前挪动 两个像素 ，结果就是平静流动的水面。（挪动像素越多，）步伐越大，水流速度越快，帧数也就越少。为了得到最优效果，你需要不断调整每帧的不透明度，还要适当处理一些像素点，直到满意为止。 这里你可以看到不同的移动方向和图层的不同设置所产生的不同效果……

你应该用工作调色板将最佳的结果保存为 gif 文件。 现在要做的就是通过切割获得最终的流水动画图块。

用 ImageReady 打开你的 gif 动画，然后切换到 Photoshop ，在动画上切割任意 16x16 的部位。 现在我们得到了 16x16 像素图块的 psd 文件。这个文件有多少层就有多少帧，图层的数量就是帧数。 现在你需要挨个保存每一层。 这个并不难，我们已经得到了水面的动画材质了。 下面是几个应用了上述手法的流水动画，有的是我在“Hive of Evil”工作时的小样，其他的是我们 CyberDream 公司（http://www.cyberdream.ru/）的项目。

　　按“D”将现有颜色重置为缺省颜色（孙老四说：此为 PhotoShop 快捷键，后面也是一样，不多作说明）。创建一个新层，使用“Alt+Backspace”将其背景填充为白色（这个就搞不懂了，“Alt+Backspace”似乎是使用前景色填充，而之前重置了缺省颜色，前景色应该是黑色呀。不知道是不是作者写错了，后面的“Ctrl+Backspace”也是一样。反正这里就是要填充成白色，按“Ctrl+Backspace”就好了。）。按“M”使用选框工具，再按“Shift+M”切换到“椭圆选框工具”，此时，按住“Alt+Shift”用鼠标左键拖出一个椭圆选框（孙老四说：Alt 让你从圆心拖出选框，Shift 让你可以拖出一个正圆选框）。 　　按“X”交换缺省的前景色和背景色，然后用“Ctrl+Backspace”填充选区内为黑色（孙老四说：这里似乎应该是“Alt+Backspace”）。使用菜单“选择〉修改〉收缩（Select>Modify>Contract）”，收缩量填入 1 像素。单击确定。接着按“delete”。 　　（孙老四说：此时应该已经取消了选框）按“B”使用画笔工具，再按“Shift+B”切换到“铅笔工具”。选择画笔为一个像素点。在圆的边缘点击一下鼠标左键，然后按住“Shift”在下一点处单击一下鼠标左键，这样就可以拉出一条连贯的直线，如法继续则线条首尾相接。试试把大致脸型勾勒出来。 　　创建一个新层，用一条红线标志出来发基的位置。再用另外两条确定面孔的比例。 　　（孙老四说：最好新创建一个层）开始在脸型轮廓内添加细节，按照你的需要勾勒出五官。 　　将所有线条换成黑色。放置一个光源（孙老四说：一般光源在心中就可以了，放个灯泡在上面是方便演示）。 　　（孙老四说：新创建一个层）使用另一种颜色定义出背光阴影的区域。做完了之后，将其转换为黑色，然后调低这个层的“不透明度”。 　　在边线层选择边线外部的区域。线条的连贯性可以确保选区在边线外部。菜单 “选择〉反向（select>invert）”。在层次最深的最底层填充较亮的肤色。 　　选择较深的肤色填充阴影区域。 　　选择皮肤的中间色，然后定义出中间色的区域。 　　填充。填充头发的颜色。 　　开始添加细节，来迎接第二层阴影。 　　在亮色与中间色、中间色与暗色之间分别选出两种过渡用的色彩，用来平滑过渡。 　　继续添加细节，用头发的颜色和深色定义出眼睛和前额。 　　细节处理结束。 　　我们需要一些调整，“图像〉调整〉曲线（Image>Adjust>Variations）”。“图像〉调整〉色阶（Image>Adjust>Levels）”快捷键是“Ctrl+L”。“图像〉调整〉色相/饱和度（Image>Adjust>Hue）”快捷键是“Ctrl+U”。 　　说了这些，希望你能用得着，谢谢。

第一部分：打造适合像素艺术的 Photoshop

这是一套简洁易懂的 Isometric 教程。第一部分讲了一些使用 Photoshop 或 ImageReady 制做像素图的一些注意事项。

注释：我喜欢用 Adobe ImageReady 来创作像素艺术，由于使用 Photoshop 长达数年之久，Imageready 的工具布局和界面同样符合我的习惯。ImageReady 相当于拥有基本功能的 Photoshop ，其完美的适用于低资源的像素艺术，加上它提供了更多的撤销机会，不像 Photoshop 只能用历史选项板。另外请牢记，所有的像素作品新建的时候屏幕分辨率都应该是 72DPI 。

无论如何，你的选择并不局限于 ImageReady ，Paint Shop Pro、Graphics Gale 甚至原始的 Windows画图 都是可以用来创作像素艺术的应用软件，Photoshop 和 Paint Shop Pro 提供的 层 功能可以帮助你完成大型的作品。但是如果你是个初学者，免费的微软 Windows画图 也是个不错的选择。

1：打开 ImageReady ，创建一个新的文档，选择 铅笔工具（快捷键是“B”），然后选择最小尺寸的画笔。这个画笔尺寸表现为 1 像素 ，在电脑屏幕上你可见的所有图像都是由这些独立的像素点所组成的，开始尝试喜欢上这些微小的正方的像素吧，以后你会经常和它们在一起。 2：当创作像素艺术的时候，你更多的时候会使用到放大的视图。反正这样作画要比按原比例 100% 来看你的图像会有帮助。你应该这样做：菜单 “视图〉新视图（VIEW - NEW VIEW）”（新版本的 ImageReady 应该是“窗口〉文档〉新窗口（Window - Docunments - New window）”）（孙老四说：我们现在能够用到的 ImageReady 的操作应该是“窗口〉排列〉为什么什么新建窗口”） 3：这就会为你已经打开的文档创建一个独立的视图，给它摆放个合适的位置，不论你在放大的视图做什么操作，都会反映到 100% 视图中。 4：如果你使用 ImageReady 的选框工具，请确保关闭“消除锯齿（anti aliasing）”功能。（孙老四注：自动）消除锯齿 是像素艺术的禁忌，尽管精灵的制作中还会应用到手工的反锯齿技术。 5：创建一个调色板也会对你的工作大有裨益。每使用到一个颜色就在你的文档左上角放置一个该颜色的方块，这样可以对你所使用过的颜色一目了然，使用 吸管工具 可以方便快捷的重复使用这些颜色。 6：放大你的作品，这样你可以集中精力来提升细节。一定要把 100% 视图放在一侧，可以随时检查作品的状况是不是你想要的。有时候事情看起来不大对头，那可能是你想要在太小的区域内实现太多的细节，想要把东西搞得太复杂。像素作品和传统的作品不同，一幅图像中可以容纳的像素数量是有限的。并不是你想把像素放到哪里就可以放到哪里的。 7：如果你感觉作画的时候自己需要有个底板来参照，你可以通过扫描手绘稿，然后使其像素化来实现。用 72DPI 分辨率来扫描你的手绘稿，将其缩放到最终适合于像素创作的尺寸，这可能会丢失一些原始图片的细节。大多数视频游戏的精灵角色尺寸是按照 8 的倍数创建的，比如 8x8、16x16、32x32 还有 64x64 这都是比较常见的。当然喽，如果你是在创作杂志的插页就没有这种限制了。

第二部分：等角像素中的数学

第二部分简单的介绍了 26.565 度的标准等角斜线。

1：等角视图通过弱透视的视角（无灭点透视）展示对象，所有对象都基于下面的这种菱形栅格。 2：传统的等角视图基于 30 度斜角，可是由于电脑显示器显示图像的特性，30 度的斜线会显得扭曲而凹凸不平。像素艺术使用约等于 25.565 的倾斜角度。不要被这突然蹦出的数目迷惑到，事实上你根本无需在意它们。 3：当绘制一条 26.565 度斜线的时候，你需要记住，这条线是这样的，横向并列放置两个像素，然后上移一个像素，在前两个像素的横向的下一个像素开始放置下两个像素。当你放大它们的时候，你就会看到它们好像台阶一样。

第三部分：两种类型

第三部分列出了等角线条相接的两种情况，并分析了各自的利弊。

1：有两个途径来进行等角制图，第一种是使用三个像素的拐角（如图一）。这个方法在面向我们的边角使用了三个像素，所创造出的方块整洁而且看起来比较顺眼。 2：第二种方法就不是使用三个像素了，而是两个像素，整个结构中全部是两两阶梯。 3：如果你用第一种类型的方块搭建大图，你会发现，方块两两拼接的边角处那两三个像素别扭的凑在一起。 4：所以，当你用方块垒摞大图形的情况下，第二种类型才是我们所推荐的。

第四部分：立体

第四部分演示了几个立体造型。

1：方块做起来真是非常的简单，你也不一定非要按照这种方法来做。这个画方块的简单办法就是先画方块的顶面，然后在 Photoshop 中通过 图层面板 的“复制图层”命令 复制这个图层，把新图层向下拖动，最后使用垂直线将它们连接起来。 2：下面是几个棱锥的示例。第一个整体使用的都是两两阶梯形式的线条。第二个除了用到这种线条还用到了单一像素的斜线（孙老四注：45 度 斜线），使得三角坡面倾斜角度更缓。 3：圆型应该是比较难以掌握的图形了，一个球体用“选框工具”很容易就可以创造出来。但是圆柱体就要难一点了，尽管如此，有点耐性做点练习保持好眼力同样可以使用“选取工具”来创建。 4：这里是几个比较简单的等角视图的立体图形，你唯一受限的就是你的想象力。

第五部分：光源和色彩

第五部分讲解了光源和明暗的表现。

1：许多漫画风格的像素作品使用黑色的边线。我们使用一个立方体来演示光源的照射。先从一个黑色边线的方块开始。 2：我们选择的光源是从左上角向下照射的。平铺蓝色到迎向光源的一面，选择亮一点的蓝色平铺到光照强烈的顶部，暗蓝色则应用到右侧面，这里光线接受的最少。 3：我们的方块看起来很立体了，但是我们忍让可以添加一点东西使它效果更好些。我们没有必要保持所有边缘都是黑色，给面向我们的边缘加上高光（这些都是在图像内部的边线），效果就不错了。 4：点睛一笔，选择纯白色，把面向我们的尖角的几个像素点成白色，怎么样，我们的方块有了耀眼的光泽。（孙老四说，个人以为最好不要使用 255 255 255 这样的纯白色，可以微调一下，比如 254 254 254）

第六部分：我们来建造等角小屋吧

运用前面的知识，建造一个实例。

本文中将会结合前面讲到的各种知识和技法来绘制一个等角的建筑。我选择的是建造一个叫做“Marsh's Loft”的电玩商店，你当然可以随自己的喜好愿意建什么就建什么。

1：首先，画一个方块的边线。这样做的好处是可以帮助你确定建筑的大小。 2：一个建筑如果只是一个方块未免让人感觉不爽，我来为它添加一个有趣的房顶。这个房顶是由层层渐大的三个平板摞叠起来的。（孙老四说：请注意看三个平版的摞叠，左右并不是对称的，向右错开了一两个像素，到底是一个还是两个随你怎么说，这样可以让迎向我们的这个边角现出层次，而不仅仅是按照“标准原理”而产生的一条垂直线，虽然不对称，但是作者处理巧妙，实在值得我们学习。） 3：现在我们房子基本成型了，给它填充上我们选择的颜色。 4：为了把它做得更有趣一些，我还在房顶上添加了一个凹进的平台，这是个很容易做到的细节。 5：再次请出我们的左上角光源，我以刚才的色彩为基色，准备了 3 个不同的变化，一个基色、一个亮色还有一个暗色。用这三种颜色就可以表现出光打在建筑上各个面的明暗效果。 6：现在添加一些折角边缘的高光。为建筑内部的边缘添加高光会制造出很酷的效果，黑色的边缘也不错，但是添加高光可以让我们的建筑更加完美。请注意有些黑色的边缘我使用了暗蓝色来替代。 7：添加一个窗户，长方形的窗户折过去在建筑正面还有一部分，创造了一种雕刻的效果，还有窗台。 8：用同样的技法在窗户边上添加一个门。 9：这个商店叫做“Marsh's loft”，可是如果没有标志，谁能知道这个呢？我们先放下我们的小房子，来了解一下怎么建造一个等角的标牌。

10：确定“消除锯齿”功能已经关闭，选择字体键入一个字符，我键入的是 3 。因特网上有很多的位图字体可以免费下载，拥有一个位图字体库确实可以对我们的像素艺术有所帮助。 11：Photoshop 菜单“编辑〉自由变换〉扭曲”，然后扭曲这个字符到等角的角度，你可以通过目测达到 25.565 度。 12：现在使用 选框工具 选择这个字符，在新的图层 选择菜单“编辑〉描边...”，宽度设置为 1px ，位置 居中 。这样就得到了字符的边线。 13：复制这个图层，拖动它成为立体字符的另一面。用等角斜线连接它们。 14：现在为各个面填充色彩，并清除那些实际不会显示出来的像素。 15：再一次使用左上角光源，从原始色彩变化得到一个亮色一个暗色，然后用它们填充相应的面。 16：现在为边缘添加高光。 17：最后在边缘的一些位置添加一些纯白的像素。（孙老四说：这个步骤在这个演示中效果并不明显，你不会看出有什么变化，因为黄色已经很亮了。但实际上作者把那三条亮线相交位置的五个像素变成了白色，其它两个尖角也是这样处理的。虽然这里效果不明显，但是这样的点缀一般可以显出耀眼的反光效果，可以借鉴，不过个人以为，最好不要使用纯白色） 18：好了，现在我们学会了等角的标志牌如何制作。我的“Marsh's Loft”也有了自己的标志，然后我们把它安置在建筑的右手边上。 19：最后，我为玻璃添加了高光，还贴上了贴纸。

这是个很简单的教程。但是这里我会告诉你一些小技巧。如果你已经是个“像素创作者”了，那么你已经没有必要阅读这个了。

1：新建一个文档；RGB 颜色；72 dpi 分辨率

2：我使用 #666666 作为背景色。

3：在新的图层上，使用矩形选框工具来创建一个宽 140 高 480 的矩形。

4：用 #868870 填充它。

5：在图层面板中双击本层，打开图层样式窗口。

6：选中“斜面和浮雕”。 样式：内斜面； 方法：平滑； 深度：1000% ； 方向：上； 大小：0 ； 软化：0 ； 角度：120°； 高度：30°； 消除锯齿：不要选中； 光泽等高线：直线； 高光模式：正常；白色；75% ； 暗调模式：正常；黑色；100% 。

7：等高线：选中（使用缺省设置）。 8：在我们的矩形图层上再创建一个矩形。使用固定尺寸：宽 130px，高 450px 。按一下 Delete 键。不要取消选框。

9：新建一个图层，填充 #515642 颜色。取消选框。现在复制上个图层效果到本层。 10：现在再创建一个新图层（我命名为“dots”）。用放大镜放大图像到 1600% ，使用 1px 画笔的铅笔工具，白色，按照我的做法画上几个点（看到没？总共 8 个点，呵呵）。减少层的不透明度：65% 就可以了。 11：现在回到第一个层，拉出一个 130×12 的矩形选框。右键弹出功能菜单，选择“自由变换”。

12：再次单击右键弹出新的菜单。选择“扭曲”，然后按照我的做法扭曲你的选框。按“回车（Enter）”。还是不要取消选框！按“Delete”。 13：现在重复第 9 步（在新的图层用 #505F62 填充选取，然后复制第一个层的效果）

14：创建一个新图层。我们制造像素小灯。再次放大你的图片，然后使用 1px 画笔的铅笔工具画这些图案：请使用我提供的颜色，黑色、白色、#999933 还有 #CCCC99 。 请注意：当你放大画布进行工作的时候，导航器上面的预览意义不大。所以你应该使用两个窗口！很简单：菜单“窗口〉排列〉为 某某 新建窗口”。这样，一个窗口保持原始大小，另一个放大到 1600% 。

15：继续吧。复制小灯，然后挪到下面一点，变个颜色（我使用的是 #6699cc ）。

16：画两条并列的斜线在那个边角。简单但是起到了装饰效果。

17：插入线条很简单：只需要画一条 黑色 一条 #727661 的两条线。然后我们就可以偷懒了，只要 复制 粘贴 移动 就可以了。呵呵。我复制了好多次。

结果我们就得到了这个漂亮的菜单：

四驱车，经历过的，不信你没玩过。更多内容 >点进来看< 。

像素绘画的线条

像素绘画的线条更多是用来勾勒线稿。

90°线：这个恐怕是最容易理解的线条了。在“画图”软件中选择“铅笔”工具，同时按住鼠标“左键”和键盘“上档键（↑Shift）”横向或纵向拖动鼠标，就可以绘制出标准的90°线条。这种线条不论如何也不会出现锯齿（这是废话）。
45°斜线：这种线条使用十分广泛。在“画图”软件中选择“铅笔”工具，同时按住鼠标“左键”和键盘“上档键（↑Shift）”斜向拖动鼠标，就可以绘制出标准的45°线条。
26°斜线：广泛应用于建筑、物品等作品之中。这种线条十分流畅，没有锯齿。这个简直是“最有用”的线条了，所以必须熟练掌握！但这种线条在绘制的时候没有快捷的辅助方式。（但不知道原因是什么[一种说法是“45°角的一半”，但还是想当然了]，这种26°的线条被广泛的称为“22.6°斜线”，这是一个错误。相信我，我是用量角器进行过手工测量的。PhotoStudio软件的旋转功能也证实了这一点。）
30°/60°斜线：这种线条其实并不会经常单独出现的，因为它是一种会出现锯齿的线条。但是等边三角形应该是属于“标准”几何图形吧，所以60°斜线你也要掌握，呵呵。
弧线：当然了，只有各种角度的直线是远远不够的。所以我们要开动脑筋，画弧……这是没有定式的，但我们的目标就是让我们的弧线看起来锯齿少一些！

像素绘画的基本图形

矩形：矩形相对的两个线条需要平行，相邻两个线条需要互相垂直。其实在一般的应用之中很少需要那些多种角度的矩形，掌握以下几种基本的就足够了。
三角形：就是三条线相交所形成的图形。
圆形：这就是考验弧线的运用了。正圆的绘制，在“画图”软件中选择“椭圆”工具，同时按住鼠标“左键”和键盘“上档键（↑Shift）”拖动鼠标，就可以绘制出标准的正圆。否则，就可直接绘制出椭圆。在一些情况下依旧是需要手工绘制的。告诉你一个手工绘制的办法，先绘制一个矩形，然后“扣画”出椭圆。

像素绘画的立体及透视

透视：当我们把思维调换到“体”的时候，就涉及到了“透视”的问题。接触过素描的朋友都应该知道“透视”的概念。当然了，近大远小。但是，我们画像素，就要用另一种透视思维——无灭点[消失点]透视。其实，我们的中国画用的就是这种透视方法，不论远近在画面上的表现都是同样的比例。这样，在绘制大型的场景，譬如城市俯瞰场景从理论上成为可能。看看2D游戏的场景你就可以理解了。（这里说的透视问题仅适用于像素俯瞰场景等的绘制，仅仅使用像素手法来表现的其他作品不在讨论之列。这个你应该能明白。）

立方体：这个是标准的斜26°透视来绘制的正立方体。这属于最容易掌握的透视了，广泛应用于建筑、物品等的绘制。
45度透视：例[1]的这种透视，是26°和45°线条的组合，比较难以掌握，但效果十分不错，并不推荐初学者使用。有一些老游戏应用到了例[2]的这种透视，是纯45°的透视，诚如你所见，效果并不好。
圆柱体：椭圆的运用。圆柱体的椭圆面是不容易掌握的，告诉你一个办法，先绘制一个立方体，然后“扣画”出圆柱体。
四面锥体：……
圆锥体：……

Windows画图伴随我那么多年，谨作留念。