跳到教程正文
lil cactus

如何制作像素画

入门10 分钟更新于

简要回答

在 Lil Cactus 中,从 16 × 16 px 的画布开始,在工具栏的画笔工具组中选择铅笔工具。把大小设为 1 px,不透明度设为 100%,然后在高缩放比例下绘制。要显示单像素网格,请选择更多 然后 首选项...,打开参考线、网格和切片,把间距设为 2 px、子网格数设为 2,然后启用视图 然后 显示 然后 网格。放大时使用图像 然后 图像大小...并选择邻近(硬边缘),按整数倍放大,例如从 16 px 放大到 512 px。

一个三色像素仙人掌从 16 × 16 像素放大到 512 × 512 像素,对比两次线性的柔和边缘和邻近(硬边缘)的清晰边缘
同一幅画放大到 512 × 512:两次线性(处理前)让边缘混在一起;邻近(硬边缘)(处理后)让像素块保持分明。 拖动滑块进行对比。
用时
10 分钟
难度
入门
准备工作
一块小画布和一只用来放置像素的鼠标
适用格式
新建的 RGB 图像和 PNG 精灵图
在 Lil Cactus 中打开示例使用你自己的照片

免费,无需注册。你的照片始终保存在你自己的电脑上。

像素画是在一张小图像上一格一格画出来的。这里的仙人掌用了三种绘画颜色和白色背景。铅笔工具画出的笔迹边缘是硬的;用邻近(硬边缘)放大会直接复制这些像素,不会在它们之间加入混合色。

七步绘制并放大像素仙人掌

  1. 打开 16 × 16 画布并添加绘画图层

    打开本页提供的空白示例。如果想自己新建画布,请选择文件 然后 新建...,把宽度和高度都设为 16,单位保持为像素。背景保持为白色。单击创建。

    选择图层 然后 新建 然后 新建图层。在“图层”面板中双击它的名称,输入 Cactus 并按 Enter。让 Cactus 保持选中,位于“背景”上方。

    新建文档设置:宽度 16,高度 16,像素,白色背景
    使用很小的画布:这些尺寸是图像像素,而不是放大后的视图。
    新建文档底部,创建按钮已圈出
    设置好尺寸后创建画布。
    图层面板:白色背景图层上方选中的 Cactus
    在 Cactus 上绘制;背景提供白色的底纸。
  2. 选择一种绿色,再把铅笔工具设为 1 px

    选择窗口 然后 颜色。在标为前景色的那一行的#字段中,把值替换为 4A8654。

    右键单击吸管工具下方的工具栏按钮,或按住它不放,然后选择铅笔工具。把大小设为 1 px。模式决定笔迹如何与已有像素混合,保持为正常。不透明度控制笔迹的浓淡,保持 100%。

    平滑用于稳定笔迹;放置这些格子时保持为 0。两个压力复选框都不要勾选,让大小和不透明度保持一致。也不要勾选自动抹除,这样在已有像素上绘制时仍会使用前景色。

    颜色面板:前景色那一行已圈出的 # 字段中是绿色 4A8654
    在 # 字段中输入这种绿色。
    工具栏中的画笔工具组,组按钮和铅笔工具选项已圈出,旁边是相邻的工具
    铅笔工具和画笔工具共用一个工具栏按钮;放大视图。
    铅笔工具选项,大小控件已圈出,设为 1 px
    1 像素的铅笔笔迹只填充单个源像素格。
    铅笔工具选项:模式为正常,不透明度 100%,平滑 0%
    保持正常、不透明度 100% 和平滑 0%。
    铅笔工具的压力控制大小、压力控制不透明度和自动抹除三个复选框均未勾选
    绘制这幅画时,这三个复选框都保持关闭。
  3. 显示单像素网格

    选择更多 然后 首选项...,然后选择参考线、网格和切片。网格间距(文档 px)设置主网格线之间的距离,设为 2。每个主网格的子网格数把这段距离再细分,设为 2。单击关闭。

    选择视图 然后 显示 然后 网格,然后选择视图 然后 按屏幕大小缩放。现在,浅色的线把每个像素分隔开,每两个像素有一条较粗的线。左上角的白色格子是第 1 列、第 1 行。列从左往右数,行从上往下数。

    更多菜单,首选项已圈出
    从“更多”打开首选项。
    首选项的各个部分,参考线、网格和切片已圈出
    在首选项中选择“参考线、网格和切片”。
    参考线和网格设置:已圈出的网格间距 2 和子网格数 2,以及关闭按钮
    2 px 间距再分成 2 份,就得到单像素网格。
    视图菜单及其显示子菜单,网格已圈出
    打开“视图 › 显示 › 网格”。
    缩放到 3200% 的空白 16 × 16 白色画布,带有单像素网格格子
    缩放到 3200% 的示例。每个小格子就是一个图像像素。
  4. 画出主干和侧枝

    让 Cactus 保持选中,前景色保持绿色。拖动时经过各个格子的中心。下面每一条线都单独画一笔:

    • 主干:在第 8、9、10 列各画一条竖线,都从第 3 行画到第 10 行。
    • 左侧枝:在第 6 行和第 7 行各画一条横线,跨第 5–7 列。再在第 5 列的第 4–5 行加上向上翘起的末端。
    • 右侧枝:在第 7 行和第 8 行各画一条横线,跨第 11–13 列。再在第 13 列的第 5–6 行加上向上翘起的末端。
    单像素网格中的绿色仙人掌主干和两条上扬的侧枝,尚未画花盆和高光
    绿色剪影,每个画过的格子在网格中仍清晰可见。
  5. 添加花盆和浅色像素

    在颜色面板的#字段中输入 B66B4B 作为花盆颜色。在第 11 行画第 6–12 列,在第 12 行和第 13 行画第 7–11 列,再在第 14 行画第 8–10 列。

    把#的值改为 A0C78D。在第 8 列的第 4–9 行加一条浅色竖条。在第 5 列的第 5–6 行加两个浅色格子,在第 11 列第 7 行加一个。可以用第 3 步中的完整网格来数它们的位置。

    单击 Cactus 的眼睛按钮将其隐藏,与空白的“背景”对比,然后再次显示它。

    完成后的像素仙人掌的近景网格视图:绿色侧枝、浅绿色笔迹和赤陶色花盆
    完成的植物,裁剪得更近,便于看清每个格子。
    图层面板:Cactus 位于背景上方,两个眼睛按钮都已圈出
    Cactus 存放绘画内容,背景控制后面的白色。
  6. 先存储小尺寸原稿,再放大

    在画布仍为 16 × 16 时,选择文件 然后 存储为 然后 Lil Cactus 项目...。这样会以画作的原始尺寸保留两个可编辑的图层。

    选择图像 然后 图像大小...。单位保持为像素,链条按钮保持链接,重新采样保持开启。重新采样会改变像素的数量。把宽度设为 512,高度会随之变为 512。在重新采样菜单中选择邻近(硬边缘),然后单击调整大小。

    这是 32 倍放大:每个原始像素都会变成一个 32 × 32 的方块。

    图像大小:尺寸已链接,从 16 × 16 改为 512 × 512,重新采样已开启,选中了邻近(硬边缘)
    单击“调整大小”之前先选择“邻近(硬边缘)”。
  7. 导出 PNG,然后恢复到绘画尺寸

    选择文件 然后 导出 然后 PNG…,然后单击导出。新文件为 512 × 512 px。选择编辑 然后 还原回到 16 × 16 的画作,以便下次继续编辑。

    现在,文件 然后 存储会更新这个项目。

