Dự án 1: Bộ 6 icon trái cây pixel 16 × 16

Game nông trại, game xếp hình hay game nhập vai đều cần hàng chục icon vật phẩm nhỏ. Ở kích thước 16 × 16 px mỗi điểm ảnh (pixel) đều quan trọng: một pixel sai là quả táo méo. Dự án này dạy bạn quy trình pixel art chuẩn: đặt từng pixel bằng Pencil (Bút chì) Tool (bút chì – vẽ pixel cứng, không mờ mép), giới hạn số màu và giữ 6 icon cùng một phong cách.

Hình mẫu

Thời gian ước tính: khoảng 60 phút (mỗi icon 8–10 phút). Ánh sáng chiếu từ trên – trái cho cả 6 icon – đây là điều kiện đầu tiên để một bộ icon trông "cùng nhà".

Chuẩn bị

• Canvas (khung vẽ): 96 × 16 px (6 ô, mỗi ô 16 × 16), Resolution (Độ phân giải) 72, Color Mode RGB Color, Background Contents: Transparent (trong suốt).
• Công cụ chính: Pencil Tool (bút chì – nhấn ⇧ Shift+B vài lần tới khi biểu tượng Brush (Cọ vẽ) đổi thành Pencil) cỡ 1 px; Eraser (Tẩy) Tool (E) với Mode: Pencil; Paint Bucket (Thùng sơn) (G) với Tolerance 0 và bỏ chọn Anti-alias (Khử răng cưa); Eyedropper (Ống hút màu) (I).
• Cài đặt phóng to không mờ: Photoshop›SettingsCài đặt›GeneralChung, mục Image Interpolation chọn Nearest Neighbor (Điểm lân cận) (preserve hard edges).
• Thiết bị: pixel art không cần lực nhấn – chuột làm tốt không kém bút XP-Pen, Huion hay iPad. Nếu dùng bút, tắt Pen Pressure (Lực nhấn bút) để mỗi lần chạm chỉ ra đúng 1 pixel.
• File mẫu: "Lưới dải 6 ô" ở cuối bài giúp bạn thấy ranh giới 6 ô ngay trên file.

Các bước

