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

Dự án 10: Rừng thần tiên phát sáng (nấm, đom đóm)

Vẽ cảnh rừng đêm 1920 × 1080 px với thân cây nhiều lớp, tia sáng xiên, lối mòn chữ S, nấm phát sáng ngọc – hồng và đom đóm, luyện bố cục dẫn mắt và các chế độ phát sáng, rồi thêm Particle System đom đóm và Light 2D trong Unity 6.

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

Rừng thần tiên là cảnh mà ánh sáng đến từ chính khu rừng: nấm phát quang, đom đóm, tia trăng lọt qua tán lá. Nền phải tối và lạnh để những nguồn sáng nhỏ này rực lên. Bài học quan trọng nhất là dẫn mắt: một lối mòn chữ S đưa người xem từ mép dưới vào sâu trong rừng, một cây nấm lớn nhất – sáng nhất làm điểm dừng, và các thân cây tối hai bên làm khung. Bạn sẽ dùng nhiều chế độ hòa trộn hơn bất kỳ bài nào trước đó.

Hình mẫu

Rừng đêm: thân cây xa xanh tím, thân cây gần có viền sáng ngọc, tán lá tối, hai tia sáng xiên, lối mòn chữ S, nấm phát sáng màu ngọc và hồng, lá dương xỉ tối ở tiền cảnh và đom đóm vàng
Rừng đêm: thân cây xa xanh tím, thân cây gần có viền sáng ngọc, tán lá tối, hai tia sáng xiên, lối mòn chữ S, nấm phát sáng màu ngọc và hồng, lá dương xỉ tối ở tiền cảnh và đom đóm vàng

Thời gian ước tính: khoảng 3 giờ. Hãy đếm: chỉ có hai màu phát sáng chính (ngọc #5ff2d8 và hồng #ff7ad9) cộng vàng của đom đóm. Nhiều màu phát sáng hơn sẽ biến khu rừng thành sàn nhảy.

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) (L), Brush (Cọ vẽ) Tool (B) cứng và mềm, Gradient (Dải màu chuyển) Tool (G), Pen Tool (Bút tạo đường) cho lối mòn, Layer Mask (Mặt nạ lớp), chế độ Screen, Color Dodge (Làm sáng rực), Linear Dodge (Add) (Cộng sáng), Overlay (Phủ chồng); Brush Settings (Cài đặt cọ) › Scattering (Tán xạ) cho đom đóm.
  • Thiết bị: bút Wacom, XP-Pen, Huion hay iPad cho tán lá và viền sáng mềm mại nhất: bật Transfer › Opacity (Độ mờ đục) Jitter › Control: Pen Pressure (Lực nhấn bút) để quét glow nhẹ tay. Dùng chuột: dựng khối bằng Lasso, phát sáng bằng Brush mềm cỡ to chấm từng cái (không kéo), đom đóm bằng Brush có Scattering – kết quả gần như nhau.
  • File mẫu: "Khung bố cục rừng": dải xanh là lối mòn chữ S, vòng hồng là điểm nhấn (cây nấm lớn), nét vàng là hướng tia sáng, dải xám hai bên là khung tối.
MàuMã hexDùng cho
#1a1440Trời đêm, nền xa nhất
#2f4a7aCây xa
#24304fCây gần
#1f5a4aMặt đất
#4a7a6aLối mòn
#5ff2d8Nấm ngọc, viền sáng
#ff7ad9Nấm hồng
#ffe14dĐom đóm
#0f2a2aTiền cảnh tối nhất

Các bước

