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 › Dự án vẽ theo cấp độ › Bài 66/158

Dự án 14: Cảnh nền parallax 3 lớp

Vẽ cảnh nền 1920 × 1080 px cho game cuộn ngang gồm 3 lớp xa – giữa – gần, dùng phối cảnh không khí, nối liền mép trái – phải và xuất từng lớp PNG.

Trung cấp 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).

Trong game cuộn ngang, khi nhân vật chạy, nền không di chuyển như một tấm ảnh phẳng: núi xa trôi chậm, đồi giữa trôi vừa, bụi cỏ gần lướt nhanh. Hiệu ứng này gọi là parallax (thị sai) và tạo chiều sâu rất mạnh. Nhiệm vụ của họa sĩ: vẽ cảnh thành các lớp tách rời, mỗi lớp lặp liền mạch theo chiều ngang.

Hình mẫu

Cảnh hoàng hôn: trời tím cam, núi xa tím nhạt, đồi xanh có cây thông, đất và bụi gần màu đậm, kèm ba lớp tách riêng
Cảnh hoàng hôn: trời tím cam, núi xa tím nhạt, đồi xanh có cây thông, đất và bụi gần màu đậm, kèm ba lớp tách riêng

Thời gian ước tính: khoảng 4 giờ.

Chuẩn bị

  • Canvas: 1920 × 1080 px (Full HD, tỉ lệ 16:9), RGB.
  • Brush (Cọ vẽ): Hard Round cỡ lớn cho mảng; Soft Round cho trời và sương.
  • File mẫu: "Khung bố cục parallax" ở cuối bài – mở và kéo vào file làm layer trên cùng để biết vị trí đường chân trời của từng lớp.
  • Nguyên tắc phối cảnh không khí (atmospheric perspective): càng xa càng nhạt, càng ngả màu trời, càng ít tương phản và ít chi tiết.
MàuMã hexDùng cho
#4b5bd4Trời cao
#a78bfaTrời giữa
#ffb38aChân trời (hoàng hôn)
#8b7fd6Núi xa (lớp Far)
#4f9d8aĐồi giữa (lớp Mid)
#2c5a4aĐất gần (lớp Near)
#1f3f38Bụi gần, đậm nhất
#ffe8a3Mặt trời, đom đóm

Các bước

