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

Thử thách 3: Đơn sắc – chỉ trắng đen, rồi nhuộm một màu

Vẽ một chiếc đèn dầu thủy tinh 512 × 512 px chỉ bằng 5 bậc xám để chứng minh rằng value (sáng tối) quyết định hình khối, sau đó nhuộm thành bản một màu bằng Gradient Map – và học cách một sprite xám được nhuộm thành nhiều biến thể bằng Color của Sprite Renderer trong Unity 6.

Trung cấp 50 phút ★★★ Dễ Hướng dẫn cho macOS · đổi sang Windows

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ở (⌘ Cmd+O).

Khi bỏ hết màu, bạn không còn chỗ nào để "giấu" lỗi. Một bức tranh đơn sắc đọc được hay không phụ thuộc hoàn toàn vào value – độ sáng tối của từng mảng. Thử thách này buộc bạn vẽ một chiếc đèn dầu chỉ bằng 5 bậc xám cố định, không pha thêm. Ngọn lửa phải là điểm sáng nhất, đế đèn là khối tối nhất, bóng thủy tinh nằm ở giữa. Khi bản xám đã đẹp, chỉ một Adjustment Layer (Lớp điều chỉnh) Gradient Map (Ánh xạ dải màu) là biến nó thành tranh một màu xanh đêm, hổ phách hay rêu – mà hình khối vẫn y nguyên. Đây cũng là cách nhiều game tạo hàng chục biến thể màu từ một sprite xám.

Hình mẫu

Cùng một chiếc đèn dầu vẽ hai lần: bên trái chỉ có năm bậc xám, ngọn lửa trắng ở giữa bóng thủy tinh xám và đế đèn tối; bên phải là bản đã nhuộm Gradient Map xanh đêm; dưới mỗi bản là dải năm ô value
Cùng một chiếc đèn dầu vẽ hai lần: bên trái chỉ có năm bậc xám, ngọn lửa trắng ở giữa bóng thủy tinh xám và đế đèn tối; bên phải là bản đã nhuộm Gradient Map xanh đêm; dưới mỗi bản là dải năm ô value

Thời gian ước tính: khoảng 50 phút – 35 phút cho bản trắng đen, 15 phút thử ba bộ Gradient Map và xuất file.

Chuẩn bị

  • Canvas (khung vẽ): 512 × 512 px, Resolution (Độ phân giải) 72, RGB Color (vẫn để RGB để bước cuối thêm được Gradient Map), Background Contents: Transparent.
  • Công cụ chính: Brush (Cọ vẽ) Tool (B) Hard Round và Soft Round, Eyedropper (Ống hút màu) (I), Lasso (Dây thòng lọng) Tool (L), Clipping Mask (Mặt nạ cắt) (⌘ Cmd+⌥ Option+G), Lock Transparent Pixels (Khóa vùng trong suốt) (/), Adjustment Layer Gradient Map và Black & White.
  • Thiết bị: chuột làm tốt vì cả bài chỉ là mảng phẳng và vài chấm cọ mềm – dùng Lasso Tool chọn mảng rồi ⌥ Option+⌫ Delete tô. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (qua Sidecar hay Astropad) giúp chuyển sáng tối mềm hơn ở thân thủy tinh: cọ Soft Round, bật Transfer › Opacity (Độ mờ đục) › Control: Pen Pressure (Lực nhấn bút).
  • File mẫu: "Thẻ value" ở cuối bài – mở ở cửa sổ riêng, dùng Eyedropper hút từng ô. Mỗi ô ghi sẵn mã hex và độ sáng B trong Color Picker (Bảng chọn màu) (10%, 30%, 50%, 70%, 95%).
MàuMã hexDùng cho
#1a1a1aValue 1 – bóng đổ, khe tối nhất
#4d4d4dValue 2 – mặt tối đế đèn, nắp
#808080Value 3 – mặt sáng đế đèn
#b3b3b3Value 4 – thân thủy tinh, quầng sáng
#f2f2f2Value 5 – ngọn lửa, vệt bóng thủy tinh
#0f1e3dGradient Map xanh đêm – điểm tối
#4a78c2Gradient Map xanh đêm – điểm giữa
#e6f0ffGradient Map xanh đêm – điểm sáng

