Art Studio 教程：绘制你的第一个精灵
使用实心矩形、小型调色板和三个图层，制作一个友善的 32 × 32 机器人。你不需要绘图板，也不需要导入图像。下一章将把同一个机器人变成会眨眼的角色。
1. 创建一个小型项目
新建一个 Art Studio 项目，在 Start with 下选择 Graphic，将项目命名为 Glowbot，并将逻辑宽度和高度设为 32 × 32。这会打开绘图工作区。Retina 输出可以保持启用。它控制的是输出分辨率；你绘制时使用的画布仍然是逻辑像素网格。
使用 Fit 查看整个画布。需要辅助计数像素时，打开像素网格；如果还看不到网格线，就放大视图。在选项中为 Rectangle 选择像素渲染。我们将使用 Fill，而不是 Outline，并在较大的矩形上叠加较小的矩形。
以下颜色可作为起始调色板。在颜色选择器中输入十六进制值，或者凭感觉选择相近的颜色。
| 颜色 | 十六进制值 | 用途 |
|---|---|---|
| 深李子色 | #31243F | 剪影和脚 |
| 兰花紫 | #8D64BA | 身体 |
| 阴影李子色 | #65468F | 下沿和右沿 |
| 薰衣草紫 | #C5A5E9 | 高光 |
| 深青色 | #233D49 | 脸部外框和嘴巴 |
| 海绿色 | #4BAF9D | 脸部面板 |
| 薄荷绿 | #79F2BD | 天线和指示灯 |
| 浅薄荷色 | #E9FBF6 | 眼睛和亮光 |
2. 构建机身外壳
打开 Layers，并将第一个图层重命名为 Hull。选择 Rectangle（R）和 Fill。拖出一个深李子色矩形，作为宽大的头部/身体，四周各留出几个空像素。应用形状。再在上面横向添加第二个矩形，让左右边缘比顶部和底部伸得更远；这种阶梯状边角会形成圆润的像素剪影。
如果你想精确复现示例，以下坐标从零开始计数：(0, 0) 是左上角的像素。每个矩形的两个端点都包含在内。
- 深李子色：从
(8, 8)到(23, 25)，然后从(6, 10)到(25, 23)。 - 兰花紫：从
(8, 10)到(23, 23)，然后从(7, 12)到(24, 21)。 - 阴影李子色：从
(8, 22)到(23, 23)。 - 添加两只深李子色脚：一只从
(8, 26)到(12, 28)，另一只从(19, 26)到(23, 28)。在每只脚的顶部添加一小块兰花紫色。 - 在身体上方添加一根短天线。用深李子色绘制天线杆，再用薄荷绿绘制顶端。
每个形状都会显示 Apply/Cancel 预览。开始绘制下一个矩形前，请先选择 Apply。如果效果不对，使用 Undo 撤销后重新绘制。
不必担心每个像素都完全一致。清晰的剪影和统一的轮廓比精确坐标更重要。
3. 添加独立的脸部
选择 Layers → New Layer → Pixel Layer，并将新图层重命名为 Face。将脸部单独放在一个图层上，这样之后就可以让眼睛眨动，而不必重新绘制身体。
- 从
(8, 12)到(23, 20)绘制深青色脸部外框。 - 在外框内绘制海绿色面板，范围从
(10, 13)到(21, 19)。 - 添加两只浅薄荷色眼睛：一只从
(11, 14)到(13, 16)，另一只从(18, 14)到(20, 16)。 - 在
(14, 18)到(18, 18)之间绘制一条短短的深青色嘴巴。
也可以使用 Line 或 Pen 绘制一像素宽的线条，而不是使用细长的实心矩形。选择你觉得顺手的方式即可。
点按一次 Face 图层的眼睛按钮。身体应保持不变，而脸部图案会消失。再将其打开。这可以确认你正在编辑正确的图层。
4. 添加高光
创建第三个像素图层，并将其命名为 Highlights。沿着身体左上边缘的一部分添加一条薰衣草紫色线条，在右边缘添加一条较暗的线条，并在靠近底部的位置添加两盏小灯。保留部分轮廓可见。
高光像素不宜太多。如果每条边都同样明亮，身体就会失去立体感。在这个示例中，左上侧较亮，因此右侧和下侧边缘会显得更暗。
5. 检查并保存
使用 100%（⌘1）检查眼睛和剪影在精灵实际尺寸下是否仍然清晰，然后选择 Fit 返回绘图视图。关闭网格，检查最终作品的效果。
选择 File → Save Project。这样会保留图层和 Studio 中其他可编辑的内容。如果要将机器人放入游戏，请使用 File 将静态图像导出为游戏素材。保存项目和导出素材是两个独立步骤。
现在你已经有了一个可重复使用的基础角色。试着只更改身体配色、换一根形状不同的天线，或者为脸部添加表情。进行重大修改前，先用 Save As 保存一份可编辑副本。
下一步：用两帧动画让 Glowbot 眨眼。