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

Thử thách 4: Giới hạn đúng 3 màu – cú đêm trên cành

Vẽ con cú đêm 256 × 256 px chỉ với đúng 3 màu phẳng – một tối, một giữa, một sáng – bằng Pencil Tool không khử răng cưa, mượn màu tối làm viền và bóng, mượn màu sáng làm điểm nhấn, khóa bảng màu bằng Indexed Color và để hệ thống tự đếm màu khi nộp.

Trung cấp 45 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).

Giới hạn tạo ra sáng tạo. Khi chỉ có ba màu, bạn không thể thêm "một chút xám" cho bóng hay "một chút hồng" cho má – mọi quyết định phải rõ ràng. Màu tối vừa là viền, vừa là bóng, vừa là nền cho mắt; màu sáng vừa là bụng, vừa là vệt sáng, vừa là vầng trăng. Thử thách này rất gần với cách làm game trên máy cầm tay đời đầu (Game Boy chỉ có 4 sắc xanh) và với phong cách 1-bit / low-color đang được nhiều game indie ưa chuộng. Bí quyết nằm ở value: ba màu phải cách xa nhau về độ sáng, nếu không con cú sẽ dính vào cành.

Hình mẫu

Con cú đêm đậu trên cành dưới trăng khuyết, chỉ dùng ba màu: tím than đậm cho nền, viền và bóng; cam đất cho thân và cành; kem sáng cho bụng, mắt, trăng và các ngôi sao; góc dưới có ba ô màu và dòng chữ bằng 3 màu không hơn
Con cú đêm đậu trên cành dưới trăng khuyết, chỉ dùng ba màu: tím than đậm cho nền, viền và bóng; cam đất cho thân và cành; kem sáng cho bụng, mắt, trăng và các ngôi sao; góc dưới có ba ô màu và dòng chữ bằng 3 màu không hơn

Thời gian ước tính: khoảng 45 phút – 10 phút chọn bảng màu và phác bóng dáng, 25 phút tô bằng Pencil (Bút chì), 10 phút soát màu thừa và xuất file.

Chuẩn bị

  • Canvas (khung vẽ): 256 × 256 px, Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Kích thước nhỏ để mỗi nét đều có chủ đích và hệ thống đếm màu chính xác từng pixel.
  • Công cụ chính: Pencil Tool (giữ chuột trên Brush (Cọ vẽ) Tool, hoặc Shift+B cho tới khi ra Pencil), Paint Bucket (Thùng sơn) (G) với Anti-alias (Khử răng cưa) tắt, Magic Wand (Đũa thần) (W) Anti-alias tắt, Eyedropper (Ống hút màu) (I), Lock Transparent Pixels (Khóa vùng trong suốt) (/).
  • Thiết bị: chuột rất hợp vì Pencil không có lực nhấn và cả bài là mảng phẳng; tô bằng vùng chọn Polygonal Lasso (Thòng lọng đa giác) (L) rồi Paint Bucket. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (qua Sidecar hay Astropad) vẫn dùng tốt, nhưng tắt Shape Dynamics (Biến đổi hình dạng) và Transfer trong F5 – lực nhấn làm Opacity (Độ mờ đục) thay đổi sẽ sinh màu trung gian.
  • File mẫu: "Sáu thẻ bảng 3 màu" ở cuối bài. Chọn một thẻ, hút 3 màu bằng Eyedropper và lưu vào WindowCửa sổ›SwatchesBảng mẫu màu. Thẻ "Cú đêm" là bảng của hình mẫu; năm thẻ còn lại để bạn thử nhiều không khí khác.
MàuMã hexDùng cho
#232036Màu 1 – tối: viền, bóng, đồng tử, bầu trời
#d9774aMàu 2 – giữa: thân cú, cành, hoa văn bụng
#f6e3b4Màu 3 – sáng: bụng, lòng mắt, trăng, sao
#2a1e3cBộ thay thế "Băng tím": tối
#4fa38cBộ thay thế: giữa (xanh rêu)
#f2eecbBộ thay thế: sáng