为什么“邻近(硬边缘)”能保持调色板

图像大小打开时默认选中两次线性。在这样的放大倍数下,它会让边缘的颜色混在一起。邻近(硬边缘)则会保留画作的三种绘画颜色和白色背景。

放大的仙人掌边缘细节:邻近(硬边缘)生成的颜色均匀的方块
邻近(硬边缘):实心像素块,放大显示。
同一处仙人掌边缘用两次线性放大,方块之间有过渡色混合
两次线性:同一幅画的边缘颜色混在一起。

接下来可以做什么

像素画常见问题

画像素画和把照片像素化是一回事吗?

不是。在 Lil Cactus 中,这种方法是逐个放置彩色格子来绘制精灵图。而“滤镜 › 像素化 › 像素化...”是把现有图像的像素合并成更大的方块。

像素画可以使用透明背景吗?

可以。在 Lil Cactus 中,用第 5 步中介绍的眼睛按钮隐藏“背景”,然后选择“文件 › 导出 › PNG…”。Cactus 图层仍然可见,只是去掉了白色底纸。

像素画应该存储为 PNG 还是 JPEG?

在 Lil Cactus 中请使用 PNG,以保留调色板并支持透明。JPEG 可能会在锐利的边缘周围引入额外的颜色,而且无法保留透明。

为什么看不到单像素网格?

在 Lil Cactus 中,按本方法设置的细网格线只在缩放比例为 800% 或更高时显示。除了“视图 › 显示 › 网格”,还必须开启“视图 › 额外内容”。网格间距跟随当前浏览器的首选项,因此在另一个浏览器中网格可能不同。网格只是编辑器中的叠加显示,不会出现在导出的 PNG 中。

可以撤销一笔铅笔笔迹吗?

可以。在 Lil Cactus 中,“编辑 › 还原”会把最后一次铅笔拖动或单击作为一个历史记录步骤撤销。“编辑 › 重做”可以恢复它。

可以按非整数倍数放大像素画吗?

可以,但在 Lil Cactus 中按整数倍放大才能得到均匀的方块。按非整数倍放大时,即使使用“邻近(硬边缘)”,一些原始像素也可能比其他像素更宽。