Dự án 7: NPC thương nhân – từ concept tới màu

NPC (non-player character – nhân vật do máy điều khiển) như ông bán hàng, bà thợ rèn là "linh hồn" của làng trong game. Người chơi phải đoán được nghề của họ trước khi đọc tên. Dự án này là bài concept art thật sự: bạn không vẽ ngay bản đẹp mà đi từ bóng dáng → lựa chọn → bản hoàn thiện có màu.

Hình mẫu

Thời gian ước tính: khoảng 3 giờ: 40 phút bóng dáng và chọn phương án, 1 giờ nét, 1 giờ 20 phút màu và đạo cụ.

Chuẩn bị

• Canvas: 2400 × 1600 px (tỉ lệ 3 : 2), RGB Color. Nửa trái để 3 bóng dáng, nửa phải để bản màu hoàn thiện.
• Bản mô tả (brief): "Ông thương nhân lang thang, thân thiện nhưng hơi tham, đi khắp nơi bán bình thuốc và đồ lặt vặt." Mọi quyết định thiết kế phải trả lời được câu: nó có kể điều này không?
• Brush (Cọ vẽ): Hard Round cho bóng dáng và nét; bật lực nhấn ở F5 › Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút).
• Thiết bị: nét viền dày mỏng cần lực nhấn. Wacom/XP-Pen/Huion: nếu nét không thay đổi độ dày, mở driver bật Windows Ink (Windows Ink (bút Windows)) (Windows) hoặc cấp quyền Accessibility cho driver (macOS). Chuột: Smoothing (Làm mượt nét) 40%, vẽ nét dài bằng Pen Tool (Bút tạo đường) rồi Stroke Path có Simulate Pressure. iPad (Sidecar/Astropad): Apple Pencil (Bút chì) dùng như bút thường.
• File mẫu: "Nét mẫu NPC" nếu muốn luyện phần màu mà chưa tự tin phần dựng hình.

Các bước

1. Tạo file 2400 × 1600 px. ViewHiển thị›GuidesĐường gióng›New Guide Layout: Columns 2, Gutter 40 px – cột trái cho concept, cột phải cho bản màu.
2. Ngôn ngữ hình khối: hình tròn gợi thân thiện, hình vuông gợi chắc chắn, hình nhọn gợi nguy hiểm. Thương nhân thân thiện nên thân tròn, bụng to; chút "tham" thể hiện qua túi tiền phình và nụ cười híp mắt.
3. Ba bóng dáng: ở cột trái, layer Sil A/B/C: dùng Lasso (Dây thòng lọng) L vẽ hình rồi ⌥ Option+⌫ Delete tô đen, mỗi bóng cao khoảng 600 px. A: dáng gầy cao, mũ nhọn. B: dáng tròn, mũ rộng vành, ba lô to. C: dáng vuông, xe đẩy hàng. Không vẽ chi tiết bên trong – chỉ đường bao.
4. Chọn phương án: thu nhỏ màn hình còn 25%. Bóng nào vẫn đọc ra "người bán hàng" ở cỡ nhỏ nhất thì chọn – trong hình mẫu là B nhờ ba lô và vành mũ. Khoanh tròn phương án được chọn bằng một nét xanh.
5. Phác trên bóng dáng: nhân đôi bóng B sang cột phải, phóng to lên khoảng 1100 px cao (⌘ Cmd+T), hạ Opacity (Độ mờ đục) 20%. Layer Sketch màu xanh: đầu tròn to (tỉ lệ khoảng 3 đầu), ria mép cong, mũi tròn, tay phải giơ bình thuốc, ba lô sau lưng có cuộn chăn và chảo.
6. Nét viền: layer Line, Hard Round 10 px có lực nhấn, màu #1b1a24. Nét ngoài cùng dày hơn nét chi tiết bên trong – giúp nhân vật tách khỏi nền. Xoay canvas bằng R để nét cong luôn thuận tay.
7. Màu phẳng theo 60-30-10: layer Flat dưới Line: 60% diện tích là màu chủ đạo (áo xanh), 30% màu phụ (ba lô nâu, da), 10% màu nhấn (mũ tím, chi tiết vàng). Tô bằng Magic Wand (Đũa thần) + Expand 2 px + ⌥ Option+⌫ Delete như các dự án trước; mỗi vùng màu một layer con hoặc dùng chung layer Flat.
8. Đổ bóng: layer Shadow kẹp vào Flat, blend mode Normal, dùng đúng mã bóng trong bảng. Ánh sáng từ trên – trái: bóng ở phía phải thân, dưới vành mũ (vành mũ đổ bóng lên trán và mắt), dưới ria mép.
9. Ánh sáng: layer Light kẹp vào: vệt sáng ở chóp mũ, gò má, mép trái áo choàng; điểm sáng trắng trên bình thuốc và túi xu. Thêm rim light #7fd1a8 mảnh ở mép trái áo.
10. Đạo cụ kể chuyện: layer Props: bình thuốc đỏ phát sáng, túi xu vàng lủng lẳng bên hông, 2 đồng xu rơi gần chân, chảo gang treo ba lô. Mỗi đạo cụ trả lời câu hỏi "ông ấy bán gì, đi đâu, có nhiều tiền không?".
11. Kiểm tra bóng dáng lần cuối: giữ ⌘ Cmd và bấm vào thumbnail layer Flat (thêm ⌘ Cmd+⇧ Shift để cộng các layer khác) để chọn toàn hình, tạo layer mới tô đen. Bóng đen của bản màu phải vẫn đọc được như bóng B ban đầu. Xóa layer kiểm tra.
12. Trình bày concept: thêm tên nhân vật, 3–4 ghi chú ngắn bằng Type Tool (T) với mũi tên (ví dụ "túi xu phình = tham tiền"), và dải bảng màu nhỏ phía dưới. Đây là cách concept artist trình bày cho cả nhóm.
13. Xuất: lưu PSD. Xuất npc_merchant_sheet.png cả bảng concept, và một bản chỉ nhân vật: ẩn nền và ghi chú, ImageHình ảnh›TrimCắt bỏ viền thừa (Based on: Transparent Pixels), rồi Export As (Xuất ra (tùy chỉnh)) PNG cao khoảng 1024 px.
14. Đưa vào Unity 6: bản nhân vật dùng làm chân dung hộp thoại (UI Image, Texture Type Sprite (2D and UI), Filter Mode (Chế độ lọc ảnh) Bilinear) hoặc thu nhỏ còn 256 px làm sprite đứng trong làng, Pixels Per Unit (Số pixel mỗi đơn vị) 100, pivot ở Bottom để nhân vật đứng đúng trên mặt đất.

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

• Biểu cảm: vẽ thêm 3 khuôn mặt (vui khi bán được hàng, cau mày khi mặc cả, ngạc nhiên) để dùng trong hộp thoại.
• Bảng màu thay thế: dùng Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) tạo phiên bản thương nhân sa mạc (áo cam, mũ đỏ) – kiểm tra quy tắc 60-30-10 vẫn đúng.
• Sprite pixel: vẽ lại NPC ở 32 × 32 px bằng Pencil (xem dự án 9) để dùng trong bản đồ.