Các bước

Sáu giai đoạn: phác bóng dáng cú và cành, nét viền bằng Pencil, tô ba mảng tối giữa sáng, bóng mượn màu tối, điểm sáng mượn màu sáng, khóa bảng màu bằng Indexed Color
Sáu giai đoạn: phác bóng dáng cú và cành, nét viền bằng Pencil, tô ba mảng tối giữa sáng, bóng mượn màu tối, điểm sáng mượn màu sáng, khóa bảng màu bằng Indexed Color
  1. Chọn bảng màu trước khi vẽ: ba màu phải cách nhau rõ về độ sáng. Mở Color Picker (Bảng chọn màu), xem ô B (Brightness): màu tối dưới 25%, màu giữa 50–75%, màu sáng trên 90%. Màu giữa nên là màu có sắc độ mạnh nhất – nó gánh "cảm xúc" của tranh.
  2. Tạo file và cài công cụ: FileTệp›NewTạo mới, 256 × 256 px, Transparent. EditChỉnh sửa›PreferencesTùy chọn cài đặt›GeneralChung › Image Interpolation: Nearest Neighbor (Điểm lân cận) (preserve hard edges) – để mọi phép xoay, thu phóng không sinh màu mới. Chọn Pencil Tool, Size 2 px, Opacity 100%, Mode Normal.
  3. Phác bóng dáng: layer Sketch bằng Pencil 1 px màu bất kỳ (sẽ xóa sau). Con cú là một quả trứng to với hai tai nhọn, đậu trên một cành cong chạy ngang canvas. Đặt cú lệch trái một chút, trăng lớn ở góc trên phải – tạo đường chéo bố cục.
  4. Nền tối hay nền trong suốt? bài nộp dùng nền trong suốt để làm sprite, nên màu tối chỉ xuất hiện ở viền và bóng. Tạo tạm layer BG_preview tô màu tối để xem không khí như hình mẫu, nhớ ẩn trước khi xuất.
  5. Mảng màu giữa: layer Body, dùng Polygonal Lasso (L) với Anti-alias tắt (thanh Options), khoanh thân cú và tai, Paint Bucket màu #d9774a. Cành cây cùng màu trên layer Branch.
  6. Mảng màu sáng: layer Belly kẹp vào Body (Ctrl+Alt+G), khoanh hình chữ U ở bụng, tô #f6e3b4. Hai đĩa mắt là hai hình tròn sáng 44 px – vẽ bằng Elliptical Marquee (Khung chọn) (M) với Anti-alias tắt rồi tô.
  7. Viền bằng màu tối: layer Line trên cùng, Pencil 3 px màu #232036. Đi viền quanh thân, tai, cành. Viền không bắt buộc ở mọi nơi: chỗ mảng sáng gặp nền tối thì tương phản đã đủ, có thể bỏ viền.
  8. Đồng tử và mỏ: hai hình tròn tối 20 px lệch nhẹ vào giữa (cú nhìn người chơi), mỏ hình thoi tối. Đặt một chấm sáng 3–4 px trong mỗi đồng tử – đây là cách duy nhất có "ánh mắt" khi không được dùng màu trắng riêng.
  9. Hoa văn bụng bằng màu giữa: trên Belly, Pencil 3 px màu #d9774a vẽ ba hàng chữ "V" nối nhau như lông vũ. Màu giữa trên nền sáng tạo chi tiết mà không thêm màu mới.
  10. Bóng bằng màu tối: layer kẹp vào Body, Pencil màu #232036, tô dải hẹp dọc mép phải thân và dưới cánh. Muốn bóng "nhẹ" hơn mà vẫn chỉ 3 màu? Dùng dither: chấm xen kẽ từng pixel tối – sáng như bàn cờ ở vùng chuyển tiếp.
  11. Trăng và sao: trên layer BG_detail, vẽ trăng khuyết bằng hai hình tròn chồng nhau (tròn sáng, rồi tròn tối đè lệch lên), vài ngôi sao 4 cánh bằng Pencil 1 px màu sáng. Nếu nộp nền trong suốt, có thể giữ trăng làm một phần của sprite.
  12. Soát màu thừa: ẩn Sketch và BG_preview, Ctrl+Shift+Alt+E tạo layer gộp tạm. ImageHình ảnh›ModeChế độ (màu)›Indexed Color (Photoshop sẽ hỏi gộp layer – bấm Cancel trên file gốc, hãy làm trên bản sao ImageHình ảnh›DuplicateNhân bản): nếu Palette tự hiện Exact và Colors = 3, tranh sạch. Kiểm tra lại bằng ImageHình ảnh›ModeChế độ (màu)›Color Table – chỉ được thấy 3 ô màu.
  13. Xuất và dùng trong Unity 6: trên bản sao, chuyển lại ImageHình ảnh›ModeChế độ (màu)›RGB Color, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → owl_3color.png 256 × 256 px. Trong Unity 6: Texture Type Sprite (2D and UI), Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None – nén texture sẽ sinh màu trung gian và phá thế 3 màu. Muốn đổi cả game sang bảng màu khác, chỉ cần một shader palette swap đọc 3 màu.
