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

Dự án 11: Đáy biển và xác tàu đắm

Vẽ cảnh đáy biển 1920 × 1080 px có xác tàu gỗ, tia sáng từ mặt nước, rong biển, san hô và đàn cá, luyện quy tắc "càng sâu càng tối và xanh" bằng lớp nước phủ (haze) theo độ sâu, rồi tạo cảm giác dưới nước bằng Light 2D và hạt bong bóng trong Unity 6.

Nâng cao 180 phút ★★★ Vừa 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).

Dưới nước, ánh sáng bị nước "ăn" rất nhanh: màu đỏ mất trước tiên, rồi cam, vàng – chỉ còn xanh lam. Vì vậy cảnh đáy biển có một quy tắc rất rõ: càng sâu càng tối và càng xanh, càng xa càng bị phủ màu nước. Đây chính là phối cảnh không khí (atmospheric perspective) nhưng mạnh gấp nhiều lần. Bài này dạy bạn dùng một lớp haze (lớp nước phủ) theo độ sâu, tia sáng từ mặt nước và cách giữ màu ấm cho vài điểm nhấn gần camera.

Hình mẫu

Đáy biển: nước xanh ngọc sáng ở trên chuyển xanh thẫm ở đáy, tia sáng xiên từ mặt nước, xác tàu gỗ nghiêng có cột buồm gãy và buồm rách, đá xa mờ, cát gợn sóng, rong biển, san hô, đàn cá, bong bóng và rương lấp lánh
Đáy biển: nước xanh ngọc sáng ở trên chuyển xanh thẫm ở đáy, tia sáng xiên từ mặt nước, xác tàu gỗ nghiêng có cột buồm gãy và buồm rách, đá xa mờ, cát gợn sóng, rong biển, san hô, đàn cá, bong bóng và rương lấp lánh

Thời gian ước tính: khoảng 3 giờ. Để ý xác tàu: thân tàu nâu ấm nhưng phần đáy chìm trong lớp nước phủ xanh – nó "nằm trong" nước chứ không dán lên trên. San hô cam và cá vàng gần camera giữ màu ấm vì ánh sáng đi qua ít nước hơn.

Chuẩn bị

  • Canvas: 1920 × 1080 px (16:9), Resolution (Độ phân giải) 72, RGB Color.
  • Công cụ chính: Gradient (Dải màu chuyển) Tool (G), Pen Tool (Bút tạo đường) (P) cho thân tàu, Lasso (Dây thòng lọng) (L), Brush (Cọ vẽ) Tool (B), FilterBộ lọc›Render›Clouds và FilterBộ lọc›Distort›Ripple cho vệt sáng gợn nước (caustics), EditChỉnh sửa›TransformBiến đổi›WarpUốn cong cho rong biển, chế độ Screen, Overlay (Phủ chồng), Multiply (Nhân (làm tối)).
  • Thiết bị: rong biển và san hô hưởng lợi nhiều nhất từ bút Wacom, XP-Pen, Huion hay iPad – một nét bút có lực nhấn (Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút)) tạo cọng rong thon tự nhiên. Dùng chuột: vẽ một cọng rong bằng Pen Tool, nhân đôi và biến dạng bằng Warp (Uốn cong) cho từng cọng khác nhau.
  • File mẫu: "Khung độ sâu": 3 dải xanh đậm dần là 3 vùng nước, nét vàng là tia sáng (cùng một góc), đường hồng là mặt cát, khung hồng là chỗ đặt xác tàu ở 2/3 phải.
MàuMã hexDùng cho
#3fc1d9Nước gần mặt
#1a6f9aNước giữa, lớp haze
#0c2e52Nước sâu, đáy
#2a6a8aĐá xa
#6e4a3aThân tàu
#c8bba0Buồm rách
#d9c08aCát
#3a9a5aRong biển
#ff7a6bSan hô gần camera

Các bước

