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.
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: (Ctrl+O).
- Khung bố cục 1920 × 1080 px có đường chân đồi xa – giữa – gần PNG · 57 KB
- Bảng màu tất cả dự án game PNG · 158 KB
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
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àu | Mã hex | Dùng cho |
|---|---|---|
#5ab8ff | Trời phía trên | |
#bfe6ff | Trời sát chân trời | |
#ffd23f | Mặt trời | |
#ffe27a | Tia nắng | |
#ffffff | Mây | |
#d6ecff | Bóng mây | |
#7fc98f | Đồi xa (nhạt, ngả xanh trời) | |
#4fb35a | Đồi gần | |
#3a8f47 | Bóng đồi gần | |
#8be08f | Viền sáng đỉnh đồi |
Các bước
- 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.
- 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.
- Bầu trời bằng Gradient Fill: , 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. - Đồ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). - Đồi gần: Pen Tool thêm một shape
#4fb35athấ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. - 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. - 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.
- 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. - 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. - 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: màu#fff6c4, Size 120 px, Opacity 50%. - 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ỏ#2e7d3adọc đỉnh đồi gần. - 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.
- 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. - Đư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.
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
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.
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.
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.