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 game theo chủ đề › Bài 86/158

Dự án 4: Nền trời mây, mặt trời và đồi

Vẽ nền game casual 1920 × 1080 px phong cách phẳng bằng Gradient, Shape và Pen Tool – mỗi thành phần một layer để đưa từng lớp vào Unity 6.

Nâng cao 60 phút ★★★ Dễ 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 casual (giải đố, chạy vô tận, nông trại) cần nền sáng, sạch, ít chi tiết để nhân vật và vật phẩm nổi bật. Phong cách phẳng (flat) chỉ dùng mảng màu đặc, vài bóng cel và viền sáng – rất hợp với người mới vì gần như toàn bộ làm bằng Shape và Gradient (Dải màu chuyển), sửa được bất cứ lúc nào.

Hình mẫu

Nền trời phẳng: bầu trời chuyển màu, mặt trời có tia, ba đám mây và hai lớp đồi
Nền trời phẳng: bầu trời chuyển màu, mặt trời có tia, ba đám mây và hai lớp đồi

Thời gian ước tính: khoảng 60 phút. Ánh sáng đến từ mặt trời ở trên – phải, nên mặt bóng của đồi và mây nằm phía dưới.

Chuẩn bị

  • Canvas: 1920 × 1080 px (Full HD, tỉ lệ 16:9), RGB Color, Resolution (Độ phân giải) 72.
  • Công cụ chính: Gradient Tool (G), Ellipse Tool và Polygon Tool (U), Pen Tool (Bút tạo đường) (P) chế độ Shape, Brush (Cọ vẽ) (B).
  • Thiết bị: chỉ đàn chim và vài ngọn cỏ cần nét thon. Bút XP-Pen/Huion: mở driver (XPPenPenTablet hoặc HuionTablet), bật Windows Ink (Windows Ink (bút Windows)) để Photoshop nhận lực nhấn. Chuột: vẽ bằng Pen Tool rồi Stroke Path có Simulate Pressure. iPad làm bảng vẽ qua Sidecar hoặc Astropad: Apple Pencil (Bút chì) cho lực nhấn bình thường.
  • File mẫu: "Khung bố cục 1920 × 1080" giúp đặt chân đồi ở đúng tầng xa – giữa – gần.
MàuMã hexDùng cho
#5ab8ffTrời phía trên
#bfe6ffTrời sát chân trời
#ffd23fMặt trời
#ffe27aTia nắng
#ffffffMây
#d6ecffBóng mây
#7fc98fĐồi xa (nhạt, ngả xanh trời)
#4fb35aĐồi gần
#3a8f47Bóng đồi gần
#8be08fViền sáng đỉnh đồi

Các bước