Các bước

Sáu giai đoạn: phác khối tròn và hình thang, nét viền, tô cả đèn bằng xám giữa, thêm mảng tối Multiply, thắp điểm sáng ngọn lửa, nhuộm màu bằng Gradient Map
Sáu giai đoạn: phác khối tròn và hình thang, nét viền, tô cả đèn bằng xám giữa, thêm mảng tối Multiply, thắp điểm sáng ngọn lửa, nhuộm màu bằng Gradient Map
  1. Tạo file và nạp 5 bậc xám: FileTệp›NewTạo mới, 512 × 512 px, RGB, Transparent. Mở thẻ value, dùng Eyedropper (I) hút từng ô rồi bấm Create new swatch trong WindowCửa sổ›SwatchesBảng mẫu màu. Luật chơi: chỉ 5 màu này, không chọn màu bằng tay trong Color Picker.
  2. Phác ba khối: layer Sketch Opacity 30%: đế đèn là một nửa elip rộng 230 px ở đáy, cổ đèn là hình chữ nhật nhỏ, bóng thủy tinh là một quả trứng cao 220 px, nắp và quai ở trên. Đặt đèn hơi lệch trái để chừa chỗ cho quầng sáng.
  3. Mảng xám giữa cho cả vật: layer Base, dùng Lasso Tool (L) khoanh đế và cổ, tô #808080; khoanh nắp tô #4d4d4d; khoanh thân thủy tinh tô #b3b3b3. Ngay bước này đã thấy được ba vùng sáng tối khác nhau – đó là "khung xương" value của tranh.
  4. Kiểm tra bằng thumbnail: thu zoom còn 25%. Bạn phải nhận ra đây là chiếc đèn ngay cả khi chưa có chi tiết. Nếu thân thủy tinh và đế dính vào nhau, đẩy chúng xa nhau thêm một bậc value.
  5. Hướng sáng là ngọn lửa: nguồn sáng duy nhất nằm ở tâm thân thủy tinh. Mọi mặt quay về phía ngọn lửa sáng hơn, mặt quay ra ngoài tối hơn. Phía trên đế (gần lửa) sáng, phía dưới đế tối – ngược với ánh sáng mặt trời thông thường.
  6. Mảng tối: layer kẹp (⌘ Cmd+⌥ Option+G) trên Base, chế độ Normal. Cọ Hard Round màu #4d4d4d tô nửa dưới và mép phải đế đèn; màu #1a1a1a cho khe giữa nắp và thân, chân đế chạm đất. Giữ mép bóng cứng – tranh 5 bậc đẹp nhất khi các mảng rõ ràng.
  7. Bóng đổ dưới đèn: layer Shadow dưới cùng, Ellipse Tool vẽ elip dẹt 140 × 16 px màu #1a1a1a, Opacity 60%. Bóng đổ giúp đèn "đứng" chứ không lơ lửng.
  8. Ngọn lửa: layer Flame, Pen Tool (Bút tạo đường) vẽ giọt nước ngược cao 46 px ở tâm thân, Fill #f2f2f2. Đây là điểm sáng duy nhất đạt Value 5 – không có chỗ nào khác trên tranh được trắng bằng.
  9. Quầng sáng: layer Glow trên thân thủy tinh, cọ Soft Round 150 px màu #f2f2f2, Opacity 25%, chấm một lần quanh ngọn lửa. Cọ mềm được phép vì quầng sáng tự nhiên vốn mềm – nhưng nó chỉ dùng 1 màu trong 5 màu đã chọn.
  10. Vệt phản chiếu thủy tinh: cọ Hard Round 8 px màu #f2f2f2, một vệt cong dọc mép trái thân thủy tinh, một chấm nhỏ ở vai. Thủy tinh đọc được là thủy tinh nhờ vệt sáng sắc cạnh trên nền xám trung bình.
  11. Kiểm tra value: thêm Adjustment Layer Black & White tạm trên cùng – nếu ảnh thay đổi nghĩa là bạn đã lỡ dùng màu có sắc độ. Xóa layer kiểm tra sau khi xong.
  12. Nhuộm một màu bằng Gradient Map: LayerLớp›New Adjustment Layer›Gradient MapÁnh xạ dải màu, đặt trên cùng. Bấm vào dải gradient trong Properties, đặt 3 điểm màu: Location 0% #0f1e3d, 50% #4a78c2, 100% #e6f0ff. Tối thành xanh đêm, sáng thành xanh trắng – hình khối không đổi chút nào. Thử thêm bộ hổ phách và rêu trong thẻ mẫu.
  13. Xuất bản trắng đen và dùng trong Unity 6: ẩn layer Gradient Map, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → lamp_gray.png đúng 512 × 512 px. Lưu thêm một bản có Gradient Map để làm portfolio. Trong Unity 6: Texture Type Sprite (2D and UI), kéo vào Scene, chọn Sprite Renderer › Color và đổi sang xanh, cam, xanh lá – Unity nhân màu này với sprite xám, cho ra ba biến thể đèn chỉ từ một file.
