Lộ trình › Môi trường & đạo cụ game › Bài 156/218

Dự án 13: Lâu đài nhìn xa với phối cảnh không khí

Vẽ phong cảnh 1920 × 1080 px có lâu đài ở xa, chia 4 lớp độ sâu với value và độ bão hòa giảm dần theo khoảng cách (atmospheric perspective), kiểm soát bằng lớp sương và Adjustment Layer, rồi dùng làm nền parallax nhiều lớp trong Unity 6.

Nâng cao 240 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).

Một tòa lâu đài trên đỉnh núi xa xa là lời hứa của game: "bạn sẽ tới đó". Để lâu đài trông thật sự xa, kích thước nhỏ là chưa đủ – bạn cần phối cảnh không khí: càng xa, vật càng nhạt, càng ít tương phản, càng ít bão hòa và càng ngả về màu trời. Dự án này luyện kỷ luật quan trọng nhất của họa sĩ background: mỗi lớp độ sâu có một khoảng value riêng, không lớp nào được "lấn" sang khoảng của lớp khác.

Hình mẫu

Bốn lớp độ sâu: tiền cảnh cây và đá tối đậm, đồi giữa xanh lá có hàng cây và con đường, đồi xa xanh xám, dãy núi và lâu đài nhiều tháp nhạt màu hòa vào trời; nhãn đánh số từng lớp
Bốn lớp độ sâu: tiền cảnh cây và đá tối đậm, đồi giữa xanh lá có hàng cây và con đường, đồi xa xanh xám, dãy núi và lâu đài nhiều tháp nhạt màu hòa vào trời; nhãn đánh số từng lớp

Thời gian ước tính: khoảng 4 giờ. Nhìn nhãn trong hình: lớp 1 (gần) tối nhất và đậm màu nhất, lớp 4 (xa) gần như cùng màu trời. Con đường ở lớp 2 uốn về phía lâu đài – dẫn mắt người chơi tới đích.

Chuẩn bị

  • Canvas: 1920 × 1080 px (16:9), Resolution (Độ phân giải) 72, RGB Color.
  • Công cụ chính: Lasso (Dây thòng lọng) và Polygonal Lasso (Thòng lọng đa giác) (L), Pen Tool (Bút tạo đường) (P) cho tháp lâu đài, Brush (Cọ vẽ) Tool (B), Gradient (Dải màu chuyển) Tool (G), Adjustment Layer (Lớp điều chỉnh) Levels, Hue/Saturation (Sắc độ/Độ bão hòa), Black & White kẹp theo Group, chế độ Screen cho lớp sương.
  • Thiết bị: các lớp đồi là mảng lớn – bút Wacom, XP-Pen, Huion hay iPad vẽ nhanh nhờ lực nhấn (Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút), Minimum Diameter 40%). Dùng chuột: mọi lớp dựng bằng Lasso + tô, tháp lâu đài bằng Pen Tool và Rectangle Tool – phối cảnh không khí là chuyện màu và value, không phụ thuộc thiết bị.
  • File mẫu: "Line art mẫu 4 lớp" – đặt Multiply (Nhân (làm tối)) trên cùng để tô hoặc tham khảo vị trí từng lớp; nhãn xanh bên phải ghi số lớp.
MàuMã hexDùng cho
#9fc4e8Trời (đỉnh)
#c9d8e6Lớp 4 – núi xa nhất
#a9bdd2Lớp 4 – lâu đài
#a6c0b8Lớp 3 – đồi xa
#6f9a6aLớp 2 – đồi giữa
#5c8758Lớp 2 – cây giữa
#2f4a24Lớp 1 – tán cây gần
#3a4a2cLớp 1 – đất gần
#1b2414Lớp 1 – nét viền tiền cảnh

Các bước

Sáu giai đoạn: thumbnail 4 lớp value, khối lớn, màu nền từng lớp, đổ bóng, lớp sương không khí, chi tiết tiền cảnh
Sáu giai đoạn: thumbnail 4 lớp value, khối lớn, màu nền từng lớp, đổ bóng, lớp sương không khí, chi tiết tiền cảnh
  1. Thumbnail 4 lớp value: file 384 × 216 px, Grayscale (Thang xám). Chỉ dùng 5 sắc xám: trời 85%, lớp 4 = 75%, lớp 3 = 60%, lớp 2 = 40%, lớp 1 = 15% (độ sáng). Mỗi lớp là một mảng lượn ngang chồng lên nhau, lâu đài là một khối nhỏ trên đỉnh lớp 4. Chưa cần màu – nếu thumbnail xám đã có chiều sâu, bản màu chắc chắn có.
  2. Năm Group: FileTệp›NewTạo mới 1920 × 1080 px. Group từ dưới lên: SKY, L4_FAR, L3, L2, L1_NEAR. Đặt thumbnail ở góc màn hình (WindowCửa sổ›Arrange›New Window để mở cửa sổ thứ hai thu nhỏ) – luôn so với nó.
  3. Trời: SKY: Gradient từ #9fc4e8 (đỉnh) tới #f1f4f2 (chân trời). Chân trời sáng nhất – vì ta nhìn xuyên qua nhiều không khí nhất ở đó. Vài đám mây trắng dẹt ở nửa trên.
  4. Lớp 4 – núi và lâu đài: L4_FAR: Polygonal Lasso vẽ dãy núi răng cưa #c9d8e6, đỉnh có chút tuyết trắng. Lâu đài: Pen Tool và Rectangle Tool dựng tường thành có răng cưa, 2–3 tháp nhọn cao thấp khác nhau, màu #a9bdd2. Viền chỉ đậm hơn nền một chút (#8aa0b8), cửa sổ là các chấm nhỏ cùng màu viền. Lá cờ đỏ nhạt #c86a7a trên tháp cao nhất – màu ấm duy nhất ở xa, đã bị làm nhạt.
  5. Lớp 3 – đồi xa: L3: Lasso vẽ dải đồi lượn #a6c0b8 che chân núi, dải dưới tối hơn một chút #94b0a8. Không cây, không chi tiết – ở khoảng cách này, cây chỉ còn là kết cấu mờ, không cần vẽ.
  6. Lớp 2 – đồi giữa và con đường: L2: dải đồi #6f9a6a, hàng cây là các elip #5c8758 có viền mảnh #4a7046. Pen Tool vẽ con đường đất #c8b890 rộng ở gần, hẹp dần, uốn về phía lâu đài – đường dẫn mắt. Lớp này bắt đầu có chi tiết vừa phải.
  7. Lớp 1 – tiền cảnh: L1_NEAR: mô đất tối #3a4a2c ở góc trái và tảng đá #5a4a3e góc phải, có nét viền dày #1b2414. Một cây lớn bên trái: thân #4a3424, tán #2f4a24 với mảng tối và đốm sáng rõ ràng. Lớp gần nhất có tương phản mạnh nhất và chi tiết nhiều nhất cảnh.
  8. Đổ bóng theo lớp: mỗi Group một layer kẹp Multiply. Lớp 1: bóng đậm #141f10 Opacity (Độ mờ đục) 60%. Lớp 2: bóng vừa, Opacity 35%. Lớp 3, 4: bóng rất nhẹ Opacity 15% hoặc bỏ hẳn. Bóng cũng tuân theo phối cảnh không khí – càng xa càng yếu.
  9. Lớp sương không khí: layer Haze chế độ Screen đặt giữa các Group: giữa L4 và L3 một Gradient #e6eef4 Opacity 50% từ chân trời lên; giữa L3 và L2 một Gradient Opacity 25%. Sương "chèn" giữa các lớp đẩy chúng tách xa nhau rõ ràng.
  10. Khóa value bằng Adjustment Layer: thêm Adjustment Layer Levels kẹp vào Group L3 (chuột phải › Create Clipping Mask (Mặt nạ cắt) cho Group): kéo Output Levels đen lên 60 – lớp 3 không bao giờ có điểm nào tối hơn mức đó. Làm tương tự cho L4 (Output đen 110). Đây là "khóa an toàn": bạn vẽ chi tiết thoải mái mà lớp xa không bị tối quá.
  11. Giảm bão hòa theo khoảng cách: Adjustment Layer Hue/Saturation kẹp Group: L4 Saturation −40, L3 −25, L2 −10, L1 giữ nguyên. Lá cờ ở xa nhờ vậy cũng tự nhạt đi. Bật/tắt từng adjustment để thấy hiệu quả.
  12. Kiểm tra bằng Black & White: Adjustment Layer Black & White trên cùng, rồi đặt cạnh thumbnail xám: 5 sắc độ phải khớp. Lấy Eyedropper (Ống hút màu) (I) đo một điểm ở mỗi lớp, xem giá trị B trong Color Picker (Bảng chọn màu) (HSB) – B tăng dần từ lớp 1 tới lớp 4. Tắt kiểm tra.
  13. Xuất và đưa vào Unity 6: xuất ảnh đầy đủ castle_vista.png 1920 × 1080 px. Cho parallax: trên bản sao file, gộp mỗi Group (Ctrl+E) gồm cả lớp sương và adjustment của nó, xuất từng lớp PNG nền trong suốt cùng 1920 × 1080 px. Unity 6: Sorting Layer Background, Order in Layer 0 (Sky) tới 4 (L1). Script parallax với hệ số Sky 0, L4 0.1, L3 0.3, L2 0.6, L1 1. Nếu cảnh cuộn ngang dài, đặt Sprite Renderer › Draw Mode Tiled cho Sky và L4 để lặp ngang.