Nền trời: bố cục nhỏ, trời và đồi, mặt trời và mây, bóng đồi, viền sáng, chi tiết
Nền trời: bố cục nhỏ, trời và đồi, mặt trời và mây, bóng đồi, viền sáng, chi tiết
  1. Ba bản phác nhỏ: tạo file nháp 480 × 270 px, vẽ nhanh 3 bố cục bằng mảng xám (vị trí mặt trời, đường đồi). Chọn bản có đường đồi dẫn mắt đẹp nhất và mặt trời không nằm chính giữa.
  2. Tạo file chính: Ctrl+N 1920 × 1080 px. Kéo "Khung bố cục" vào làm layer trên cùng, Opacity (Độ mờ đục) 40%, khóa lại.
  3. Bầu trời bằng Gradient Fill: LayerLớp›New Fill Layer›GradientDải màu chuyển, bấm vào dải gradient, đặt điểm trái #bfe6ff, điểm phải #5ab8ff, Style Linear, Angle 90°. Đặt tên layer Sky. Layer Fill có thể đổi màu lại bất cứ lúc nào bằng cách bấm đúp vào thumbnail.
  4. Đồi xa: Pen Tool P, chế độ Shape, Fill #7fc98f. Bấm – kéo để tạo đường cong mềm chạy ngang qua đường tím của khung mẫu, rồi đi vòng xuống dưới mép canvas và khép hình. Đồi xa nhạt và gần màu trời – đó là phối cảnh không khí (vật càng xa càng nhạt).
  5. Đồi gần: Pen Tool thêm một shape #4fb35a thấp hơn, đỉnh đồi so le với đồi xa (đỉnh này nằm ở chỗ trũng của lớp kia) để hai lớp không song song nhàm chán.
  6. Mặt trời: Ellipse Tool giữ Shift vẽ hình tròn 220 px ở 1/3 trên – phải, Fill #ffd23f, Layer Style Stroke 8 px #f0a92b. Tia nắng: Polygon Tool, trong thanh Options đặt số cạnh (Number of Sides) 12, bấm biểu tượng bánh răng và đặt Star Ratio khoảng 60%, vẽ ngôi sao to hơn mặt trời, Fill #ffe27a, kéo layer xuống dưới mặt trời.
  7. Mây từ hình tròn: vẽ 3–4 hình tròn chồng lên nhau và một Rectangle bo góc làm đáy phẳng, chọn tất cả rồi Ctrl+E gộp thành một shape trắng. Làm 3 đám mây to – vừa – nhỏ; đám nhỏ đặt xa hơn và thấp hơn.
  8. Bóng đồi (Clipping Mask (Mặt nạ cắt)): nhân đôi shape đồi gần (Ctrl+J), đổi màu #3a8f47, dời xuống 50 px, kẹp vào đồi gốc bằng Ctrl+Alt+G. Làm tương tự cho đồi xa với #63ad76. Hai lớp màu tạo khối mà không cần vẽ tay.
  9. Viền sáng đỉnh đồi: bấm đúp vào layer đồi gần mở Layer Style, chọn Inner Shadow: Color #8be08f, Blend Mode (Chế độ hòa trộn) Normal, Opacity 100%, Angle 90°, Distance 8 px, Size 0 – ra một viền sáng chạy theo đúng đỉnh đồi.
  10. Bóng mây và ánh nắng: layer kẹp vào mỗi đám mây, dùng Brush cứng vẽ dải #d6ecff ở phần đáy. Với mặt trời: LayerLớp›Layer Style›Outer Glow màu #fff6c4, Size 120 px, Opacity 50%.
  11. Chi tiết: layer Birds: Brush cứng 6 px, màu #35506b, vẽ 3 con chim hình chữ "v" cong, mỗi con một nét thon hai đầu. Layer Grass: vài ngọn cỏ tam giác nhỏ #2e7d3a dọc đỉnh đồi gần.
  12. Kiểm tra độ tương phản: thêm Adjustment Layer (Lớp điều chỉnh) Black & White trên cùng rồi bật/tắt: trời, đồi xa, đồi gần phải là 3 mức sáng khác nhau rõ. Xóa adjustment trước khi xuất.
  13. Xuất từng lớp: gom layer thành các Group: Sky, Sun, Clouds, Hills Far, Hills Near. Chuột phải từng Group › Export As (Xuất ra (tùy chỉnh)) ra PNG (nền trong suốt), và xuất thêm một bản gộp sky_full.png. Lưu PSD.
  14. Đưa vào Unity 6: Texture Type Sprite (2D and UI), Max Size 2048 (để ảnh 1920 px không bị thu nhỏ), Filter Mode (Chế độ lọc ảnh) Bilinear. Kéo mỗi lớp vào Scene thành Sprite Renderer; ở mục Additional Settings đặt Order in Layer: Sky 0, Sun 1, Hills Far 2, Clouds 3, Hills Near 4. Mây có thể cho trôi chậm bằng một script di chuyển đơn giản.
Mẹo: Muốn nền lặp ngang (game chạy vô tận), chọn layer đồi đã gộp và dùng FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) Horizontal 960 px, Undefined Areas: Wrap Around. Chỗ nối lộ ra giữa ảnh – sửa cho liền rồi Offset (Dịch chuyển (bọc vòng)) ngược lại -960.
Lỗi hay gặp: Đồi xa đậm hơn đồi gần, hoặc ba lớp cùng một màu xanh. Mắt sẽ không đọc được chiều sâu. Quy tắc: xa → nhạt và ngả màu trời; gần → đậm và bão hòa hơn.

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

  • Phiên bản hoàng hôn: nhân đôi file, đổi Gradient trời sang #6a3a8f → #ff8a5c, dùng Adjustment Layer Color Balance (Cân bằng màu) ngả đỏ cho các lớp đồi.
  • Đồi thứ ba: thêm lớp đồi tối nhất sát mép dưới làm tiền cảnh, đặt cho nó tốc độ cuộn nhanh nhất trong game.
  • Mây pixel: vẽ lại một đám mây bằng Pencil 1 px ở kích thước 64 × 32 để ghép vào game pixel art.

Mẹo & trick học nhanh

Pen Tool cho đường cong mượt

Bấm và kéo tạo điểm cong; giữ Alt khi kéo tay nắm để bẻ góc. Ít điểm neo thì đường càng mượt – một ngọn đồi chỉ cần 3–4 điểm.

Sửa Fill Layer nhanh

Bấm đúp vào thumbnail của layer Gradient Fill hoặc Shape để đổi màu – không cần vẽ lại. Đây là lý do nên dựng nền phẳng bằng Fill và Shape.

Chọn màu xa bằng mắt

Lấy màu đồi gần bằng Eyedropper I, rồi trong Color Picker kéo điểm chọn lên trên (sáng hơn) và sang trái (nhạt hơn) – ra màu cho đồi xa.

Kiểm tra nhanh

1 Theo phối cảnh không khí, đồi ở xa nên có màu thế nào so với đồi gần?
2 Cách nhanh nhất tạo bóng cho ngọn đồi làm bằng Shape là gì?
3 Vì sao nên xuất nền thành nhiều lớp thay vì một ảnh duy nhất?

Bài tập: Nền trời phẳng 1920 × 1080

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