Dự án 13: Cảnh dungeon hang động 16:9
Vẽ cảnh nền hang động cho game nhập vai 1920 × 1080 px: bố cục value trắng đen, lớp xa – giữa – gần tối dần, ánh đuốc ấm và pha lê lạnh làm hai điểm sáng dẫn mắt.
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.
Tải về rồi mở bằng Photoshop: (⌘ Cmd+O).
Dungeon (hầm ngục, hang động) là nơi người chơi dành nhiều giờ trong game nhập vai. Cảnh tối nhưng phải đọc được: người chơi cần thấy lối đi, cửa ra và nơi nguy hiểm. Bí quyết không nằm ở chi tiết mà ở value (độ sáng tối): cảnh tối chủ đạo, vài điểm sáng được đặt có chủ đích để dẫn mắt. Đây là dự án vẽ cảnh đầy đủ đầu tiên của bạn theo quy trình concept art.
Hình mẫu
Thời gian ước tính: khoảng 5 giờ: 30 phút thumbnail value, 1,5 giờ mảng khối, 2 giờ ánh sáng, 1 giờ chi tiết và chỉnh màu.
Chuẩn bị
- Canvas: 1920 × 1080 px, RGB Color. Ghi chú: nếu game dùng làm nền cuộn ngang, hãy vẽ rộng 3840 px và chia layer theo lớp xa – giữa – gần.
- Brush (Cọ vẽ): Hard Round cho mảng khối; Soft Round (cọ mềm) chỉ dùng cho ánh sáng và sương; Lasso (Dây thòng lọng) (L) để vẽ khối đá sắc cạnh.
- Thiết bị: ánh sáng và sương cần chuyển mềm – lực nhấn điều khiển Opacity (Độ mờ đục) rất tiện. Bút XP-Pen/Huion/Wacom: F5 › Transfer › Opacity Jitter › Control: Pen Pressure (Lực nhấn bút). Chuột: dùng phím số để đổi Opacity khi đang cầm Brush (5 = 50%, 1 = 10%), tô nhiều lớp mỏng. iPad qua Sidecar/Astropad: Apple Pencil (Bút chì) hỗ trợ lực nhấn như bút.
- Kiểm tra value: Adjustment Layer (Lớp điều chỉnh) Black & White đặt trên cùng, bật tắt thường xuyên.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#1a1626 | Nền xa nhất | |
#2a2340 | Lớp đá xa, thạch nhũ | |
#3a3052 | Vách giữa | |
#4a3d5e | Nền đất | |
#120f1b | Tiền cảnh (khung tối) | |
#ff9f43 | Ánh đuốc | |
#ffd23f | Lõi lửa | |
#4de1ff | Pha lê, cổng phát sáng | |
#8a7fb0 | Sương |
Các bước
- Ba thumbnail value: file nháp 960 × 540 px, chia 3 ô. Mỗi ô vẽ trong 5 phút chỉ bằng 3–4 màu xám: một bố cục cửa vòm giữa, một bố cục cầu thang, một bố cục hành lang. Chọn bản mà điểm sáng nhất (cửa ra) nổi bật nhất khi nheo mắt.
- Tạo file chính: ⌘ Cmd+N 1920 × 1080 px. Kéo thumbnail đã chọn vào, phóng to phủ kín canvas, Opacity 30% làm nền tham chiếu.
- Mảng xám theo lớp: mỗi lớp một layer, vẽ bằng Lasso + ⌥ Option+⌫ Delete: BG (xám sáng vừa), Far (thạch nhũ và đá xa), Mid (vách hai bên), Floor (nền đất), Near (đá tiền cảnh tối nhất ở góc dưới). Cổng vòm sáng nhất. Chỉ 4–5 mức xám.
- Chuyển sang màu lạnh: bật Lock Transparent Pixels (Khóa vùng trong suốt) (/) cho từng layer, tô lại toàn layer bằng màu trong bảng (⌥ Option+⌫ Delete vẫn chỉ tô vào vùng có pixel). Lớp xa tím nhạt hơn, lớp gần tối hơn – phối cảnh không khí trong hang.
- Cổng vòm phát sáng: layer Portal: hình vòm màu
#2f6a8a, bên trong một vòm nhỏ hơn#5fd4f0. Layer Portal Glow blend mode Linear Dodge (Add) (Cộng sáng), Soft Round lớn màu#4de1ffOpacity 30% tô quanh cổng. - Đuốc và nguồn sáng ấm: layer Torch: cán gỗ, giá kim loại, ngọn lửa hai lớp (cam ngoài, vàng trong) có viền. Layer Torch Glow ở chế độ Overlay (Phủ chồng): Soft Round rất lớn màu
#ff9f43tô quanh đuốc – vách đá gần đó ấm lên. - Rim light theo nguồn sáng: layer kẹp vào Mid và Floor, Hard Round 6 px màu cam nhạt: vẽ viền sáng mảnh trên các mép đá hướng về phía đuốc. Mép đá hướng về cổng thì viền xanh. Hai màu viền cho người xem biết ánh sáng đến từ đâu.
- Pha lê – điểm sáng thứ hai: cụm 3–5 tinh thể lục giác dài ở bên phải nền đất, màu
#4de1ff, nửa phải tối#1f8fb8, vệt trắng mảnh dọc cạnh sáng. Thêm glow Linear Dodge (Làm sáng) như cổng. Đặt pha lê đối xứng thị giác với đuốc: một bên ấm, một bên lạnh. - Sương: layer Mist nằm giữa Floor và Near: Soft Round màu
#8a7fb0Opacity 10–15%, kéo thành dải ngang sát mặt đất. Sương tách lớp giữa và lớp gần, tăng chiều sâu. - Kiểm tra value: bật Black & White. Thứ tự sáng nhất phải là: cổng → lửa → pha lê → mọi thứ khác. Nếu vách đá sáng ngang lửa, dùng Curves (⌘ Cmd+M) trên layer vách để kéo tối.
- Chi tiết vừa đủ: vài giọt nước từ thạch nhũ, tia lửa nhỏ bay lên từ đuốc, vài hạt sáng quanh pha lê. Chi tiết tập trung gần điểm sáng; góc tối để trống cho mắt nghỉ.
- Vignette: , Style Radial, từ trong suốt ở giữa ra đen ở góc, bật Reverse nếu cần, blend mode Multiply (Nhân (làm tối)), Opacity 50%. Góc tối kéo mắt vào trung tâm.
- Chỉnh màu tổng: Adjustment Layer Color Balance (Cân bằng màu) trên cùng: Shadows ngả xanh tím nhẹ, Highlights ngả cam nhẹ – thống nhất bảng màu nóng lạnh. Lưu PSD.
- Xuất và đưa vào Unity 6: xuất
dungeon_bg.pngbản gộp. Nếu làm nền nhiều lớp: gom layer thành Group Far – Mid – Near, (hoặc Export As (Xuất ra (tùy chỉnh)) từng Group). Trong Unity: Texture Type Sprite (2D and UI), Max Size 2048, Filter Mode (Chế độ lọc ảnh) Bilinear, Compression Normal Quality; mỗi lớp một Sprite Renderer với Order in Layer tăng dần từ xa tới gần. Có thể đặt thêm một Light 2D (URP) kiểu Point màu cam ở vị trí đuốc cho nhân vật cũng được chiếu sáng.
Nâng cao (tùy chọn)
- Phiên bản "bị phong ấn": nhân đôi file, đổi cổng sang đỏ tía, tắt đuốc, thêm sương xanh lục – cùng bố cục, cảm xúc hoàn toàn khác.
- Lớp tiền cảnh cuộn: vẽ thêm đá và xích treo ở layer Near riêng, rộng 3840 px, để cuộn nhanh hơn nền (parallax).
- Lối đi có thể chơi: vẽ một bậc đá nổi bật màu sáng hơn nền để gợi ý đường đi cho người chơi (level design bằng ánh sáng).
Mẹo & trick học nhanh
Bấm / để bật Lock Transparent Pixels cho layer: tô bao nhiêu cũng chỉ ăn vào vùng đã có pixel – cách đổi màu cả một khối đá trong một giây.
Glow mạnh dùng Linear Dodge (Add), ánh sáng ấm lan trên bề mặt dùng Overlay hoặc Soft Light, bóng tối dùng Multiply. Mỗi loại một layer riêng để dễ chỉnh Opacity.
Thu nhỏ màn hình về 25% hoặc nheo mắt: chi tiết biến mất, chỉ còn mảng sáng tối. Nếu không thấy ngay đâu là điểm nhấn, bố cục value chưa đạt.