Mẹo: Muốn lâu đài là điểm nhìn dù nó nhạt nhất cảnh? Đặt nó ngay chỗ tương phản cục bộ mạnh nhất của lớp 4: tường sáng nhất cạnh mặt tối nhất của núi, kèm lá cờ màu ấm duy nhất ở xa. Mắt tìm đến chỗ khác biệt, không nhất thiết là chỗ tối nhất.
Lỗi hay gặp: Vẽ chi tiết lâu đài quá kỹ với viền đen đậm như vật ở gần. Lâu đài lập tức "nhảy" lên phía trước, phá vỡ chiều sâu. Ở lớp 4, viền chỉ đậm hơn nền vài phần trăm – hoặc không có viền.

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

  • Cùng cảnh, khác giờ: hoàng hôn – đổi trời sang cam tím, lớp sương sang hồng nhạt, tiền cảnh gần như bóng đen. Phối cảnh không khí vẫn giữ nguyên quy tắc, chỉ đổi màu không khí.
  • Sương mù dày: tăng Opacity lớp Haze lên 70% ở giữa mỗi lớp – cảnh huyền bí cho màn chơi trong sương, lâu đài chỉ còn là bóng mờ.
  • Lâu đài đến gần: vẽ lại lâu đài ở lớp 2 (to hơn, nhiều chi tiết hơn, tương phản hơn) – dùng cho cảnh sau khi người chơi đi được nửa đường.

Mẹo & trick học nhanh

Mỗi lớp một khoảng value

Quy định trước: lớp 1 tối nhất (B 10–30%), lớp 2 (B 35–55%), lớp 3 (B 55–70%), lớp 4 (B 70–85%). Không điểm nào của lớp xa được tối hơn giới hạn của nó.

Sương chèn giữa các lớp

Một layer Gradient Screen nằm giữa hai Group tách chúng xa nhau nhanh hơn bất kỳ cách chỉnh màu nào. Chân trời luôn là chỗ sương dày nhất.

Chi tiết theo khoảng cách

Tiền cảnh: lá, vân đá, viền dày. Giữa: hàng cây, con đường. Xa: chỉ còn bóng dáng. Đừng vẽ chi tiết ở nơi mắt không thể thấy.

Kiểm tra nhanh

1 Theo phối cảnh không khí, vật càng xa thì sao?
2 Adjustment Layer Levels kẹp vào Group lớp xa với Output đen nâng lên dùng để làm gì?
3 Ở đâu trong cảnh lớp sương nên dày nhất?

Bài tập: Phong cảnh 4 lớp độ sâ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