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

Thử thách 2: Đèn ông sao, đèn cá chép và mặt nạ Trung Thu

Vẽ bốn vật phẩm Trung Thu – đèn ông sao, đèn cá chép, đèn lồng tròn, mặt nạ giấy bồi thỏ ngọc – trên sheet 1024 × 256 px (4 ô 256 px), học cách vẽ vật "phát sáng từ bên trong" bằng lớp giấy kiếng sáng dần vào tâm và quầng Linear Dodge, rồi thắp sáng thật bằng Light 2D trong Unity 6.

Trung cấp 80 phút ★★★ Dễ 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).

Đêm rằm tháng Tám là dịp hiếm hoi trẻ em Việt Nam được rước đèn đi khắp xóm, nên vật phẩm Trung Thu trong game mang cảm xúc rất mạnh với người chơi Việt. Thử thách này dạy một kỹ năng khó với người mới: vẽ một vật tự phát sáng. Đèn lồng không được tô sáng ở mép trên trái như vật thường – ánh sáng nằm bên trong, nên phần giữa sáng nhất, mép ngoài tối hơn, và có một quầng sáng tỏa ra nền tối. Bạn sẽ làm việc trên nền đêm #1f2a4a để đánh giá đúng độ sáng, rồi ẩn nền khi xuất.

Hình mẫu

Bốn vật phẩm Trung Thu trên trời đêm có trăng tròn: đèn ông sao đỏ năm cánh nhân vàng trên cán tre có tua, đèn cá chép cam vây vàng vảy cong, đèn lồng tròn đỏ nắp vàng có tua, mặt nạ giấy bồi thỏ ngọc trắng tai hồng má hồng
Bốn vật phẩm Trung Thu trên trời đêm có trăng tròn: đèn ông sao đỏ năm cánh nhân vàng trên cán tre có tua, đèn cá chép cam vây vàng vảy cong, đèn lồng tròn đỏ nắp vàng có tua, mặt nạ giấy bồi thỏ ngọc trắng tai hồng má hồng

Thời gian ước tính: khoảng 80 phút – nếu dùng line art mẫu, bạn tiết kiệm được 20 phút phác và tập trung vào màu và ánh sáng.