Sáu giai đoạn: thumbnail 3 tông, khối lớn, màu nền theo độ sâu, đổ bóng và lớp nước phủ, tia sáng, cá và bong bóng
Sáu giai đoạn: thumbnail 3 tông, khối lớn, màu nền theo độ sâu, đổ bóng và lớp nước phủ, tia sáng, cá và bong bóng
  1. Thumbnail: 384 × 216 px, 3 tông: trên sáng, giữa vừa, đáy tối; xác tàu là một khối nghiêng tối vừa ở 2/3 phải, mũi chúc xuống cát. Thử 2–3 góc nghiêng tàu, chọn góc tạo đường chéo mạnh nhất.
  2. Nước theo độ sâu: FileTệp›NewTạo mới 1920 × 1080 px, đặt file khung. Layer Water: Gradient Linear 3 điểm màu #3fc1d9 → #1a6f9a → #0c2e52 từ trên xuống. Đây là "bầu trời" của cảnh dưới nước.
  3. Đá xa: layer Far_Rocks: Lasso vẽ hai cụm đá xa lô nhô #2a6a8a – gần như cùng màu nước, chỉ đậm hơn một chút. Không viền, không chi tiết: vật ở xa dưới nước gần như tan vào nước.
  4. Xác tàu – khối chính: layer Ship: Pen Tool vẽ thân tàu hình thuyền nghiêng 10–15°, mũi chúc xuống, Fill #6e4a3a, Stroke 4 px #2a1a14. Hai cột buồm gãy nghiêng lệch nhau, một mảnh buồm rách #c8bba0 vẽ bằng Pen Tool có mép răng cưa.
  5. Chi tiết tàu: layer kẹp: 2 đường ván dọc thân #4a2e24, 3 lỗ cửa sổ tròn tối, một vệt sáng mảnh #a8785a dọc mép mạn tàu phía trên (ánh sáng từ mặt nước chiếu xuống). Phần thân dưới tô Multiply #4a2e24 – mặt khuất sáng.
  6. Lớp nước phủ (haze) cho tàu: layer mới kẹp vào Ship, Gradient Linear từ trong suốt (trên) tới #1a6f9a Opacity (Độ mờ đục) 55% (dưới). Phần đáy tàu – sâu hơn – bị nước phủ nhiều hơn. Bước này biến con tàu từ "hình dán" thành vật nằm trong nước.
  7. Đáy cát: layer Sand: Lasso vẽ mặt cát gợn theo đường hồng, Fill #d9c08a; dải dưới cùng tối #b8a070. Gợn cát: Brush 4 px #f1e0b0 vẽ những đường cong ngắn song song. Thêm haze nhẹ cho phần cát xa (Gradient #1a6f9a 30% từ đường chân cát lên).
  8. Tia sáng: layer God_Rays chế độ Screen: Polygonal Lasso (Thòng lọng đa giác) vẽ 3 dải hẹp trên – rộng dưới theo nét vàng, Gradient #e6fbff 45% xuống trong suốt, Gaussian Blur 10 px. Tia đi qua thân tàu tạo vệt sáng trên mạn tàu – rất "điện ảnh".
  9. Caustics (vệt gợn sáng): layer mới, FilterBộ lọc›Render›Clouds đen trắng, rồi FilterBộ lọc›Distort›Ripple Amount 300% Size Large; ⌘ Cmd+L kéo Levels cho chỉ còn các đường sáng mảnh. Chế độ Screen, Opacity 25%, Layer Mask (Mặt nạ lớp) chỉ giữ trên mặt cát và mạn tàu.
  10. Rong biển và san hô: layer Seaweed: các cọng rong cao thấp ở hai mép #3a9a5a/#4fb06a, cong như đang đung đưa. San hô cành #ff7a6b và một cụm tím gần camera – vì gần camera nên giữ màu ấm, bão hòa, viền rõ.
  11. Đàn cá và điểm nhấn: đàn cá xa là bóng tối #0c3a5c Opacity 80% (5–7 con cùng hướng); một con cá cam gần camera có viền và mắt. Rương nhỏ hé mở ở chân tàu với tia lấp lánh vàng – gợi ý phần thưởng.
  12. Bong bóng và kiểm tra: Brush tròn cứng 6–14 px, chỉ vẽ viền (Ellipse Tool Stroke 2 px trắng 70%, Fill none) – chuỗi bong bóng từ khoang tàu bay lên, nhỏ dần lên trên. Bật Black & White: cảnh phải sáng trên, tối dưới; tàu tách khỏi nền nhờ value, không chỉ nhờ màu.
  13. Xuất và đưa vào Unity 6: Export As (Xuất ra (tùy chỉnh)) PNG → seabed_bg.png 1920 × 1080 px; nếu làm parallax, xuất thêm Seaweed và San hô (nền trong suốt) làm lớp tiền cảnh. Unity 6: Global Light 2D màu #5fb8d9 Intensity 0.7 cho cả cảnh ngả xanh; một Freeform Light 2D hình thang mờ làm tia sáng từ trên. Bong bóng: Particle System với Shape Cone hướng lên, Gravity Modifier −0.05, Size over Lifetime tăng dần, đặt ở khoang tàu. Rong biển đung đưa: Animation xoay ±4° với Pivot (Điểm neo) ở gốc.
Mẹo: Muốn kiểm tra "vật có nằm trong nước không", che mờ mắt nhìn ảnh: vật ở xa phải gần như cùng màu nước. Nếu một tảng đá xa vẫn nổi bật với màu nâu riêng, thêm lớp haze kẹp vào nó cho tới khi nó lùi về đúng chỗ.
Lỗi hay gặp: Dùng màu đỏ, vàng đậm cho vật ở xa dưới đáy biển. Nước đã "ăn" hết màu ấm ở khoảng cách đó. Màu ấm chỉ dành cho vật gần camera hoặc gần mặt nước.

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

  • Vực sâu: nhân đôi cảnh, tối toàn bộ bằng Curves, tắt tia sáng, thêm vài sinh vật phát quang xanh – cùng tàu đắm nhưng ở tầng nước sâu hơn.
  • Caustics động: xuất lớp caustics thành ảnh 512 × 512 px lặp liền mạch (FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) để kiểm tra), trong Unity dùng làm Sprite Light 2D trượt chậm trên cát.
  • Khoang tàu bên trong: vẽ thêm cảnh 1920 × 1080 bên trong khoang: tối hơn, chỉ có tia sáng qua lỗ thủng – màn chơi khám phá tiếp theo.

Mẹo & trick học nhanh

Một lớp haze cho mỗi độ sâu

Mỗi vật (hoặc Group vật) có một layer kẹp Gradient màu nước #1a6f9a; vật càng xa Opacity càng cao (20% gần, 50% giữa, 80% xa). Thứ tự độ sâu trở nên rõ ràng ngay.

Tia sáng cùng một góc

Mặt trời chỉ có một, nên mọi tia sáng dưới nước song song nhau. Vẽ một tia, nhân đôi và dời ngang thay vì vẽ mỗi tia một hướng.

Màu ấm ở gần, màu lạnh ở xa

San hô cam, cá vàng đặt ở tiền cảnh. Nhờ quy tắc này, người chơi đọc được khoảng cách chỉ bằng màu.

Kiểm tra nhanh

1 Vì sao vật ở xa dưới đáy biển gần như cùng màu nước?
2 Lớp haze kẹp vào xác tàu được tô thế nào?
3 Chuỗi filter nào tạo vệt gợn sáng (caustics) nhanh?

Bài tập: Cảnh đáy biển 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