Parallax: bố cục value 4 sắc độ, trời và lớp xa, lớp giữa, lớp gần, không khí, hoàn thiện
Parallax: bố cục value 4 sắc độ, trời và lớp xa, lớp giữa, lớp gần, không khí, hoàn thiện
  1. Tạo file Ctrl+N 1920 × 1080 px. Mở file khung mẫu, kéo vào bằng Move V (giữ Shift để căn giữa) và đặt tên layer Guide, khóa lại (biểu tượng ổ khóa).
  2. Bố cục value (sắc độ): layer Value: chỉ dùng 4 màu xám – trời sáng nhất, núi xa xám nhạt, đồi giữa xám vừa, lớp gần gần đen. Vẽ nhanh bằng Lasso (Dây thòng lọng) + Alt+Backspace trong 10 phút. Nếu bức xám đã có chiều sâu, bức màu chắc chắn sẽ có.
  3. Tạo cấu trúc Group: tạo 4 Group (Ctrl+G) từ dưới lên: Sky, Far, Mid, Near. Mọi thứ của lớp nào vẽ trong Group đó – bước xuất sẽ rất nhẹ nhàng.
  4. Trời: trong Sky, chọn Gradient (Dải màu chuyển) Tool (G), kiểu Linear, bấm vào thanh gradient trên Options để mở Gradient Editor, đặt 3 điểm màu #4b5bd4 → #a78bfa → #ffb38a. Giữ Shift kéo từ trên xuống. Mặt trời: Elliptical Marquee (Khung chọn) tròn tô #ffe8a3, thêm quầng Soft Round cùng màu, blend mode Screen. Mây: vài hình bầu dục trắng Opacity (Độ mờ đục) 40%.
  5. Lớp xa – núi: trong Far, Polygonal Lasso (Thòng lọng đa giác) vẽ dãy núi răng cưa kéo dài hết bề ngang, tô #8b7fd6. Mặt phải mỗi đỉnh tô tối hơn (#5f53b8 Opacity 70%), đỉnh cao có tuyết #e4dbff. Chỉ vậy – lớp xa càng ít chi tiết càng tốt.
  6. Lớp giữa – đồi và cây: trong Mid, Lasso vẽ các đường đồi cong mềm, tô #4f9d8a. Cây thông: Polygonal Lasso vẽ 2 tam giác chồng nhau, tô #3c7f73; vẽ một cây rồi nhân đôi (Ctrl+J), co giãn Ctrl+T 70–130% và rải trên đỉnh đồi. Chân đồi phủ một dải tối hơn để tách với lớp gần.
  7. Lớp gần – đất và bụi: trong Near, mặt đất (nơi nhân vật chạy) là dải #2c5a4a ở đáy màn hình. Bụi cây to #1f3f38 ở mép trái, một tảng đá #3b4a55 bên phải. Lớp gần có tương phản mạnh nhất và chi tiết rõ nhất.
  8. Nối liền mép trái – phải: với mỗi lớp Far, Mid, Near: nhân đôi Group (Ctrl+J), ẩn Group gốc, chuột phải bản sao › Merge Group (Ctrl+E) để gộp thành một layer, rồi chạy FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) Horizontal 960, Vertical 0, Wrap Around. Vẽ nối lại đường núi/đồi ở giữa cho liền. Đường chân núi ở mép trái và mép phải phải có cùng độ cao.
  9. Không khí: layer Haze trên Far (Clipping Mask (Mặt nạ cắt) vào layer núi), màu #ffb38a, Opacity 20% – núi xa ám màu trời hoàng hôn. Tia nắng: layer Rays trên Mid, Polygonal Lasso vẽ 3 tam giác dài tỏa từ mặt trời, tô #fff1c1, blend mode Screen, Opacity 8–10%.
  10. Chi tiết lớp gần: cỏ nhọn trên mép đất, 2 bông hoa nhỏ, đom đóm là chấm #ffe8a3 kèm quầng Linear Dodge (Add) (Cộng sáng). Chim xa trên trời chỉ là dấu "v" mảnh màu tối.
  11. Kiểm tra độ sâu: thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) (Saturation −100) trên cùng: 4 dải sáng – tối phải xếp đúng thứ tự như bản Value. Nhân vật (lấy sprite ở dự án 13 đặt thử) phải nổi rõ trên lớp giữa.
  12. Xuất từng lớp: ẩn Guide và layer kiểm tra. Với mỗi Group (Sky, Far, Mid, Near), chuột phải › Export As (Xuất ra (tùy chỉnh)), PNG, nhớ tắt Trim (không cắt sát) để mọi lớp giữ nguyên 1920 × 1080 px và thẳng hàng với nhau. Lưu PSD giữ Group.
  13. Dùng trong Unity 6: mỗi PNG là một Sprite (2D and UI) đặt trên một Sorting Layer riêng (Background, Far, Mid, Near). Một script nhỏ dời mỗi lớp theo camera với hệ số 0,2 / 0,5 / 1 (như trong hình mẫu); đặt 2 bản sao nối đuôi nhau để lặp vô tận.
Mẹo: Muốn cảnh mang tâm trạng khác (buổi sáng, ban đêm, bão), chỉ cần đổi gradient trời và màu Haze – các lớp phía trước đều "ăn" theo không khí đó nếu bạn dùng Clipping Mask cho lớp ám màu.
Lỗi hay gặp: Lớp xa có nhiều chi tiết và tương phản như lớp gần – cảnh trở nên phẳng, rối, và nhân vật bị chìm. Hãy giảm tương phản, tăng độ nhạt cho các lớp càng xa.

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

  • Lớp tiền cảnh thứ 4: một lớp lá cây/đá đen mờ ở sát mép màn hình, cuộn nhanh hơn nhân vật (hệ số 1,3) – tăng chiều sâu cực mạnh.
  • Phiên bản ban đêm: đổi trời sang xanh đen, mặt trời thành mặt trăng, bật đom đóm và cửa sổ nhà nấm (dự án 8) ở lớp giữa.
  • Animation mây: tách mây thành lớp riêng cuộn tự động chậm dù camera đứng yên.

Mẹo & trick học nhanh

Offset chỉ chiều ngang

Lớp parallax chỉ cần lặp ngang: FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) với Horizontal bằng nửa bề rộng (960 px) và Vertical 0.

Xuất Group thẳng hàng

Khi chuột phải Group › Export As, bỏ chọn Trim để PNG giữ nguyên khung 1920 × 1080 – các lớp chồng lên nhau khớp tuyệt đối trong engine.

Value trước, màu sau

Bản xám 4 sắc độ là bản đồ chiều sâu. Nếu bản xám đọc rõ xa – gần, việc chọn màu chỉ còn là trang trí.

Kiểm tra nhanh

1 Trong parallax, lớp nào cuộn chậm nhất khi camera di chuyển?
2 Theo phối cảnh không khí, núi ở xa nên được vẽ thế nào?
3 Vì sao mép trái và mép phải của mỗi lớp phải nối liền?

Bài tập: Cảnh nền parallax 3 lớp

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