Chuẩn bị

  • Canvas (khung vẽ): 1024 × 256 px (4 ô × 256 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Cả hai cạnh là lũy thừa của 2 nên Unity nén tốt.
  • Công cụ chính: Magic Wand (Đũa thần) Tool (W) để chọn vùng trong line art, Paint Bucket (Thùng sơn) (G), Brush (Cọ vẽ) Tool (B) Soft Round cho lõi sáng, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Blend Mode (Chế độ hòa trộn) Linear Dodge (Add) (Cộng sáng) và Multiply (Nhân (làm tối)).
  • Thiết bị: chuột hoàn toàn đủ – phần lớn là tô vùng chọn và chấm cọ mềm. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (qua Sidecar hay Astropad) giúp vẽ vảy cá và nét giấy kiếng mềm tay hơn: đặt cọ Soft Round với Transfer › Opacity (Độ mờ đục) Jitter › Control: Pen Pressure (Lực nhấn bút) để nhấn nhẹ ra lớp sáng mỏng. Dùng chuột: hạ Flow (Lưu lượng) của cọ xuống 15% và tô nhiều lượt chồng.
  • File mẫu: "Line art 4 vật phẩm" ở cuối bài – FileTệp›Place Embedded, đặt trên cùng, đổi Blend Mode thành Multiply để phần trắng biến mất, chỉ còn nét đen. Đặt tên Line và khóa.
MàuMã hexDùng cho
#e8423bĐỏ giấy kiếng đèn ông sao, đèn lồng
#b8262fĐỏ bóng – mép ngoài xa nguồn sáng
#ffd23fVàng giấy kiếng, nhân sao, vây cá
#ff8a1aCam thân cá chép
#d9572aCam bóng bụng cá
#f2c14eNắp đèn, tua vàng
#f7f3eeGiấy bồi mặt nạ thỏ
#ffb3c1Hồng tai và má thỏ
#1f2a4aNền trời đêm tạm (ẩn khi xuất)

Các bước

Sáu giai đoạn trên nền đêm: phác dáng bốn vật, nét viền trắng, tô màu nền, đổ bóng mép ngoài, lớp sáng ở tâm và cuối cùng là quầng sáng Linear Dodge quanh mỗi đèn
Sáu giai đoạn trên nền đêm: phác dáng bốn vật, nét viền trắng, tô màu nền, đổ bóng mép ngoài, lớp sáng ở tâm và cuối cùng là quầng sáng Linear Dodge quanh mỗi đèn
  1. Tạo file và nền đêm: FileTệp›NewTạo mới, 1024 × 256 px, Transparent. Layer dưới cùng tên BG_night: Shift+F5 › Contents: Color #1f2a4a. Bật lưới EditChỉnh sửa›PreferencesTùy chọn cài đặt›Guides, Grid & Slices Gridline Every 256 Pixels. Đặt line art mẫu lên trên cùng ở chế độ Multiply.
  2. Chọn vùng tô từ line art: chọn layer Line, Magic Wand Tool (W) với Sample All Layers tắt, Tolerance 20, Anti-alias (Khử răng cưa) bật, Contiguous bật. Bấm vào bên trong ngôi sao, giữ Shift bấm thêm các cánh. SelectVùng chọn›Modify›Expand 1 px để màu lấn dưới nét viền, không hở trắng.
  3. Tô màu nền từng vật: tạo layer Flat_sao nằm dưới Line, Alt+Backspace tô màu Foreground (Màu tiền cảnh) #e8423b. Lặp lại cho nhân sao vàng, thân cá cam, vây cá vàng, đèn lồng đỏ, nắp vàng, mặt nạ giấy bồi. Mỗi màu một layer, đặt tên rõ: Flat_ca_than, Flat_ca_vay…
  4. Hiểu ánh sáng từ bên trong: với vật thường, mặt trên trái sáng nhất. Với đèn có nến bên trong, tâm đèn sáng nhất và sáng dần ra mép là sai – phải ngược lại: tâm sáng, mép tối. Ghi chú nhỏ lên canvas: "nến ở đây" ngay tâm mỗi đèn để không quên.
  5. Bóng mép ngoài: trên mỗi layer Flat của đèn, tạo layer kẹp (Ctrl+Alt+G) chế độ Multiply. Cọ Soft Round 60–80 px, màu #b8262f, Opacity 60%, tô dọc toàn bộ viền ngoài (không chỉ bên phải). Với cá chép, bụng và đuôi tối hơn lưng một chút bằng #d9572a.
  6. Lõi sáng: layer kẹp mới chế độ Linear Dodge (Add). Cọ Soft Round 50 px, màu #ffb020, Opacity 40%, chấm 2–3 lần ở tâm mỗi đèn. Với đèn ông sao, nhân vàng ở giữa thêm một chấm #fff6c8 nhỏ – đây là chỗ ngọn nến chiếu qua giấy kiếng mỏng nhất.
  7. Vảy cá và nếp giấy: layer Detail, cọ Hard Round 2 px màu #c2410c. Vảy cá là ba cột chữ "C" xếp lệch nhau; nếp đèn lồng tròn là 4 đường cong từ nắp trên xuống nắp dưới, Opacity 60%. Nét chi tiết phải tối hơn nền để không làm loãng ánh sáng.
  8. Mặt nạ thỏ ngọc – vật không phát sáng: mặt nạ giấy bồi được chiếu bởi ánh đèn xung quanh, nên dùng bóng thường: kẹp layer Multiply tô #d8cfc6 ở nửa phải và cằm. Mắt hình hạt thóc #1b1a24, má #ffb3c1 Opacity 45%, nét hoa văn đỏ #d62f3a trên trán theo lối vẽ mặt nạ giấy bồi truyền thống: nét to, ít, đối xứng.
  9. Quầng sáng (glow): layer Glow đặt dưới các Flat, chế độ Linear Dodge (Add), Opacity 35%. Cọ Soft Round 200 px, màu #ffb020, chấm một lần sau mỗi đèn. Quầng phải nằm gọn trong ô 256 px – phần tràn sang ô bên cạnh sẽ bị cắt khi Unity chia sprite.
  10. Tua và cán: cọ Hard Round 2–3 px màu #f2c14e, vẽ tua đèn bằng các nét dọc song song lệch dài ngắn. Cán tre đèn ông sao: Line Tool 4 px #a8703f, hơi nghiêng như đang được cầm đi.
  11. Kiểm tra trên hai nền: bật tắt BG_night. Trên nền đêm đèn phải rực; trên nền trong suốt (ô kẻ caro) đèn vẫn phải đọc được hình nhờ nét viền. Nếu glow làm bẩn ô caro thành mảng cam đục, giảm Opacity Glow xuống 25%.
  12. Gom Group và xuất: mỗi vật một Group: 01_den_ong_sao, 02_den_ca_chep, 03_den_long, 04_mat_na_tho. Ẩn BG_night, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → trungthu_items.png 1024 × 256 px.
  13. Thắp sáng trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Sprite Editor › Slice › Grid By Cell Size 256 × 256. Kéo đèn ông sao vào Scene. Nếu project dùng Universal 2D (URP 2D Renderer): GameObject›Light›Spot Light 2D, đặt làm con của đèn, Color #ffb020, Intensity 1,2, Radius Outer 3; giảm Global Light 2D xuống 0,3 cho cảnh đêm. Thêm script nhỏ làm Intensity dao động 1,1–1,3 – ánh nến lung linh thật.
Mẹo: Muốn giấy kiếng trông trong suốt, để một phần nan tre (nét viền bên trong) hiện mờ qua lớp giấy: nhân đôi layer Line, đặt dưới lớp sáng, Opacity 25%. Mắt người hiểu ngay đây là giấy mỏng căng trên khung.
Lỗi hay gặp: Tô vệt sáng trắng ở mép trên trái đèn lồng như tô quả táo. Đèn có nguồn sáng ở trong nên không có vệt sáng phản chiếu lớn; sáng ở tâm, tối ở mép, cộng một quầng sáng tỏa ra nền.

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

  • Đèn kéo quân: thêm ô thứ 5 (đổi canvas thành 1280 × 256) với đèn kéo quân hình lục giác, bóng các hình người cưỡi ngựa in mờ trên vách giấy. Vẽ 4 frame bóng xoay để làm animation quay đèn.
  • Đèn tắt – đèn sáng: nhân đôi Group mỗi đèn, ẩn layer Linear Dodge (Làm sáng) và Glow, giảm sáng phần giấy – dùng cho trạng thái chưa thắp trong nhiệm vụ "thắp đèn cho cả xóm".
  • Mặt nạ thứ hai: vẽ thêm mặt nạ giấy bồi ông Địa cười hoặc mặt nạ con cọp theo đúng lối giấy bồi: mảng màu phẳng, nét to, mắt và miệng rõ – tránh biến mặt nạ dân gian thành hình đáng sợ.

Mẹo & trick học nhanh

Nguồn sáng ở trong

Đèn có nến thì tâm sáng nhất và mép tối nhất. Hãy chấm lõi sáng bằng Linear Dodge (Add) đúng chỗ ngọn nến, và để Multiply ôm quanh toàn bộ viền ngoài.

Đánh giá trên nền đêm

Màu phát sáng trên nền trắng trông nhợt nhạt và bạn sẽ chọn sai. Giữ layer BG_night #1f2a4a bật suốt lúc vẽ, chỉ ẩn khi xuất.

Glow không tràn ô

Quầng sáng to hơn vật nhưng vẫn phải nằm trong ô 256 px. Muốn quầng lớn hơn trong game, dùng Light 2D của Unity thay vì vẽ to ra.

Kiểm tra nhanh

1 Một chiếc đèn lồng có nến bên trong nên sáng tối thế nào?
2 Vì sao đổi line art mẫu sang Blend Mode Multiply?
3 Trong Unity 6 với URP 2D Renderer, cách làm đèn tỏa sáng ra cảnh xung quanh là gì?

Bài tập: Bộ 4 vật phẩm Trung Thu 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