Bạn học Photoshop trên máy nào? Phím tắt và hướng dẫn sẽ hiển thị đúng theo lựa chọn của bạn.

Lộ trình › Thiết kế nhân vật & sinh vật › Bài 138/158

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.

Nâng cao 180 phút ★★★ Vừa Hướng dẫn cho Windows · đổi sang macOS

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.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (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

Một nhân vật tóc nâu dựng ngược trong 4 bộ: mặc định áo xanh, mùa hè áo hoa và kính râm, Tết áo dài đỏ khăn đóng cầm bao lì xì, ninja đồ đen khăn đỏ
Một nhân vật tóc nâu dựng ngược trong 4 bộ: mặc định áo xanh, mùa hè áo hoa và kính râm, Tết áo dài đỏ khăn đóng cầm bao lì xì, ninja đồ đen khăn đỏ

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), WindowCửa sổ›Layer Comps, 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àuMã hexDùng cho
#ffd9b3Da (chung cả 4 skin)
#5a3a28Tóc (chung)
#3d6fd6Mặc định – áo
#ff8a3dMùa hè – áo hoa (hoa #ffe14d)
#2ec4b6Mùa hè – quần đùi
#d62f3aTết – áo dài (bóng #a01f2b)
#e8b830Tết – hoa văn vàng, viền khăn
#2b2f3aNinja – đồ đen (khăn #e8423b)
#1b1a24Viền

Các bước

Sáu giai đoạn: thân gốc, nét viền từng Group skin, màu nền, đổ bóng, ánh sáng, phụ kiện và Layer Comps
Sáu giai đoạn: thân gốc, nét viền từng Group skin, màu nền, đổ bóng, ánh sáng, phụ kiện và Layer Comps
  1. 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.
  2. 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, LayerLớp›Smart Objects›Convert to Smart Object.
  3. 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.
  4. 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.
  5. Skin mặc định: áo tunic xanh #3d6fd6 có thắt lưng nâu. Đây là skin "chuẩn" mà các skin khác so sánh.
  6. 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.
  7. Skin Tết – áo dài: áo dài đỏ #d62f3a dà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.
  8. 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.
  9. Skin ninja: đồ đen #2b2f3a từ 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.
  10. Đổ 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.
  11. Á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.
  12. Layer Comps: mở WindowCửa sổ›Layer Comps. 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.
  13. Xuất: bật cả 4 ô cùng lúc, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG → skins.png 1024 × 512 px. Muốn xuất từng skin riêng: FileTệp›Export›Layer Comps to Files.
  14. Đư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.
Mẹo: Đặt mọi skin trên cùng một thân Smart Object giúp animation dùng chung: nếu sau này bạn vẽ skin thành từng bộ phận (áo, tay áo, quần) trên cùng khung xương, Unity có thể đổi skin mà không cần làm lại animation.
Lỗi hay gặp: Vẽ skin bằng cách vẽ lại cả nhân vật – mắt dịch vài pixel, đầu to nhỏ khác nhau. Khi người chơi đổi skin trong game, nhân vật "giật" một cái rất khó chịu. Luôn vẽ đè lên thân gốc cố định.

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

Bóng dáng tóc là "chữ ký"

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.

Tôn trọng trang phục truyền thống

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 cho từng skin

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.

Kiểm tra nhanh

1 Thành phần nào nên GIỮ NGUYÊN giữa các skin?
2 Vì sao dùng Smart Object cho thân gốc?
3 Trong Unity 6, bộ công cụ nào giúp đổi skin bằng cách đổi Label?

Bài tập: Bộ 4 skin của bạn

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập