Lộ trình › Quy trình làm việc ở studio game › Bài 237/248

Dự án 4: Bảng màu theo vùng – 4 biome × 6 màu

Lập bảng màu cho bốn vùng của một game – rừng, sa mạc, băng tuyết, núi lửa – mỗi vùng sáu màu theo cùng sáu vai trò (trời, nền xa, mặt đất, điểm nhấn, bóng, ánh sáng), để cả đội tô đúng màu và các vùng khác nhau mà game vẫn là một.

Nâng cao 90 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 game có nhiều vùng đất (biome), mỗi vùng cần một không khí riêng – nhưng người chơi vẫn phải cảm thấy mình ở cùng một game. Studio giải bài toán này bằng một bảng màu theo biome: mỗi vùng một bộ màu, nhưng tất cả các bộ đều theo cùng một cấu trúc vai trò. Màu "điểm nhấn" của rừng là hồng, của sa mạc là xanh ngọc – khác màu nhưng cùng nhiệm vụ: chỉ chỗ có vật phẩm, lối đi. Khi họa sĩ mới vào đội cần vẽ một bụi cây cho sa mạc, họ không đoán màu – họ tra bảng.

Hình mẫu

Bảng màu bốn biome: rừng nhiệt đới, sa mạc, băng tuyết, núi lửa; mỗi cột có cảnh nhỏ và sáu ô màu theo vai trò Trời, Nền xa, Mặt đất, Điểm nhấn, Bóng, Ánh sáng kèm mã hex; khung cam đánh dấu hàng điểm nhấn
Bảng màu bốn biome: rừng nhiệt đới, sa mạc, băng tuyết, núi lửa; mỗi cột có cảnh nhỏ và sáu ô màu theo vai trò Trời, Nền xa, Mặt đất, Điểm nhấn, Bóng, Ánh sáng kèm mã hex; khung cam đánh dấu hàng điểm nhấn

Thời gian ước tính: khoảng 1,5 giờ – 15 phút chọn bốn biome và cảm xúc, 45 phút chọn màu và vẽ cảnh nhỏ, 30 phút kiểm tra value, độ tương phản và ghi mã hex.

Chuẩn bị

  • Canvas (khung vẽ): 1920 × 1080 px, Resolution (Độ phân giải) 72, RGB Color, nền #f5f6f8. Mỗi biome một cột rộng khoảng 435 px.
  • Công cụ chính: Color Picker (Bảng chọn màu) (bấm ô Foreground (Màu tiền cảnh)), Swatches (Bảng mẫu màu) panel (WindowCửa sổ›SwatchesBảng mẫu màu), Rectangle Tool (U), Lasso (Dây thòng lọng) Tool (L) + ⌥ Option+⌫ Delete cho cảnh nhỏ, Black & White adjustment để kiểm tra value, Type Tool (T).
  • Thiết bị: cảnh nhỏ chỉ có 3 mảng màu, làm bằng Lasso + Fill nên chuột hoàn toàn ổn. Có bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) thì vẽ viền đồi, mây thả tay sẽ mềm mại hơn – bật Pen Pressure (Lực nhấn bút) cho Size.
  • File mẫu: "Bảng màu biome" ở cuối bài: 4 cột, mỗi cột ô cảnh nhỏ và 6 ô màu theo vai trò, hàng điểm nhấn có khung cam.
MàuMã hexBiome và vai trò (mẫu)
#3f7a3aRừng – mặt đất
#ff5c8aRừng – điểm nhấn (hoa, vật phẩm)
#c98a3aSa mạc – mặt đất
#3cc7a8Sa mạc – điểm nhấn (xương rồng, ốc đảo)
#a8c8e8Băng tuyết – nền xa
#ff8a1aBăng tuyết – điểm nhấn (lửa trại)
#5a2a3aNúi lửa – trời
#ffd23fNúi lửa – điểm nhấn (dung nham sáng)

Các bước

Sáu giai đoạn: chia bốn cột, đặt tên biome, vẽ cảnh nhỏ ba mảng, xếp sáu ô màu, ghi vai trò và mã hex, đối chiếu hàng điểm nhấn
Sáu giai đoạn: chia bốn cột, đặt tên biome, vẽ cảnh nhỏ ba mảng, xếp sáu ô màu, ghi vai trò và mã hex, đối chiếu hàng điểm nhấn
  1. Chốt sáu vai trò: Trời, Nền xa, Mặt đất, Điểm nhấn, Bóng, Ánh sáng. Viết ra giấy nhiệm vụ của mỗi vai trò: "Mặt đất" là chỗ nhân vật đứng – phải tương phản với nhân vật; "Điểm nhấn" dành cho thứ người chơi cần chú ý.
  2. Mỗi biome một cảm xúc: rừng – sống động, ẩm; sa mạc – nóng, khô, chói; băng tuyết – lạnh, yên tĩnh; núi lửa – nguy hiểm, ngột ngạt. Cảm xúc quyết định nhiệt độ màu và độ bão hòa trước khi chọn từng màu.
  3. Dựng khung: FileTệp›NewTạo mới 1920 × 1080 px, đặt file mẫu lên trên, khóa lại. Mỗi biome một Group: biome_forest, biome_desert, biome_snow, biome_volcano.
  4. Màu "Mặt đất" trước tiên: đây là màu chiếm nhiều diện tích nhất trong màn chơi. Chọn trong Color Picker, gõ mã hex vào ô #. Rừng #3f7a3a, sa mạc #c98a3a, băng #ffffff, núi lửa #3a2a2a.
  5. Trời và Nền xa: nền xa luôn nhạt hơn và ít bão hòa hơn mặt đất (phối cảnh không khí). Trời mang nhiệt độ của biome: sa mạc vàng kem #ffe3b0, băng xanh nhạt #d6ecff, núi lửa đỏ thẫm #5a2a3a.
  6. Bóng – không phải màu đen: bóng của mỗi biome là một màu tối có sắc của biome: rừng #1f4a3a (xanh rêu đậm), băng #4a6a9a (xanh lam), sa mạc #8a4a2a (nâu đỏ). Dùng ở chế độ Multiply (Nhân (làm tối)) trên layer bóng.
  7. Ánh sáng: màu của nguồn sáng chính – nắng vàng ấm #fff1b8 ở rừng, trắng chói #fffbe0 ở sa mạc, ánh cam dung nham #ff8a1a ở núi lửa. Dùng cho rim light và vùng sáng nhất.
  8. Điểm nhấn là màu bù: mở Color Picker, nhìn vị trí màu mặt đất trên vòng màu, chọn màu nằm gần đối diện. Rừng xanh lá → nhấn hồng; sa mạc cam → nhấn xanh ngọc; băng xanh → nhấn cam. Màu bù làm vật phẩm "bật" khỏi nền.
  9. Cảnh nhỏ 3 mảng: trong ô cảnh của mỗi cột, dùng Lasso Tool (L) tô trời, đồi nền xa, mặt đất rồi thêm một vật điểm nhấn (bông hoa, xương rồng, lửa trại, dòng dung nham). Không vẽ chi tiết – cảnh nhỏ chỉ để thấy các màu sống cùng nhau.
  10. Sáu ô màu và mã hex: vẽ ô vuông 70 px cho mỗi vai trò, tô đúng màu, bên cạnh ghi tên vai trò và mã hex bằng Type Tool. Giữ cùng thứ tự ở cả bốn cột để nhìn ngang là so được.
  11. Kiểm tra value: thêm adjustment layer Black & White trên cùng (LayerLớp›New Adjustment Layer›Black & WhiteTrắng đen). Ở mỗi cột, mặt đất phải khác hẳn trời về độ sáng, và điểm nhấn phải nổi lên khỏi mặt đất. Nếu hai màu thành cùng một tông xám – sửa. Tắt layer kiểm tra trước khi xuất.
  12. Lưu vào Swatches: trong Swatches panel, tạo nhóm màu (biểu tượng thư mục) cho từng biome và kéo 6 màu vào. Bấm menu panel > Export Selected Swatches để gửi cho đồng đội file .aco – mọi người tô cùng một màu chính xác.
  13. Đối chiếu với Unity 6: xuất PNG doc_biome_palette_v01.png vào Docs/Art. Khi dựng cảnh trong Unity 6, màu nền camera (Camera > Background) đặt đúng màu "Trời" của biome, và màu Global Light 2D (nếu dùng URP 2D) nghiêng về màu "Ánh sáng" – bảng màu không chỉ dành cho họa sĩ.
Mẹo: Giữ một màu chung xuyên suốt mọi biome – thường là màu viền nhân vật hoặc màu UI. Nó là sợi chỉ nối các vùng lại với nhau, và nhân vật luôn đọc rõ dù đứng trong rừng hay giữa núi lửa.
Lỗi hay gặp: Biome núi lửa dùng đỏ cho cả trời, đất, dung nham và điểm nhấn – mọi thứ hòa thành một mảng đỏ, người chơi không biết đâu là nền đứng được, đâu là dung nham chết người. Mặt đất phải tối và ít bão hòa; chỉ điểm nhấn được chói.

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

  • Biome thứ năm: thêm một vùng "đầm lầy độc" hoặc "thành phố nổi" theo cùng sáu vai trò – thử thách là làm nó khác hẳn mà vẫn thuộc cùng game.
  • Phiên bản đêm: làm hàng thứ hai cho mỗi biome lúc ban đêm, dùng adjustment Color Lookup hoặc Gradient Map (Ánh xạ dải màu) ở chế độ Color để giữ đúng quan hệ value.
  • Kiểm tra mù màu: ViewHiển thị›Proof Setup›Color Blindness – Protanopia-type – kiểm tra điểm nhấn vẫn nổi lên với người mù màu đỏ – xanh lá.

Mẹo & trick học nhanh

Cùng vai trò, khác màu

Bốn biome khác màu nhưng chung một thứ tự vai trò. Họa sĩ chỉ cần biết "đây là màu Điểm nhấn của sa mạc" là tô đúng.

Bóng có màu

Bóng lấy sắc của môi trường: xanh lam ở băng, nâu đỏ ở sa mạc. Đừng dùng đen hay xám trung tính – cảnh sẽ chết màu.

Black & White để kiểm tra

Bật adjustment Black & White trên cùng: mặt đất, trời và điểm nhấn phải là ba tông xám khác nhau rõ rệt.

Kiểm tra nhanh

1 Vì sao bốn biome nên dùng cùng sáu vai trò màu theo cùng thứ tự?
2 Màu điểm nhấn của biome rừng xanh lá nên là gì?
3 Cách kiểm tra nhanh mặt đất và trời có đủ tương phản không?

Bài tập: Bảng màu 4 biome cho game 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