Bạn học Photoshop trên máy nào? Phím tắt và hướng dẫn sẽ hiển thị đúng theo lựa chọn của bạn.

Lộ trình › Bộ asset theo thể loại game › Bài 126/158

Dự án 13: Một cảnh nền, ba biến thể ngày – đêm – mưa

Từ một cảnh làng quê 1920 × 1080 tô màu phẳng, tạo ba phiên bản ban ngày, ban đêm và trời mưa chỉ bằng Adjustment Layer, Blend Mode và lớp hiệu ứng – quản lý bằng Layer Comps, xuất cùng lúc và chuyển cảnh mượt trong Unity 6.

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

Game có chu kỳ ngày đêm hoặc thời tiết không vẽ lại từng cảnh. Họa sĩ vẽ một cảnh gốc, rồi tạo các biến thể bằng những lớp không phá hủy (non-destructive) đặt bên trên: Adjustment Layer (Lớp điều chỉnh) đổi màu – sáng tối, Blend Mode (Chế độ hòa trộn) tạo ánh đèn, lớp hiệu ứng thêm mưa, sao, sương. Ưu điểm lớn: sửa cảnh gốc một lần (thêm một ngôi nhà chẳng hạn), cả ba phiên bản tự cập nhật.

Hình mẫu

Cảnh làng quê chia ba dải chéo: ban ngày nắng, ban đêm có trăng sao và cửa sổ sáng đèn, trời mưa có mây xám và vệt mưa
Cảnh làng quê chia ba dải chéo: ban ngày nắng, ban đêm có trăng sao và cửa sổ sáng đèn, trời mưa có mây xám và vệt mưa

Thời gian ước tính: khoảng 5 giờ. Để ý: nét vẽ và hình khối ở ba dải giống hệt nhau – chỉ ánh sáng, màu và hiệu ứng thay đổi.

Chuẩn bị

  • File gốc: mở "Cảnh làng quê tô màu phẳng" (1920 × 1080 px) – hoặc dùng một cảnh nền của bạn, miễn là các vật thể nằm trên layer riêng hoặc chọn được bằng Magic Wand (Đũa thần).
  • Cấu trúc layer: Group BASE (cảnh gốc, khóa lại), Group NGAY, Group DEM, Group MUA nằm trên. Mỗi biến thể chỉ bật đúng một Group.
  • Công cụ chính: Adjustment Layer (Curves, Hue/Saturation (Sắc độ/Độ bão hòa), Color Balance (Cân bằng màu)), Solid Color fill layer, Blend Mode (Multiply (Nhân (làm tối)), Screen, Linear Dodge (Add) (Cộng sáng), Overlay (Phủ chồng)), Filter Add Noise + Motion Blur, Layer Comps.
  • Thiết bị: phần lớn là thao tác bảng – chuột hoàn toàn đủ. Vầng sáng đèn, tia nắng và vệt nước trên đất đẹp hơn khi vẽ bằng bút có lực nhấn điều khiển Opacity (Độ mờ đục) (Transfer › Opacity Jitter › Control: Pen Pressure (Lực nhấn bút)) trên Wacom, XP-Pen, Huion hay iPad; với chuột, đặt Brush (Cọ vẽ) Flow (Lưu lượng) 10% và tô chồng nhiều lần.
MàuMã hexDùng cho
#7cc8ffTrời ban ngày
#9bd18aĐồi xa
#6cbf5aĐồi gần
#d94b4bMái nhà
#14205aLớp đêm (Solid Color, Multiply)
#ffd86bĐèn cửa sổ (Linear Dodge (Làm sáng))
#f4f1d6Trăng
#4a5a6eLớp mưa (Solid Color, Normal 50%)
#d9e6f2Vệt mưa, vũng nước

Các bước

