Art Studio 教學：繪製你的第一個精靈屬性
使用實心矩形、小型調色盤和三個圖層，製作一個親切的 32 × 32 機器人。你不需要繪圖板，也不必匯入圖片。下一章會將同一個機器人變成會眨眼的角色。
1. 建立小型專案
建立新的 Art Studio 專案，在 Start with 下方選擇 Graphic，將專案命名為 Glowbot，並將邏輯寬度和高度設為 32 × 32。這會開啟 Drawing 工作區。Retina 輸出可以保持啟用；它控制的是輸出解析度，而你繪圖時使用的畫布仍是邏輯像素網格。
使用 Fit 查看整個畫布。需要幫助計算像素時，請開啟像素網格；如果還看不到網格線，請放大檢視。在選項中，為 Rectangle 選擇像素繪製方式。我們會使用 Fill，而不是 Outline，並將較小的矩形疊在較大的矩形上。
以下顏色可作為起始調色盤。在色彩選擇器中輸入十六進位值，或憑感覺選擇相近的顏色。
| 顏色 | Hex | 用途 |
|---|---|---|
| 深李紫 | #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 眨眼。