Dự án 10: 4 skin trang phục cho một nhân vật
Từ một thân nhân vật gốc, thiết kế 4 skin: mặc định, mùa hè, Tết (áo dài, khăn đóng, lì xì) và ninja – giữ nguyên dáng người và khuôn mặt, quản lý bằng Layer Comps, xuất sheet 1024 × 512 px cho Unity 6.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (Ctrl+O).
Skin (trang phục) là thứ người chơi sưu tầm và mua trong game. Một skin tốt phải khiến người chơi thấy "nhân vật của mình mặc đồ mới" – chứ không phải "một nhân vật khác". Vì vậy quy tắc vàng: giữ nguyên dáng người, khuôn mặt và kiểu tóc (hoặc ít nhất bóng dáng tóc), chỉ thay áo, phụ kiện, màu. Trong Photoshop, ta tổ chức bằng một thân gốc dùng chung và mỗi skin là một Group riêng, chuyển qua lại bằng Layer Comps.
Hình mẫu
Thời gian ước tính: khoảng 3 giờ. Đường nét đứt hồng cho thấy mắt cả 4 skin nằm đúng một độ cao – thân gốc không hề dịch chuyển. Skin Tết lấy cảm hứng từ áo dài và khăn đóng truyền thống: màu đỏ may mắn với hoa văn vàng, được vẽ trang trọng, không biến thành trò đùa.
Chuẩn bị
- Canvas: 1024 × 512 px (4 ô 256 × 512), Resolution (Độ phân giải) 72, RGB Color, Transparent.
- Công cụ chính: Smart Object (Đối tượng thông minh) (thân gốc), Group (Ctrl+G), Clipping Mask (Mặt nạ cắt), , Pen Tool (Bút tạo đường) (P), Brush (Cọ vẽ) Tool (B).
- Thiết bị: quần áo có nếp gấp và vạt áo bay – bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) giúp nét nếp gấp thon tự nhiên (Pen Pressure (Lực nhấn bút) cho Size). Với chuột, vẽ đường viền áo bằng Pen Tool và nếp gấp bằng các mảng bóng tô bằng Lasso (Dây thòng lọng) thay vì nét vẽ.
- File mẫu: "Khung 4 skin" có thân gốc mờ trong mỗi ô – vẽ áo đè lên, giữ đúng đường tầm mắt.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#ffd9b3 | Da (chung cả 4 skin) | |
#5a3a28 | Tóc (chung) | |
#3d6fd6 | Mặc định – áo | |
#ff8a3d | Mùa hè – áo hoa (hoa #ffe14d) | |
#2ec4b6 | Mùa hè – quần đùi | |
#d62f3a | Tết – áo dài (bóng #a01f2b) | |
#e8b830 | Tết – hoa văn vàng, viền khăn | |
#2b2f3a | Ninja – đồ đen (khăn #e8423b) | |
#1b1a24 | Viền |
Các bước
- Tạo file: Ctrl+N 1024 × 512 px, Transparent. Guide dọc mỗi 256 px, Guide ngang ở đường chân y = 480 và đường tầm mắt y = 226.
- Thân gốc (Base): trong ô 1 vẽ nhân vật với áo thun đơn giản: đầu, tóc, mặt, tay, chân, áo cơ bản. Gom thành Group Base, .
- Nhân Smart Object ra 4 ô: Ctrl+J 3 lần, dời mỗi bản 256 px. Vì là cùng một Smart Object, sửa mặt ở một bản thì cả 4 cập nhật – khuôn mặt không bao giờ lệch giữa các skin.
- Mỗi skin một Group: trên mỗi Smart Object tạo Group Skin_Default, Skin_Summer, Skin_Tet, Skin_Ninja. Mọi thứ của skin (áo, quần, mũ, phụ kiện) nằm trong Group đó, đè lên thân gốc.
- Skin mặc định: áo tunic xanh
#3d6fd6có thắt lưng nâu. Đây là skin "chuẩn" mà các skin khác so sánh. - Skin mùa hè: áo sơ mi cam có hoa vàng nhỏ (vẽ 3–4 bông, không phủ kín), quần đùi xanh ngọc, dép kem. Kính râm vẽ bằng Pen Tool đè lên mắt; tay dang ra hơn một chút cho vẻ thư thái.
- Skin Tết – áo dài: áo dài đỏ
#d62f3adài qua gối, đường nẹp giữa thân và vài hoa văn tròn vàng#e8b830(vẽ một hoa văn, nhân bản và xoay nhẹ). Dáng áo dài thẳng, tà áo xẻ hai bên – tham khảo ảnh áo dài thật để đúng cấu trúc. - Skin Tết – khăn đóng và lì xì: khăn đóng đen ôm đầu có 2 vạch viền vàng – vì khăn che tóc, hãy giữ phần tóc mai lộ ra để vẫn nhận ra nhân vật. Tay phải cầm bao lì xì đỏ có ô vàng. Biểu cảm vui vẻ chúc Tết.
- Skin ninja: đồ đen
#2b2f3atừ cổ đến chân, khăn che nửa dưới mặt, băng đô đỏ trên trán, khăn quàng đỏ bay phía sau, tay cầm phi tiêu. Lông mày quyết tâm – biểu cảm đổi theo skin cũng được, miễn mắt giữ nguyên hình. - Đổ bóng đồng bộ: trong mỗi Group, layer Shade kẹp vào layer áo, Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)), cùng một màu bóng tím xám cho cả 4 skin. Nếp gấp áo dài dọc theo thân; nếp áo hoa ngang ở khuỷu tay.
- Ánh sáng: layer Light kẹp, vệt sáng ở vai trái và mép trên mũ/khăn. Vải bóng (áo dài lụa) có vệt sáng dài mảnh; vải thô (đồ ninja) gần như không có vệt sáng.
- Layer Comps: mở . Chỉ bật Base + Skin_Default, bấm Create New Layer Comp, đặt tên "Default", tích Visibility. Làm tương tự cho 3 skin còn lại. Giờ bấm vào từng Comp để xem nhanh từng bộ trang phục.
- Xuất: bật cả 4 ô cùng lúc, , PNG →
skins.png1024 × 512 px. Muốn xuất từng skin riêng: . - Đưa vào Unity 6: Sprite Mode Multiple, Slice Grid By Cell Size 256 × 512, Pivot (Điểm neo) Bottom. Với gói 2D Animation, tạo Sprite Library Asset có Category "Body" và 4 Label (Default, Summer, Tet, Ninja); nhân vật có Sprite Library + Sprite Resolver – đổi Label bằng script khi người chơi chọn skin trong cửa hàng.
Nâng cao (tùy chọn)
- Skin Trung thu: áo tứ thân hoặc áo bà ba, cầm đèn ông sao – dùng đúng hình đèn ông sao 5 cánh truyền thống.
- Độ hiếm: làm skin "huyền thoại" có hiệu ứng (vầng sáng, hạt bay) và viền khung ảnh vàng cho thẻ skin trong cửa hàng.
- Đổi màu nhanh: thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) kẹp vào Group skin để tạo biến thể màu (áo dài xanh, áo dài vàng) chỉ trong vài giây.
Mẹo & trick học nhanh
Tóc dựng ngược là dấu hiệu nhận ra nhân vật. Khi skin có mũ hoặc khăn, để lộ một phần tóc (mái, tóc mai) để người chơi vẫn nhận ra.
Với áo dài, khăn đóng, áo tứ thân… hãy xem ảnh thật để vẽ đúng cấu trúc (cổ đứng, tà xẻ). Stylized hóa được, nhưng không bóp méo thành trang phục khác.
Layer Comps lưu trạng thái bật/tắt layer. Khi cần sửa, bấm Comp, sửa, rồi chọn Update Layer Comp – không bao giờ lạc mất skin nào.