PS教程：让像素画动起来

作者 Gleb Polikanin 

最终结果

在本教程中，我将教会你们利用PS的几个简单工具，创建出会动的像素画，掌握这些最简单的技巧，举一反三，多加练习，不久之后，相信您能够完成更为复杂的创作。

1. 画布准备&工具准备

步骤1

在工具栏中选择铅笔工具，这是本教程中主要使用的工具，选择窗口>画笔，画笔比肩预设中，如下设置。这样就非常锐利了。

步骤 2

将橡皮擦工具的模式设置为铅笔模式，画笔设置同上

步骤3

打开像素网格（视图>显示>像素网格）

注意:当放大到600%左右的时候，像素网格才会出现。

步骤 4

首选项>常规，然后图像差值设置为邻近，这样确保创作对象的边缘保持锐利

单位与标尺选项中，将标尺单位设置为像素

2. 创建角色

步骤1

准备好了后，开始创建角色

先绘制出角色人型，不要在意细节。也不必上色，只有轮廓就够了，只要能根据草图大致知晓角色形象即可。这里我画了一个太空骑兵的形象。

步骤2

按Control-T 自由变换，高度60px左右

步骤3

放大到 300-400% 这样渲染起来方便，降低角色图层的透明度

创建新图层，用铅笔工具勾勒出轮廓

如果你创建的角色跟我这个一样，是对称的，那么完全可以勾勒一般，然后编辑>变换>水平翻转If your character is symmetrical, like mine is, just create one half, duplicate it, and flip it horizontally (Edit > Transform > Flip Horizontal).

线条的韵律感： 用简单的线条元素，如何勾勒出复杂的形状？如下图，当线条构成如下面1、2种形式时，人眼看起来更舒服一些。当然，还是要根据角色形状来画线。

1、2平滑 3较为粗糙

步骤4

当轮廓完成后，配色，然后给角色的各个区域上色。要新建一个图层用来上色。

步骤 5

为了让内侧视觉效果更平滑，避免突兀，需要添加点过渡色。

继续添加，你可能会注意到，在添加过程中，我顺便修改了一些细节。

步骤 6

创建新图层，添加高光

混合模式选择叠加。在想要添加高光的地方绘制一些亮色。然后滤镜>模糊>模糊，让高光区域更加平滑。

水平翻转，稍微添加细节，然后合并左半和右半图层

步骤7

对照感差了一点。使用图像>新建调整图层>色阶，调节参数如下，然后图像>新建调整图层>色彩平衡，调节如下。

调节出自己想要的色彩效果后，准备开始动效部分

400%大小的角色形象（编者注：我这里调出来的效果和他略有区别）

3. 让角色“动”起来

步骤1

复制角色图层，然后上移动1px,右移动2px，这是动起来的关键

然后原始图层不透明度设置为50%，这是“洋葱皮”手法

步骤 2

现在弯曲角色的腿，让效果看起来像是在移动

• 用套索工具选中左胳膊
• 使用自由变换工具，按住Control旋转胳膊（上下图比较一下）
• 然后选中右面的小腿下移一点——我们要让腿部看起来是伸展的
• 选中左面的小腿，上移动，让腿部看起来是弯曲的
• 利用铅笔工具和想橡皮擦工具，开始修正手臂和腿，让他们看起来更加自然。

 步骤 3

现在需要修一修，因为旋转会导致像素扭曲，看起来很不干净

步骤 4

复制一份变后的涂层，水平翻转，现在你有了3种状态，2个方向的迈步，一种战力状态，选择所有涂层，然后不透明度全设置为100% 

步骤 5

窗口>时间轴，创建帧动画 

在时间轴面板中，按一下步骤：

1. 帧延迟 0.15s
2. 点击3次复制所选帧
3. 循环次数改为永远

步骤 6

为每个动画帧选择正确地涂层，点击图层面板中得眼睛来隐藏和现实。

1. 第1帧：静止状态
2. 第2帧：抬起左脚
3. 第3帧：静止状态
4. 第4帧：抬起右脚

按空格播放动画 

100%大小的动画

编者做的，献丑了

步骤7

文件>保存为web所用格式，选择GIF,放大300%，然后保存。

恭喜！完成了！

本教程教你完成基本像素画创作，还学会利用时间轴创建简单动画，各位自己试一试吧！Pix

O