Lộ trình › Thử thách theo chủ đề › Bài 217/218

Thử thách 14: Một tuần, một thế giới – nhân vật, đạo cụ và nền nhỏ đồng bộ

Trong 7 ngày, xây một thế giới nhỏ (gợi ý: Đảo Mây) với 3 asset cùng phong cách – nhân vật, đạo cụ và một cảnh nền nhỏ – trình bày trên bảng 2048 × 1024 px: đặt "luật của thế giới" (bảng 5–7 màu, ngôn ngữ hình khối, độ dày nét, hướng sáng) từ ngày đầu và kiểm tra cả ba trong một cảnh Unity 6.

Trung cấp 360 phút ★★★ Khó 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).

Vẽ một asset đẹp đã khó; vẽ ba asset mà người xem tin rằng chúng đến từ cùng một game còn khó hơn. Đây là kỹ năng của art director: không chỉ vẽ, mà đặt ra luật rồi tuân thủ. Thử thách kéo dài một tuần, mỗi ngày khoảng 45–60 phút, theo lịch cố định trên bảng mẫu. Ngày 1 bạn không vẽ asset nào cả – bạn viết luật: 5–7 màu, một ngôn ngữ hình khối (tròn mềm hay góc cạnh?), một độ dày nét, một hướng sáng. Sáu ngày sau, mọi nét vẽ đều phải trả lời câu hỏi: "cái này có đúng luật của thế giới không?". Ví dụ trong bài là Đảo Mây – nơi cậu bé đưa thư bay giữa các hòn đảo nổi – nhưng bạn có thể tạo thế giới của riêng mình.

Hình mẫu

Ba asset của thế giới Đảo Mây trên ba thẻ nền xanh trời: cậu bé đưa thư chibi tóc xanh than đội kính phi công, khăn choàng xanh ngọc và ba lô thư; hộp thư bay màu san hô có hai cánh kem và lá cờ xanh ngọc trên cột; hòn đảo nổi nhỏ có ngôi nhà mái san hô và cối xay gió; dải năm ô màu dùng chung bên dưới với ghi chú cùng 5 màu, cùng góc bo, cùng nét viền 3 px
Ba asset của thế giới Đảo Mây trên ba thẻ nền xanh trời: cậu bé đưa thư chibi tóc xanh than đội kính phi công, khăn choàng xanh ngọc và ba lô thư; hộp thư bay màu san hô có hai cánh kem và lá cờ xanh ngọc trên cột; hòn đảo nổi nhỏ có ngôi nhà mái san hô và cối xay gió; dải năm ô màu dùng chung bên dưới với ghi chú cùng 5 màu, cùng góc bo, cùng nét viền 3 px

Thời gian ước tính: một tuần, tổng khoảng 6 giờ: ngày 1 luật và bảng màu (45 phút), ngày 2–3 nhân vật (2 giờ), ngày 4 đạo cụ (1 giờ), ngày 5–6 nền nhỏ (1,5 giờ), ngày 7 ghép bảng, kiểm tra và sửa đồng bộ (45 phút).

Chuẩn bị

  • Canvas (khung vẽ): bảng trình bày 2048 × 1024 px (2:1), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent hoặc màu nền nhạt. Mỗi asset vẽ trong file riêng (nhân vật 512 × 512, đạo cụ 512 × 512, nền 1024 × 512) rồi đặt vào bảng bằng FileTệp›Place Linked để sửa file gốc là bảng tự cập nhật.
  • Công cụ chính: Swatches (Bảng mẫu màu) (WindowCửa sổ›SwatchesBảng mẫu màu) với một Group riêng cho thế giới, Brush (Cọ vẽ) Tool một preset nét viền duy nhất, Pen Tool (Bút tạo đường) (P), Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Layer Style lưu thành Style (WindowCửa sổ›Styles), Smart Object (Đối tượng thông minh) liên kết, Adjustment Layer (Lớp điều chỉnh) Black & White để kiểm tra value.
  • Thiết bị: bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (qua Sidecar hay Astropad) giúp giữ nét viền đều tay suốt cả tuần – lưu cọ viền thành Tool Preset để ngày nào cũng y hệt. Dùng chuột: cách chắc chắn nhất để đồng bộ nét là vẽ viền bằng Pen Tool rồi Stroke Path với cùng một cọ 3 px, hoặc dùng Layer Style Stroke lưu sẵn – nét chuột còn đều hơn nét tay.
  • File mẫu: "Bảng trình bày thế giới" ở cuối bài – ba vùng asset có ghi ngày, đường mặt đất chung y = 720, ô bảng màu, ô "Luật của thế giới" và lịch 7 ngày có ô đánh dấu. Đặt làm layer dưới cùng của bảng, khóa lại.