Mẹo: Trước khi vẽ thật, thử bảng màu bằng một "thumbnail ô vuông": ba hình chữ nhật lồng nhau tối – giữa – sáng. Nếu ô giữa và ô tối gần như lẫn vào nhau khi nheo mắt, đổi màu giữa sáng hơn. Ba phút thử bảng màu tiết kiệm nửa giờ sửa sau.
Lỗi hay gặp: Dùng Brush Tool hoặc Magic Wand có Anti-alias bật. Mép mỗi mảng sinh ra hàng chục màu pha, hệ thống đếm được 40–80 màu và bài bị trừ điểm. Chỉ dùng Pencil, và tắt Anti-alias ở mọi công cụ chọn và tô.

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

  • 2 màu (1-bit): vẽ lại con cú chỉ bằng màu tối và màu sáng. Thân cú phải được diễn tả bằng dither và nét viền – bài luyện "suy nghĩ bằng value" khó nhất.
  • Đổi bảng màu tức thì: nhân đôi file, dùng ImageHình ảnh›AdjustmentsĐiều chỉnh màu›Replace Color hoặc Paint Bucket với Contiguous tắt, Tolerance 0, đổ lần lượt ba màu của thẻ "Băng tím" – cùng một hình, không khí khác hẳn.
  • Bộ ba con vật: vẽ thêm cáo và nhím cùng bảng 3 màu, đặt cạnh nhau trên sheet 768 × 256 px. Ba nhân vật dùng chung bảng màu sẽ trông như cùng một game.

Mẹo & trick học nhanh

Ba màu, ba bậc value

Tối dưới 25%, giữa khoảng 50–75%, sáng trên 90% Brightness. Khoảng cách value lớn giúp mọi mảng tách nhau rõ ràng dù không có màu thứ tư.

Dither thay cho màu thứ tư

Muốn chuyển tiếp mềm giữa hai màu, chấm xen kẽ từng pixel như bàn cờ. Từ xa mắt sẽ trộn thành "màu giữa" – mà máy đếm vẫn chỉ thấy 2 màu.

Soát bằng Color Table

Trên một bản sao, ImageHình ảnh›ModeChế độ (màu)›Indexed Color rồi ImageHình ảnh›ModeChế độ (màu)›Color Table cho bạn thấy chính xác tranh đang dùng bao nhiêu màu.

Kiểm tra nhanh

1 Điều gì quan trọng nhất khi chọn bảng 3 màu?
2 Vì sao bài 3 màu phải dùng Pencil Tool thay vì Brush Tool?
3 Không có màu thứ tư, làm sao tạo vùng chuyển tiếp mềm giữa thân và bóng?
4 Vì sao nên để Compression None cho sprite 3 màu trong Unity 6?

Bài tập: Con vật 3 màu 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