我的情感、生活。快乐你可以带走，忧愁你可以留下！

使用PS绘制像素画的正确姿势

· 前端 · 4253 字 · 约 9 分钟 ·kench7260
# 设计
目录
<p>本文首发于前端西瓜哥的个人博客：<a rel="noreferrer noopener" href="https://links.jianshu.com/go?to=https%3A%2F%2Fblog.fstars.wang%2Fposts%2Fhow-to-draw-pixi-work-by-ps%2F" target="_blank">https://blog.fstars.wang/posts/how-to-draw-pixi-work-by-ps/</a></p>
<ul>
  • 本文旨在引导没有其他绘制像素画工具的同学们解决使用 ps 绘制像素画时，遇到的一些 设置问题 。
  • 本教程操作的环境：WIN7、Photoshop CS6
  • 如果是需要一个专业像素画绘制软件，推荐 Aseprite，steam 有售

一些有使用Photoshop经验的同学，突然脑子一热想用这款软件绘制像素画，却发现画的像素有透明度、边缘默认会变成柔边缘（放大后有透明度）、放大图片发现边缘也是半透明的。没错，本文就是教你们使用PS绘制像素画的正确姿势。只要跟着该教程一步一步来，基本上是没有问题的。

本文默认读者会使用 PS 的最基本操作，不会太多叙述 PS 的基础操作方法。

如果还遇到了本文没有提到的问题，可以给我留言，大家一起解决。

<h4 id="目录"><a href="https://blog.fstars.wang/posts/how-to-draw-pixi-work-by-ps/#%E7%9B%AE%E5%BD%95"></a>目录</h4>
<ol>
  • 准备工作
  • 画出像素块
  • 像素橡皮擦
  • 实时查看预览图
  • 放大像素画
  • 画水平线和垂直线
  • 画直线（斜线）
  • 绘制硬边几何图形
  • 硬边缘字体
  • 制作gif动图
  • 写在结尾的话
</ol>
<h4 id="1-准备工作"><a href="https://blog.fstars.wang/posts/how-to-draw-pixi-work-by-ps/#1-%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C"></a>1. 准备工作</h4>

新建一个40*40的文件，新建一个图层，我们的图就画到这个图层上。然后将画布放大到尽可能大。

<h4 id="2-画出像素块"><a href="https://blog.fstars.wang/posts/how-to-draw-pixi-work-by-ps/#2-%E7%94%BB%E5%87%BA%E5%83%8F%E7%B4%A0%E5%9D%97"></a>2. 画出像素块</h4>
<figure class="wp-block-image"><a href="https://static.fstars.wang/1601965840-%E9%80%89%E6%8B%A9%E9%93%85%E7%AC%94%E5%B7%A5%E5%85%B7.gif"><img src="https://static.fstars.wang/1601965840-%E9%80%89%E6%8B%A9%E9%93%85%E7%AC%94%E5%B7%A5%E5%85%B7.gif" alt="选择铅笔工具"/></a></figure>
<p><a href="https://static.fstars.wang/1601965840-%E9%80%89%E6%8B%A9%E9%93%85%E7%AC%94%E5%B7%A5%E5%85%B7.gif">选择铅笔工具</a></p>

