Dự án 4: Chân dung pixel art 64 × 64

Chân dung (portrait) là ô ảnh nhỏ hiện cạnh hộp thoại hoặc trong màn hình chọn nhân vật của game pixel. Ở 64 × 64 px, bạn có đủ chỗ cho mắt có mống mắt, tóc có lọn và một chút biểu cảm – nhưng mỗi pixel vẫn quan trọng. Bài này luyện ba kỹ năng cốt lõi của pixel art nhân vật: bảng màu giới hạn, viền 1 px sạch và dải màu 3 tông (tối – gốc – sáng) cho từng chất liệu.

Hình mẫu

Thời gian ước tính: khoảng 90 phút. Cả chân dung chỉ dùng 16 màu: 5 dải màu (da, tóc, áo, mắt, đỏ) × 3 tông + 1 màu viền. Người chơi luôn thấy nó ở cỡ 1× hoặc 2× – đừng chỉnh sửa khi đang phóng to 1600% mà quên nhìn cỡ thật.

Chuẩn bị

• Canvas: 64 × 64 px, Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Thiết lập pixel: EditChỉnh sửa›PreferencesTùy chọn cài đặt›GeneralChung › Image Interpolation: Nearest Neighbor (Điểm lân cận) (preserve hard edges). Bật ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh (lưới hiện khi phóng to trên 600%).
• Công cụ chính: Pencil (Bút chì) Tool (Shift+B để chuyển trong nhóm Brush (Cọ vẽ)) cỡ 1 px, Eraser (Tẩy) Tool chế độ Pencil, Paint Bucket (Thùng sơn) Tool (G) với Anti-alias (Khử răng cưa) tắt, Contiguous bật, Eyedropper (Ống hút màu) (I) hoặc giữ Alt khi đang dùng Pencil.
• Thiết bị: pixel art là nơi chuột thắng thế – mỗi cú bấm là một pixel chính xác. Bút Wacom, XP-Pen, Huion hay iPad vẫn dùng tốt nếu tắt hết lực nhấn (Shape Dynamics (Biến đổi hình dạng) và Transfer Off) để Pencil luôn là 1 px đặc; chạm nhẹ từng điểm thay vì kéo dài.
• File mẫu: "Khung gợi ý 64 × 64" đặt làm layer dưới cùng (khóa lại) cho biết vùng đầu, vai và tầm mắt y = 34. Bản phóng to ×8 dùng để in ra phác bằng bút chì nếu muốn.

Các bước

1. Tạo file và bảng màu: Ctrl+N 64 × 64 px, Transparent. Mở WindowCửa sổ›SwatchesBảng mẫu màu, tạo nhóm Portrait16 và thêm đủ 16 màu trong bảng. Chỉ được lấy màu từ nhóm này – không dùng Color Picker (Bảng chọn màu) tùy tiện.
2. Mở cửa sổ cỡ thật: WindowCửa sổ›Arrange›New Window for ... (tên file), đặt cửa sổ mới ở 100% hoặc 200% cạnh cửa sổ chính phóng to 800%. Mọi nét vẽ hiện ngay ở cả hai cửa sổ.
3. Khối bóng dáng (layer Sil): Pencil 1 px màu tóc gốc, vẽ khối tóc tròn lớn (rộng ~46 px), mặt elip (32 × 36 px) màu da, vai là nửa elip màu áo tràn đáy ảnh. Paint Bucket tô kín từng khối. Kiểm tra bóng dáng ở cỡ 1×: đầu phải chiếm khoảng 70% chiều cao.
4. Viền 1 px: layer Line trên Sil. Pencil màu #191624 đi viền quanh ngoài khối tóc, vai và dưới cằm. Quy tắc nét pixel: đường cong đi theo bậc thang đều (2-2-1-1 hoặc 3-2-1), không có "góc chữ L" thừa – xóa pixel thừa tạo góc vuông.
5. Mái tóc: vẽ mái răng cưa rủ xuống trán bằng các tam giác 4–6 px, để lộ khoảng trán ở giữa. Mái che một phần lông mày làm khuôn mặt có chiều sâu.
6. Mắt: mỗi mắt là khối 6 × 7 px: viền tối #1b1a24, mống mắt 4 × 4 px màu #3d6fd6, điểm sáng 2 × 2 px trắng ở góc trên – trái. Hai mắt cách nhau đúng một bề rộng mắt, nằm trên đường tầm mắt y = 34 của khung mẫu.
7. Mũi, miệng, má: mũi chỉ 2 pixel tông da tối; miệng là một dòng 6 px màu #9e2a3a; má là 3 pixel ngang màu #ff9a8a dưới mỗi mắt. Ít pixel hơn = mặt sạch hơn.
8. Tông tối: layer Shade (hoặc vẽ trực tiếp nếu bạn tự tin). Ánh sáng đến từ trên – trái: tô tông tối cho nửa phải khuôn mặt, dưới cằm (bóng đổ lên cổ), phía sau tóc bên phải và nếp gấp vai áo.
9. Tông sáng: vệt sáng trên tóc là 2 đoạn ngắn tông sáng #a14f7a theo đường cong đầu; má trái và trán có vài pixel #ffdcc4; mép trên vai áo một dòng #5fb8d9.
10. Khăn quàng đỏ: elip dẹt quanh cổ màu #e8423b, bóng tối ở nửa phải, một dòng sáng ngắn bên trái. Khăn tạo điểm nhấn màu ấm cạnh tóc và áo lạnh.
11. Dọn pixel: phóng to 1600%, tìm các pixel "mồ côi" (một pixel lạc màu giữa vùng khác màu) và các chỗ viền dày 2 px không cần thiết. Mỗi chỗ sửa đều kiểm tra lại ở cửa sổ 1×.
12. Đếm màu: FileTệp›Export›Save for Web (Legacy), chọn PNG-8, Colors 16 – nếu ảnh xem trước thay đổi, bạn đã dùng hơn 16 màu (thường do Brush mềm hoặc khử răng cưa vô tình). Sửa xong thì đóng hộp thoại.
13. Xuất cỡ thật: ẩn khung mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Size giữ 100% → portrait_lan.png đúng 64 × 64 px. Muốn bản lớn cho trang giới thiệu thì xuất thêm 400% (Resample (Lấy mẫu lại): Nearest Neighbor).
14. Đưa vào Unity 6: Inspector: Texture Type Sprite (2D and UI), Pixels Per Unit (Số pixel mỗi đơn vị) 64, Filter Mode (Chế độ lọc ảnh): Point (no filter), Compression: None. Dùng trong UI: Image của khung hội thoại, Set Native Size rồi Scale 2 hoặc 3 (số nguyên) để pixel không bị méo.

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

• Biểu cảm cho hộp thoại: nhân đôi file, chỉ sửa mắt và miệng để có thêm "cười" và "ngạc nhiên" – cùng khung 64 × 64, xếp thành sheet 192 × 64.
• Nháy mắt: vẽ thêm khung mắt nhắm (1 dòng pixel), trong Unity dùng Animation 2 khung: mở 3 giây, nhắm 0.1 giây.
• Đổi bảng màu: chỉ thay 3 màu tóc và 3 màu áo là có nhân vật "anh em" cho NPC khác.