MàuMã hexDùng cho (Đảo Mây)
#3cc7a8Xanh ngọc – khăn, cỏ đảo, cờ
#2a8f86Xanh ngọc bóng
#fff1c9Kem mây – cánh, tường nhà, mây
#ff7a59San hô – áo, hộp thư, mái nhà
#d9573aSan hô bóng
#2b3a67Xanh than – tóc, quần, cột, cửa
#bfe6ffTrời – kính phi công, nền
#8a6e58Đá đảo (màu phụ thứ 6)

Các bước

Sáu giai đoạn: phác cả ba asset trên cùng một trang, nét viền 3 px cùng một cọ, tô từ năm màu chung, đổ bóng cùng một màu bóng, ánh sáng trên trái, đặt cạnh nhau để kiểm tra
Sáu giai đoạn: phác cả ba asset trên cùng một trang, nét viền 3 px cùng một cọ, tô từ năm màu chung, đổ bóng cùng một màu bóng, ánh sáng trên trái, đặt cạnh nhau để kiểm tra
  1. Ngày 1 – Câu chuyện một dòng: viết một câu mô tả thế giới: "Những hòn đảo nổi giữa biển mây, nơi thư từ được chuyển bằng gió". Từ câu đó rút ra 3 từ khóa cảm giác (Đảo Mây: nhẹ, ấm áp, phiêu lưu) – mọi quyết định sau đều phải phục vụ 3 từ này.
  2. Ngày 1 – Bảng màu 5–7 ô: chọn 2 màu chủ (xanh ngọc, san hô), 1 màu sáng (kem), 1 màu tối (xanh than), 1 màu môi trường (trời). Lưu vào Group Swatches tên thế giới. Ghi mã hex vào ô bảng màu của bảng mẫu. Luật: không thêm màu ngoài bảng, trừ màu bóng/sáng suy ra từ chính các màu đó.
  3. Ngày 1 – Ngôn ngữ hình khối và nét: ghi vào ô "Luật của thế giới": hình khối chủ đạo (Đảo Mây: tròn bo góc lớn + một điểm nhọn hình lá cờ tam giác), độ dày nét (3 px màu xanh than, không dùng đen), hướng sáng (trên trái), kiểu bóng (cel một bậc, mép cứng). Lưu cọ viền thành Tool Preset.
  4. Ngày 2 – Nhân vật, bóng dáng: file 512 × 512 px. Vẽ 5 bóng đen nhỏ cho nhân vật đưa thư, chọn bản có dấu hiệu nghề rõ nhất: ba lô thư, kính phi công, khăn bay. Áp ngôn ngữ hình khối: đầu tròn, thân bo, chỉ khăn và tóc có góc nhọn.
  5. Ngày 3 – Nhân vật, line và màu: line bằng Tool Preset 3 px xanh than; màu chỉ từ Swatches thế giới: áo san hô, khăn và ba lô xanh ngọc, tóc xanh than, kính màu trời. Bóng cel một bậc bằng layer kẹp Multiply (Nhân (làm tối)), mép cứng.
  6. Ngày 4 – Đạo cụ: file 512 × 512 px. Hộp thư bay: thân hộp bo góc lớn màu san hô (lặp màu áo nhân vật), hai cánh kem (lặp màu mây), cờ tam giác xanh ngọc (lặp khăn) trên cột xanh than. Mỗi màu của đạo cụ "mượn" từ nhân vật – đó là sợi dây nối chúng.
  7. Ngày 5 – Nền nhỏ, khối: file 1024 × 512 px. Hòn đảo nổi: mặt cỏ xanh ngọc bo tròn, phần đá dưới là hình nón ngược màu đá #8a6e58 với mép lởm chởm. Ngôi nhà tường kem, mái san hô; cối xay gió cánh kem. Giữ chi tiết ít hơn nhân vật – nền không được giành chú ý.
  8. Ngày 6 – Nền nhỏ, ánh sáng và không khí: bóng một bậc cùng hướng trên trái. Thêm vài cụm mây kem phía sau đảo và giọt đá rơi chấm chấm dưới đáy đảo. Kiểm tra: nét viền của nền cũng đúng 3 px – nhưng vì nền sẽ thu nhỏ khi đặt cạnh nhân vật, hãy vẽ nét 3 px ở kích thước hiển thị cuối.
  9. Ngày 7 – Ghép bảng: mở bảng 2048 × 1024 px, FileTệp›Place Linked ba file asset vào ba vùng. Đặt chân nhân vật, chân cột hộp thư lên đường mặt đất chung y = 720; nền nhỏ đặt sao cho đường cỏ của đảo cũng gần đường này.
  10. Ngày 7 – Kiểm tra đồng bộ bằng ba bài test: (1) Test Swatches: dùng Eyedropper (Ống hút màu) soát ngẫu nhiên 10 điểm – mọi màu phải thuộc bảng hoặc là bóng/sáng của nó. (2) Test Black & White: bật Adjustment Layer Black & White – ba asset có cùng độ tương phản. (3) Test nét: zoom 100% so độ dày viền ở ba asset.
  11. Ngày 7 – Sửa chỗ lệch: asset nào lệch, sửa file gốc (Smart Object liên kết sẽ tự cập nhật trên bảng). Lỗi thường gặp nhất là nền quá nhiều chi tiết hoặc đạo cụ dùng một màu ngoài bảng.
  12. Ngày 7 – Hoàn thiện bảng: điền ô luật thế giới, đánh dấu lịch 7 ngày, thêm tên thế giới. Bảng này chính là một trang "style guide" – tài liệu mà mọi họa sĩ mới vào đội sẽ đọc đầu tiên.
  13. Thử cả thế giới trong Unity 6: xuất từng asset PNG trong suốt (world_cloud_hero.png, world_cloud_mailbox.png, world_cloud_island.png). Trong Unity 6, đặt cả ba vào một Scene với cùng Pixels Per Unit (Số pixel mỗi đơn vị) (vd 100) – nếu nhân vật trông to bằng hòn đảo thì tỉ lệ giữa các file chưa thống nhất. Cho camera chạy ngang qua: ba asset phải trông như cùng một game, cùng ánh sáng, cùng "giọng".