在最左边的工具栏中找到 画笔工具，右键它后出现菜单，选择其中的 铅笔工具。将铅笔大小设置为1，我使用的是快捷键 [ 来修改铅笔大小。然后你 就可以在上面绘制像素了。

细心的同学可能会问了，为什么相邻的两个像素之间有条灰色的线呢？其实这是 PS 为了让用户能够分辨出最小像素，而默认设置了 显示额外内容。在顶部的 视图 中将 显示额外内容 的勾选去掉即可不显示灰线。快捷键是 Ctrl + H。

<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966435-%E5%8F%96%E6%B6%88%E6%98%BE%E7%A4%BA%E9%A2%9D%E5%A4%96%E5%86%85%E5%AE%B9.gif"><img src="https://static.fstars.wang/1601966435-%E5%8F%96%E6%B6%88%E6%98%BE%E7%A4%BA%E9%A2%9D%E5%A4%96%E5%86%85%E5%AE%B9.gif" alt="1601966435-取消显示额外内容.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966435-%E5%8F%96%E6%B6%88%E6%98%BE%E7%A4%BA%E9%A2%9D%E5%A4%96%E5%86%85%E5%AE%B9.gif">1601966435-取消显示额外内容.gif</a></p>
<h4 id="3-像素橡皮擦"><a href="https://blog.fstars.wang/posts/how-to-draw-pixi-work-by-ps/#3-%E5%83%8F%E7%B4%A0%E6%A9%A1%E7%9A%AE%E6%93%A6"></a>3. 像素橡皮擦</h4>
<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966522-%E5%83%8F%E7%B4%A0%E6%A9%A1%E7%9A%AE%E6%93%A6.gif"><img src="https://static.fstars.wang/1601966522-%E5%83%8F%E7%B4%A0%E6%A9%A1%E7%9A%AE%E6%93%A6.gif" alt="1601966522-像素橡皮擦.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966522-%E5%83%8F%E7%B4%A0%E6%A9%A1%E7%9A%AE%E6%93%A6.gif">1601966522-像素橡皮擦.gif</a></p>

工具栏 中选择 橡皮擦，在 选项栏 中将 模式 修改为 铅笔，然后就可以用橡皮擦擦出不带透明度的边缘了。

其实设置好了这两个其实就可以开始画像素画了，后面的内容都是一些非常实用小技巧，可以选择性阅读。

4. 实时查看预览图

当我们放大画布抠一幅像素画的细节时，不时地要缩小画布来查看整体效果，非常麻烦，这时候我们就可以使用下面的方法了。

<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966545-%E5%88%9B%E5%BB%BA%E9%A2%84%E8%A7%88%E7%AA%97%E5%8F%A3.gif"><img src="https://static.fstars.wang/1601966545-%E5%88%9B%E5%BB%BA%E9%A2%84%E8%A7%88%E7%AA%97%E5%8F%A3.gif" alt="1601966545-创建预览窗口.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966545-%E5%88%9B%E5%BB%BA%E9%A2%84%E8%A7%88%E7%AA%97%E5%8F%A3.gif">1601966545-创建预览窗口.gif</a></p>

窗口 > 排列 > 为 "XXX" 新建窗口 ，把新建的窗口放到右上角就可以实时查看像素画的整体效果了。

5. 放大像素画

你是不是对用 ps 放大像素画出现的可怕柔边效果感到绝望？像下面这样：

<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966617-%E9%94%99%E8%AF%AF%E6%94%BE%E5%A4%A7.gif"><img src="https://static.fstars.wang/1601966617-%E9%94%99%E8%AF%AF%E6%94%BE%E5%A4%A7.gif" alt="1601966617-错误放大.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966617-%E9%94%99%E8%AF%AF%E6%94%BE%E5%A4%A7.gif">1601966617-错误放大.gif</a></p>

如果要保持放大或缩小的像素画仍然保持硬边缘，需要设置两个东西
将 编辑 > 首选项 > 常规 中的 插值方式 改为 “邻近（靠近硬边缘）”

<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966641-%E4%BF%AE%E6%94%B9%E5%9B%BE%E5%83%8F%E5%B7%AE%E5%80%BC%E6%96%B9%E5%BC%8F.gif"><img src="https://static.fstars.wang/1601966641-%E4%BF%AE%E6%94%B9%E5%9B%BE%E5%83%8F%E5%B7%AE%E5%80%BC%E6%96%B9%E5%BC%8F.gif" alt="1601966641-修改图像差值方式.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966641-%E4%BF%AE%E6%94%B9%E5%9B%BE%E5%83%8F%E5%B7%AE%E5%80%BC%E6%96%B9%E5%BC%8F.gif">1601966641-修改图像差值方式.gif</a></p>

将要缩放的图层转换为 智能对象

<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966675-%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%99%BA%E8%83%BD%E5%AF%B9%E8%B1%A1.gif"><img src="https://static.fstars.wang/1601966675-%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%99%BA%E8%83%BD%E5%AF%B9%E8%B1%A1.gif" alt="1601966675-转换为智能对象.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966675-%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%99%BA%E8%83%BD%E5%AF%B9%E8%B1%A1.gif">1601966675-转换为智能对象.gif</a></p>

做好这些操作后，就可以缩放像素画了，另外最好缩放为原尺寸的整数倍，否则会有一些像素丢失。如果你还要编辑像素画，可以将图层进行 栅格化，然后就可以修改像素画了。

6. 画水平线和垂直线

这个简单，长按 Shift 键，然后用铅笔画就可以画出水平线和垂直线。

7. 画直线（斜线）

先点击鼠标左键画一个像素点，然后按住 Shift 键，然后再在终点单击鼠标左键，就画出直线了。

如果你想画一个45度的直线，可以通过矩形选框来辅助绘制。首先我们长按 Shift 键创建一个正方形的选择框，然后在对角上使用画直线的技巧即可：

<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966704-%E9%85%8D%E5%90%88%E9%80%89%E6%8B%A9%E6%A1%86%E7%BB%98%E5%88%B645%E5%BA%A6%E7%9B%B4%E7%BA%BF.gif"><img src="https://static.fstars.wang/1601966704-%E9%85%8D%E5%90%88%E9%80%89%E6%8B%A9%E6%A1%86%E7%BB%98%E5%88%B645%E5%BA%A6%E7%9B%B4%E7%BA%BF.gif" alt="1601966704-配合选择框绘制45度直线.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966704-%E9%85%8D%E5%90%88%E9%80%89%E6%8B%A9%E6%A1%86%E7%BB%98%E5%88%B645%E5%BA%A6%E7%9B%B4%E7%BA%BF.gif">1601966704-配合选择框绘制45度直线.gif</a></p>
<h4 id="8-绘制硬边几何图形"><a href="https://blog.fstars.wang/posts/how-to-draw-pixi-work-by-ps/#8-%E7%BB%98%E5%88%B6%E7%A1%AC%E8%BE%B9%E5%87%A0%E4%BD%95%E5%9B%BE%E5%BD%A2"></a>8. 绘制硬边几何图形</h4>
<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966720-%E7%94%BB%E7%A1%AC%E8%BE%B9%E5%87%A0%E4%BD%95%E5%9B%BE%E5%BD%A2.gif"><img src="https://static.fstars.wang/1601966720-%E7%94%BB%E7%A1%AC%E8%BE%B9%E5%87%A0%E4%BD%95%E5%9B%BE%E5%BD%A2.gif" alt="1601966720-画硬边几何图形.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966720-%E7%94%BB%E7%A1%AC%E8%BE%B9%E5%87%A0%E4%BD%95%E5%9B%BE%E5%BD%A2.gif">1601966720-画硬边几何图形.gif</a></p>
<h4 id="9-硬边缘字体"><a href="https://blog.fstars.wang/posts/how-to-draw-pixi-work-by-ps/#9-%E7%A1%AC%E8%BE%B9%E7%BC%98%E5%AD%97%E4%BD%93"></a>9. 硬边缘字体</h4>
<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966819-%E7%A1%AC%E8%BE%B9%E7%BC%98%E5%AD%97%E4%BD%93.gif"><img src="https://static.fstars.wang/1601966819-%E7%A1%AC%E8%BE%B9%E7%BC%98%E5%AD%97%E4%BD%93.gif" alt="1601966819-硬边缘字体.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966819-%E7%A1%AC%E8%BE%B9%E7%BC%98%E5%AD%97%E4%BD%93.gif">1601966819-硬边缘字体.gif</a></p>
<h4 id="10-制作gif动图"><a href="https://blog.fstars.wang/posts/how-to-draw-pixi-work-by-ps/#10-%E5%88%B6%E4%BD%9Cgif%E5%8A%A8%E5%9B%BE"></a>10. 制作gif动图</h4>

首先在最顶端的 窗口 中调出 时间轴 窗口，然后跟着下面动图进行操作：

<figure class="wp-block-image"><a href="https://static.fstars.wang/1601966861-%E5%88%B6%E4%BD%9Cgif%E5%8A%A8%E5%9B%BE.gif"><img src="https://static.fstars.wang/1601966861-%E5%88%B6%E4%BD%9Cgif%E5%8A%A8%E5%9B%BE.gif" alt="1601966861-制作gif动图.gif"/></a></figure>
<p><a href="https://static.fstars.wang/1601966861-%E5%88%B6%E4%BD%9Cgif%E5%8A%A8%E5%9B%BE.gif">1601966861-制作gif动图.gif</a></p>

然后我们要保存为gif图片，快捷键为：Alt + Shift + Ctrl + s：

<figure class="wp-block-image"><a href="https://static.fstars.wang/1601964697-%E4%BF%9D%E5%AD%98gif%E6%96%B9%E5%BC%8F.gif"><img src="https://static.fstars.wang/1601964697-%E4%BF%9D%E5%AD%98gif%E6%96%B9%E5%BC%8F.gif" alt="image"/></a></figure>
<p><a href="https://static.fstars.wang/1601964697-%E4%BF%9D%E5%AD%98gif%E6%96%B9%E5%BC%8F.gif">image</a></p>
<h4 id="11-写在结尾的话"><a href="https://blog.fstars.wang/posts/how-to-draw-pixi-work-by-ps/#11-%E5%86%99%E5%9C%A8%E7%BB%93%E5%B0%BE%E7%9A%84%E8%AF%9D"></a>11. 写在结尾的话</h4>

学会了的话，大家就开始地愉快地使用 ps 画像素画吧！