Sáu giai đoạn: phác cảnh, tô màu phẳng, ánh sáng ban ngày, lớp ban đêm, lớp mưa, ghép ba phiên bản
Sáu giai đoạn: phác cảnh, tô màu phẳng, ánh sáng ban ngày, lớp ban đêm, lớp mưa, ghép ba phiên bản
  1. Mở file gốc và lưu thành PSD mới. Đưa toàn bộ layer vào Group BASE (Ctrl+G), khóa Group. Tạo 3 Group trống NGAY, DEM, MUA phía trên.
  2. Ngày – bóng: trong NGAY, layer Multiply màu #9aa8d8 Opacity 60%: tô bóng phía phải nhà, cối xay, cây (ánh nắng từ mặt trời bên phải – trên) và bóng đổ trên cỏ kéo về bên trái.
  3. Ngày – nắng: layer Screen màu #fff1b8: Brush mềm lớn chấm vầng sáng quanh mặt trời; Polygonal Lasso (Thòng lọng đa giác) tạo 3 tia nắng hình nêm, tô rồi giảm Opacity 20%. Vệt sáng mỏng trên mép trái mái nhà.
  4. Đêm – phủ tối: trong DEM, LayerLớp›New Fill Layer›Solid Color #14205a, Blend Mode Multiply, Opacity 62%. Cả cảnh lập tức chìm vào màu đêm xanh tím nhưng nét và khối vẫn còn nguyên.
  5. Đêm – chỉnh tương phản: Adjustment Layer Curves: kéo điểm sáng xuống nhẹ, kênh Blue nâng vùng tối – đêm trong game nên thấy được mọi thứ, chỉ "lạnh" và tối hơn, không đen kịt.
  6. Đêm – trăng sao: layer Normal: trăng khuyết (hình tròn #f4f1d6 trừ đi một hình tròn lệch) ở đúng vị trí mặt trời. Brush tròn nhỏ bật Scattering (Tán xạ) 1000% chấm sao ở 1/3 trên của trời – không chấm sao sau đồi.
  7. Đêm – đèn: layer Linear Dodge (Add): tô #ffd86b vào cửa sổ (Magic Wand chọn cửa sổ trên BASE với Sample All Layers), rồi Brush mềm lớn Opacity 30% chấm vầng sáng quanh nhà và đèn. Ánh đèn ấm giữa đêm lạnh là điểm nhấn của cả cảnh.
  8. Mưa – trời xám: trong MUA, Adjustment Layer Hue/Saturation Saturation −40, Lightness −10; Solid Color #4a5a6e Normal Opacity 50%. Mây đen: Brush mềm lớn màu #6b7788 ở dải trên cùng, che mặt trời.
  9. Mưa – vệt mưa: layer mới tô đen, FilterBộ lọc›Noise›Add Noise Amount 100%, Gaussian, Monochromatic. FilterBộ lọc›Blur›Motion Blur Angle 70°, Distance 40 px. ImageHình ảnh›AdjustmentsĐiều chỉnh màu›LevelsMức sáng kéo điểm đen sang phải tới khi chỉ còn vệt mảnh. Đặt Blend Mode Screen, Opacity 70% – vệt mưa trắng xiên đều khắp cảnh.
  10. Mưa – mặt đất ướt: layer Screen: vài vũng nước elip dẹt màu #bcd2e6 trên đường đất, kèm vệt phản chiếu mờ của mái đỏ ngay dưới nhà. Mặt đất ướt "phản chiếu trời" là dấu hiệu mưa thuyết phục nhất.
  11. Layer Comps: WindowCửa sổ›Layer Comps. Chỉ bật BASE + NGAY → Create New Layer Comp tên Ngay (đánh dấu Visibility). Lặp lại cho Dem (BASE + DEM) và Mua (BASE + MUA).
  12. Thử sửa cảnh gốc: mở khóa BASE, thêm một hàng rào nhỏ. Bấm qua 3 Layer Comps – hàng rào xuất hiện ở cả ba và tự nhận ánh sáng đêm, màu mưa. Đây chính là lý do làm "không phá hủy".
  13. Xuất cùng lúc: FileTệp›Export›Layer Comps to Files, File Type PNG-24 (bỏ Transparency (Độ trong suốt)) hoặc JPEG Quality 10 → village_Ngay, village_Dem, village_Mua, mỗi file 1920 × 1080.
  14. Đưa vào Unity 6: 3 ảnh để Texture Type Sprite (2D and UI), Pixels Per Unit (Số pixel mỗi đơn vị) 100, Max Size 2048. Tạo 3 SpriteRenderer chồng nhau cùng vị trí trên Sorting Layer Background; chuyển ngày → đêm bằng cách tăng dần alpha của SpriteRenderer › Color bản đêm từ 0 lên 1 trong vài giây (Animation hoặc script). Mưa thật hơn khi thêm Particle System rơi xiên phía trước, dùng chính vệt mưa bạn tạo làm texture.
Mẹo: Đặt tên layer chỉnh bắt đầu bằng tên Group ("DEM Curves", "MUA Mây") – khi file có 30 layer, bạn biết ngay layer nào thuộc biến thể nào, và không vô tình bật đèn đêm trong bản ban ngày.
Lỗi hay gặp: Làm bản đêm bằng cách giảm Brightness của cả ảnh. Cảnh chỉ tối đi và xám xịt, không có cảm giác đêm. Đêm cần đổi nhiệt độ màu (xanh tím qua Multiply) và có nguồn sáng ấm (đèn, trăng) – tương phản nóng lạnh mới tạo không khí.

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

  • Hoàng hôn: biến thể thứ tư: Gradient Map (Ánh xạ dải màu) cam – tím Blend Mode Soft Light (Ánh sáng dịu), mặt trời hạ thấp sau đồi, bóng đổ kéo dài.
  • Sương sớm: layer Screen trắng xanh Opacity 40% dày ở chân đồi, mờ dần lên trên – che bớt cảnh xa tạo chiều sâu.
  • Ánh sáng 2D thật: nếu dự án dùng URP 2D, thử giữ bản ngày làm sprite duy nhất và dùng Global Light 2D (giảm Intensity, đổi màu xanh) cộng vài Spot Light 2D ở cửa sổ – so sánh với cách vẽ sẵn trong bài.

Mẹo & trick học nhanh

Kiểm tra bằng trắng đen

Thêm tạm Hue/Saturation Saturation −100 trên cùng và bấm qua 3 Layer Comps. Bản đêm vẫn phải đọc được hình khối – nếu chỉ còn một mảng đen, giảm Opacity lớp Multiply.

Chọn vùng trên layer khác

Magic Wand với Sample All Layers chọn được cửa sổ trong Group BASE dù bạn đang đứng ở Group DEM. Sau đó tạo layer mới và tô – không động tới cảnh gốc.

Cập nhật Layer Comp

Nếu thêm layer mới vào DEM sau khi đã tạo comp, chọn comp Dem và bấm Update Layer Comp (biểu tượng mũi tên vòng) để comp ghi nhớ trạng thái mới.

Kiểm tra nhanh

1 Vì sao nên làm biến thể đêm bằng Solid Color Multiply thay vì vẽ lại cảnh?
2 Blend Mode nào hợp nhất để tô ánh đèn cửa sổ phát sáng trong bản đêm?
3 Chuỗi lệnh nào tạo vệt mưa xiên?
4 Cách nhanh nhất để xuất cả ba biến thể thành ba file?

Bài tập: Ba biến thể của một cảnh nề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