Mẹo: Kỹ thuật "mượn màu chéo": mỗi asset phải chứa ít nhất một màu chủ đạo của asset khác. Áo nhân vật san hô → hộp thư san hô → mái nhà san hô. Khi màu lặp lại theo vòng như vậy, mắt người xem tự nối ba asset thành một thế giới.
Lỗi hay gặp: Ngày 5 thấy chán bảng màu và "chỉ thêm một màu tím cho đẹp". Một màu ngoài luật làm nền tách khỏi thế giới ngay lập tức. Nếu thật sự cần màu mới, hãy sửa luật ở ngày 1 và áp lại cho cả ba asset – không có ngoại lệ cho một asset.

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

  • Asset thứ tư trong 1 giờ: sau khi xong tuần, cho mình đúng 1 giờ vẽ thêm một quái vật cho Đảo Mây. Nếu luật đủ rõ, bạn sẽ vẽ nhanh hơn hẳn vì mọi quyết định đã có sẵn.
  • Thế giới Việt Nam: làm lại thử thách với một thế giới lấy cảm hứng Việt: "Làng chài ven biển miền Trung" (thúng chai, lưới, nhà mái tôn xanh) hoặc "Chợ nổi miền Tây" (ghe, cây bẹo, trái cây). Bảng màu lấy từ ảnh thật của nơi đó.
  • Đổi người vẽ: đưa bảng luật cho một bạn khác và nhờ họ vẽ asset thứ tư. Nếu asset của họ hòa vào thế giới của bạn, bảng luật đã đủ tốt để làm việc nhóm.

Mẹo & trick học nhanh

Luật viết ra, không để trong đầu

Bảng màu, hình khối, độ dày nét, hướng sáng – ghi hết vào ô "Luật của thế giới". Sau 7 ngày, trí nhớ sẽ phản bội bạn; tờ luật thì không.

Mượn màu chéo

Mỗi asset chứa ít nhất một màu chủ đạo của asset khác. Màu lặp theo vòng là cách đơn giản nhất để nhiều asset trông như một gia đình.

Place Linked cho bảng trình bày

Đặt asset vào bảng bằng FileTệp›Place Linked. Sửa file gốc là bảng tự cập nhật – không bao giờ có hai phiên bản lệch nhau.

Kiểm tra nhanh

1 Việc quan trọng nhất của ngày 1 là gì?
2 Làm sao kiểm tra ba asset có cùng độ tương phản?
3 Khi đặt ba asset vào cùng Scene trong Unity 6, vì sao cần cùng Pixels Per Unit?

Bài tập: Bảng thế giới 3 asset 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