Mẹo: Nheo mắt hoặc thu nhỏ canvas thường xuyên. Khi nheo, chi tiết biến mất và chỉ còn các mảng value – nếu lúc đó bạn vẫn thấy rõ "lửa sáng, thân xám, đế tối", bức tranh đã đúng.
Lỗi hay gặp: Dùng cọ Soft Round tô khắp nơi để "cho mượt", sinh ra hàng trăm bậc xám trung gian và hình khối nhòe như sương. Chỉ dùng cọ mềm cho quầng sáng; mọi mảng khác là 5 bậc xám cứng cạnh.

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

  • Ba bậc thay vì năm: vẽ lại cùng chiếc đèn chỉ với Value 1, 3, 5. Khó hơn nhiều – bạn phải quyết định mảng nào hy sinh. Đây là bài tập yêu thích của họa sĩ concept.
  • Đèn tắt: nhân đôi file, đổi ngọn lửa thành Value 2, bỏ quầng sáng, đảo lại hướng sáng (từ trên trái như ánh trăng). So sánh hai bản cạnh nhau để thấy nguồn sáng thay đổi toàn bộ value.
  • Shader nhuộm màu: trong Unity 6 tạo Shader Graph Sprite Unlit, dùng giá trị xám của texture làm tọa độ đọc một texture gradient 256 × 1 px – chính là Gradient Map của Photoshop chạy trong game.

Mẹo & trick học nhanh

Một điểm trắng duy nhất

Chỉ ngọn lửa được đạt Value 5 rực nhất. Vệt phản chiếu thủy tinh cũng dùng Value 5 nhưng rất nhỏ. Càng ít chỗ trắng, chỗ trắng càng "sáng".

Kiểm tra bằng Black & White

Một Adjustment Layer Black & White đặt tạm trên cùng là cách nhanh nhất phát hiện màu lẫn. Nếu bật nó lên mà ảnh thay đổi, có pixel nào đó đang có màu.

Sprite xám là "khuôn màu"

Trong Unity, Color của Sprite Renderer nhân với từng pixel. Sprite càng gần trắng càng ăn màu mạnh, nên vẽ bản xám hơi sáng một chút nếu bạn định nhuộm trong game.

Kiểm tra nhanh

1 Vì sao thử thách đơn sắc giúp tiến bộ nhanh?
2 Gradient Map làm gì với bức tranh xám?
3 Trong bài này, nguồn sáng duy nhất là ngọn lửa. Vậy đế đèn sáng tối ra sao?
4 Cách nhanh nhất để có ba biến thể màu của sprite đèn xám trong Unity 6 là gì?

Bài tập: Đèn dầu đơn sắc 5 bậc value 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