Sáu giai đoạn: thumbnail 3 tông, khối lớn, màu nền theo lớp, đổ bóng, phát sáng nấm và tia sáng, đom đóm
Sáu giai đoạn: thumbnail 3 tông, khối lớn, màu nền theo lớp, đổ bóng, phát sáng nấm và tia sáng, đom đóm
  1. Thumbnail: file 384 × 216 px, 3 tông xám. Vẽ khung tối hai bên, lối mòn sáng vừa đi từ mép dưới vào giữa, một chấm trắng là cây nấm lớn ở giao điểm 1/3. Làm 3 phương án, chọn cái có đường dẫn mắt rõ nhất.
  2. Tạo file và nền: FileTệp›NewTạo mới, 1920 × 1080 px. Đặt file khung bố cục, Opacity 40%, khóa. Layer Sky: Gradient Linear từ #1a1440 (trên) xuống #1f4a5a (dưới) – chân trời hơi sáng và ngả xanh lục giúp thân cây xa tách khỏi nền.
  3. Cây xa (Group FAR): Rectangle Tool vẽ 6–8 thân cây thẳng mảnh #2f4a7a, tán là các elip dẹt cùng màu. Không viền, không chi tiết – cây xa chỉ là bóng dáng. Thêm layer kẹp Screen tô nhẹ #1f4a5a ở phần dưới để chân cây chìm vào sương.
  4. Cây gần (Group MID): hai thân cây lớn #24304f ở hai mép theo dải xám của file mẫu, thân hơi loe ở gốc, có rễ bám đất. Tán lá trên cùng tô #1f3a4f phủ kín mép trên – tạo "trần" cho khu rừng. Hai thân cây này là khung của cảnh.
  5. Mặt đất và lối mòn: layer Ground: Lasso vẽ mặt đất gợn sóng #1f5a4a, dải dưới cùng tối hơn #163f36. Pen Tool vẽ lối mòn chữ S theo dải xanh của file mẫu: rộng ở mép dưới, hẹp dần khi vào sâu (phối cảnh). Fill #4a7a6a.
  6. Tia sáng xiên: layer Rays chế độ Screen: Polygonal Lasso (Thòng lọng đa giác) vẽ 2 dải hình thang theo nét vàng (hẹp trên, rộng dưới), Gradient từ #b8fff0 Opacity 35% xuống trong suốt. Mọi tia song song nhau – ánh sáng từ một nguồn. FilterBộ lọc›Blur›Gaussian Blur 8 px cho mép tia mềm.
  7. Nấm phát sáng: layer Mushrooms: mỗi cây nấm gồm chân trắng xanh #e8f0e0 và mũ hình vòm. Cây lớn nhất màu ngọc #5ff2d8 đặt đúng vòng hồng; các cây nhỏ hơn, xen kẽ ngọc – hồng, mọc thành cụm 2–3 cây. Đốm trắng trên mũ, mặt dưới mũ tô tối Multiply (Nhân (làm tối)) 25%.
  8. Quầng sáng nấm: layer Mushroom_Glow dưới layer nấm, chế độ Screen: Brush mềm cỡ 3–4 lần mũ nấm, màu cùng mũ, Opacity 50%, chấm một lần. Thêm layer Color Dodge Opacity 40%: tô nhẹ lên đất, rễ cây xung quanh – ánh nấm chiếu lên môi trường mới thuyết phục.
  9. Viền sáng thân cây: layer kẹp vào cây gần, chế độ Screen, Brush cứng 6 px #5ff2d8 Opacity 50%: vẽ một đường viền mảnh ở mép thân cây phía có nấm. Đây là "rim light" – nó tách thân cây tối khỏi nền tối và cho biết nguồn sáng ở đâu.
  10. Đom đóm: Brush tròn mềm 14 px, Brush Settings › Scattering 400% (Both Axes), Count 2, Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) 60%. Màu #ffe14d, chế độ Linear Dodge (Add). Vẽ vài vệt dọc theo lối mòn và quanh tia sáng – đom đóm tụ ở chỗ người chơi sẽ đi qua. Thêm Outer Glow vàng Size 10 px cho layer.
  11. Tiền cảnh: layer Foreground (Màu tiền cảnh) trên cùng: lá dương xỉ lớn ở hai góc dưới, tô #0f2a2a gần như đen. Tiền cảnh tối, to, mờ nhẹ (FilterBộ lọc›Blur›Gaussian Blur 3 px) đẩy mọi thứ khác lùi ra sau.
  12. Chỉnh tổng thể: Adjustment Layer (Lớp điều chỉnh) Gradient Map (Ánh xạ dải màu) hoặc Color Lookup ở chế độ Soft Light (Ánh sáng dịu) Opacity 20% để thống nhất tông; rồi Black & White kiểm tra: lối mòn và cây nấm lớn phải là vùng sáng dễ thấy nhất, khung cây tối nhất. Tắt layer kiểm tra.
  13. Xuất và đưa vào Unity 6: Export As (Xuất ra (tùy chỉnh)) PNG → fairy_forest_bg.png 1920 × 1080 px. Có thể xuất thêm Foreground riêng (nền trong suốt) cho parallax. Unity 6: sprite nền Sorting Layer Background, Foreground ở Foreground. Global Light 2D Intensity 0.4 màu #6a5acd; Spot Light 2D ngọc/hồng tại các cụm nấm. Đom đóm động: GameObject›Effects›Particle System, Start Size 0.05–0.12, Start Color #ffe14d, Shape Box phủ vùng lối mòn, Noise › Strength 0.5 cho bay lượn, Color over Lifetime mờ dần ở hai đầu, material dùng shader Additive.
Mẹo: Vẽ quầng sáng dưới vật phát sáng, không phải trên. Nếu đặt layer glow Screen trên mũ nấm, mũ bị "rửa" thành trắng đục mất màu; đặt dưới thì mũ giữ màu bão hòa và glow tỏa ra xung quanh.
Lỗi hay gặp: Nền đêm đen tuyền #000000. Đêm trong game cần màu: xanh tím, xanh lục đậm. Nền đen hoàn toàn làm mất cảm giác không khí và khiến glow trông như dán lên.

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

  • Phiên bản ban ngày: nhân đôi file, thay Sky bằng gradient xanh lá nhạt, tắt glow, giữ màu nấm – thấy ngay ánh sáng quan trọng thế nào với không khí.
  • Nấm phát sáng theo nhịp: xuất mỗi cụm Mushroom_Glow thành sprite riêng, trong Unity cho Alpha dao động lệch pha nhau – rừng "thở".
  • Lối mòn tương tác: xuất lối mòn thành sprite riêng có viền sáng; khi người chơi đi qua, script tăng Intensity của Spot Light 2D gần đó – nấm "thức dậy" theo bước chân.

Mẹo & trick học nhanh

Lối mòn hẹp dần là phối cảnh

Lối mòn rộng ở mép dưới và hẹp dần khi vào sâu cho mắt biết đâu là gần – xa mà không cần vẽ đường chân trời. Uốn chữ S để mắt đi chậm qua cả khu rừng.

Glow đặt dưới vật

Layer quầng sáng Screen nằm dưới vật phát sáng, layer Color Dodge chiếu lên môi trường nằm trên mặt đất – hai lớp này đủ cho mọi vật phát sáng.

Đom đóm bằng Scattering

Brush mềm 14 px với Scattering 400% và Size Jitter 60%: một nét kéo tạo ra cả đàn đom đóm lớn nhỏ ngẫu nhiên, chuột cũng làm được.

Kiểm tra nhanh

1 Lối mòn chữ S trong cảnh rừng có tác dụng chính là gì?
2 Layer quầng sáng của nấm nên đặt ở đâu so với layer nấm?
3 Vì sao không nên dùng đen tuyền #000000 cho nền đêm?

Bài tập: Khu rừng phát sáng 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