1. Tạo file: FileTệp›NewTạo mới (⌘ Cmd+N), Width 96, Height 16 Pixels, Resolution 72, Background Contents: Transparent, bấm Create. Phóng to 800% bằng ⌘ Cmd++ nhiều lần (hoặc gõ 800 vào ô phần trăm ở góc dưới – trái cửa sổ).
2. Bật lưới: Photoshop›SettingsCài đặt›Guides, Grid & Slices: Gridline Every 16 Pixels, Subdivisions 16. Bật ViewHiển thị›ShowHiện›GridLưới – đường đậm là ranh giới ô 16 px, đường mảnh là từng pixel. Tắt lưới khi muốn nhìn tổng thể.
3. Nạp bảng màu: mở WindowCửa sổ›SwatchesBảng mẫu màu. Mở file "Bảng màu tất cả dự án game", dùng Eyedropper I lấy từng màu của dự án 1 rồi bấm nút Create new swatch (dấu +). Đặt tên nhóm là Trai cay 16. Từ giờ chỉ dùng 14 màu này.
4. Layer Sil (bóng dáng): ⌘ Cmd+⇧ Shift+N tạo layer Sil. Chọn Pencil 1 px, màu xanh #31a8ff, tô kín khối của từng quả trong ô của nó: táo tròn hơi dẹt, chuối cong hình trăng khuyết, nho là chùm 6 hạt, dưa hấu nửa hình tròn, cam tròn, dâu hình giọt nước ngược. Chừa ít nhất 1 px trống quanh mép mỗi ô để các icon không dính vào nhau.
5. Kiểm tra bóng dáng: thu về 100% (⌘ Cmd+1). Nếu chỉ nhìn khối xanh mà vẫn đoán đúng 6 loại quả, bạn có thể đi tiếp; nếu không, sửa hình khối ngay bây giờ – sửa sau khi tô màu tốn gấp 3 lần thời gian.
6. Layer Line (viền 1 px): layer mới Line, màu #1b1a24. Vẽ viền chạy theo mép khối xanh. Đường cong dùng các bậc đều nhau: 3-2-1-1-2-3 pixel, không nhảy lung tung kiểu 3-1-2. Xóa các "góc chữ L" thừa (hai pixel viền chạm nhau ở góc tạo thành viền dày 2 px). Xong thì ẩn layer Sil.
7. Layer Flat (màu nền): tạo layer Flat kéo xuống dưới Line. Chọn Paint Bucket G: Tolerance 0, bỏ Anti-alias, chọn All Layers trên thanh Options. Bấm vào bên trong mỗi quả với màu nền của nó (đỏ, vàng, tím, cam…). Viền phải khép kín, nếu không màu sẽ tràn ra cả ô.
8. Layer Shadow (bóng): layer mới trên Flat, nhấn ⌘ Cmd+⌥ Option+G để kẹp (Clipping Mask (Mặt nạ cắt)) vào Flat. Dùng Pencil vẽ dải bóng hình lưỡi liềm 1–2 px ở phía dưới – phải mỗi quả bằng màu tối cùng dãy: đỏ → #a3243b, vàng → #d49a1f, cam → #c9611f, tím → #5b2a86.
9. Layer Light (sáng): layer mới, Clipping Mask. Chấm 2–4 pixel màu sáng ở phía trên – trái (đỏ → #ff8c8c, cam → #ffd23f) và đúng 1 pixel #fff4e0 làm điểm lóe. Một điểm lóe giống nhau ở cùng vị trí trên mọi quả giúp bộ icon đồng bộ.
10. Chi tiết 1 pixel: trên layer Details: cuống nâu #7a4a2b, lá xanh 2 tông, hạt dâu vàng, hạt dưa đen, 2–3 chấm cam tối cho vỏ cam sần. Không có chi tiết nào nhỏ hơn 1 pixel – nếu muốn "nhỏ hơn", hãy bỏ nó đi.
11. Kiểm tra số màu: ImageHình ảnh›DuplicateNhân bản tạo bản sao, trên bản sao chọn ImageHình ảnh›ModeChế độ (màu)›Indexed Color (bấm OK nếu được hỏi gộp layer). Ô Palette hiện Exact và ô Colors cho biết số màu thật – phải ≤ 16. Bấm Cancel và đóng bản sao, không lưu.
12. Xem kích thước thật: mở WindowCửa sổ›Arrange › New Window for … để có cửa sổ thứ hai của cùng file, đặt nó ở 100% hoặc 200%. Vẽ ở cửa sổ 800%, nhìn kết quả ngay ở cửa sổ nhỏ.
13. Xuất PNG: ẩn layer lưới mẫu (nếu có), FileTệp›Export›Export AsXuất ra (tùy chỉnh) (⌥ Option+⇧ Shift+⌘ Cmd+W), Format PNG, Scale 100%, bật Transparency (Độ trong suốt) → fruits_16.png đúng 96 × 16 px. Muốn khoe lên mạng: bản sao ImageHình ảnh›Image SizeKích thước ảnh 800%, Resample (Lấy mẫu lại) Nearest Neighbor (hard edges).
14. Đưa vào Unity 6: kéo PNG vào cửa sổ Project. Ở Inspector: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 16, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None, bấm Apply. Mở Sprite Editor › Slice › Type Grid By Cell Size, Pixel Size 16 × 16 › Slice › Apply – bạn có 6 sprite fruits_16_0 … fruits_16_5.

Nâng cao (tùy chọn)

• Viền chọn lọc (selective outline): thay pixel viền ở phía được chiếu sáng bằng màu tối của chính quả đó (đỏ tối thay cho đen) – icon mềm mại và "đắt" hơn.
• Hiệu ứng lấp lánh 2 frame: làm thêm một dải 96 × 16 thứ hai với điểm lóe dời 1 pixel và 1 ngôi sao 3 × 3 px – dùng khi vật phẩm rơi trên đất.
• Phiên bản 32 × 32: vẽ lại quả táo ở 32 × 32 (không phóng to bản 16) để thấy có thêm "chỗ" cho 3 tông bóng và vân lá.