Dự án 1: Gói 5 icon nâng cấp cho game idle

Game idle (game "treo máy") và clicker (game bấm liên tục) sống nhờ nâng cấp: người chơi nhìn danh sách nâng cấp hàng trăm lần mỗi ngày. Vì vậy icon nâng cấp phải nhận ra trong nháy mắt, cùng một "khuôn" để danh sách gọn gàng, nhưng mỗi loại một màu riêng để mắt tìm nhanh. Dự án này dạy bạn cách dựng một khuôn icon bằng Shape (hình vector), nhân bản nó và chỉ thay màu + biểu tượng.

Hình mẫu

Thời gian ước tính: khoảng 70 phút. Giá tiền, thanh cấp độ và mũi tên xanh trong hình chỉ để xem bố cục – trong game chúng là UI riêng do Unity hiển thị, không vẽ chết vào icon.

Chuẩn bị

• Canvas (khung vẽ): 640 × 128 px (5 ô, mỗi ô 128 × 128), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Rectangle Tool (U) chế độ Shape, Ellipse Tool, Pen Tool (Bút tạo đường) (P), Path Selection (A), Layer Style, Clipping Mask (Mặt nạ cắt) (⌘ Cmd+⌥ Option+G).
• Thiết bị: toàn bộ dựng bằng Shape nên chuột làm tốt như bút. Nếu dùng bút Wacom, XP-Pen, Huion hay iPad để vẽ vệt sáng bằng Brush (Cọ vẽ), tắt lực nhấn cho kích thước (Size Jitter (Dao động kích thước) › Control: Off) để nét đều.
• File mẫu: "Lưới 5 ô" ở cuối bài – mở bằng FileTệp›Place Embedded, đặt trên cùng, khóa layer lại.

Các bước

1. Tạo file: FileTệp›NewTạo mới (⌘ Cmd+N), Width 640, Height 128 Pixels, Background Contents: Transparent, bấm Create. Đặt lưới: Photoshop›SettingsCài đặt›Guides, Grid & Slices, Gridline Every 128 Pixels, Subdivisions 16 rồi bật ViewHiển thị›ShowHiện›GridLưới.
2. Phác ý tưởng (layer Sketch): layer mới ⌘ Cmd+⇧ Shift+N tên Sketch, Opacity (Độ mờ đục) 30%. Vẽ nhanh 5 biểu tượng bằng Brush cỡ 3 px: bàn tay chạm, cái cuốc, đầu robot, túi tiền, tia sét. Mỗi biểu tượng phải đọc được chỉ bằng bóng dáng – nếu tô đen kín mà vẫn đoán ra thì đạt.
3. Đế nổi: Rectangle Tool U, chế độ Shape, bấm một lần lên ô 1, nhập Width 104, Height 104. Trong WindowCửa sổ›PropertiesThuộc tính đặt bán kính góc 24 px, X 12, Y 18. Fill #d08a1a. Đặt tên Base.
4. Mặt ô: nhân đôi Base (⌘ Cmd+J), đổi tên Face, đổi Fill #ffc93c và dời lên 8 px (Y 10). Khoảng 8 px của đế lộ ra bên dưới tạo cảm giác nút nổi – đúng "ngôn ngữ" của game mobile.
5. Viền bằng Layer Style: chọn Face, LayerLớp›Layer Style›StrokeViền: Size 4 px, Position Inside, Color #1b1a24. Chuột phải Face › Copy Layer Style, chuột phải Base › Paste Layer Style.
6. Bóng nửa dưới: layer mới trên Face, ⌘ Cmd+⌥ Option+G kẹp vào Face. Rectangular Marquee (Khung chọn) (M) chọn 1/3 dưới của ô, tô #e8a521 bằng ⌥ Option+⌫ Delete. Một mảng màu tối hơn cùng tông đủ tạo khối – không cần gradient.
7. Vệt bóng sáng (gloss): layer kẹp thứ hai: Ellipse Tool vẽ một elip dẹt 56 × 14 px ở mép trên, Fill trắng, Opacity 45%. Thêm một chấm trắng tròn 7 px ở góc trên – phải. Vị trí vệt sáng giống hệt nhau trên cả 5 ô.
8. Gom thành khuôn: chọn Base, Face và hai layer kẹp, ⌘ Cmd+G thành Group Tile. Đây là khuôn dùng chung. Nhân đôi Group 4 lần, dời mỗi bản 128 px sang phải (chọn Move Tool (Công cụ Di chuyển), giữ ⇧ Shift và nhấn ⇧ Shift+Right 13 lần = 130 px rồi lùi 2 px, hoặc gõ X trong Properties).
9. Đổi màu từng ô: trong mỗi bản sao, bấm đúp vào thumbnail của Face và Base để đổi Fill theo bảng màu. Lớp bóng nửa dưới đổi sang màu tối hơn mặt ô 1 bậc (ví dụ ô xanh dương: #3a6fe0).
10. Biểu tượng trắng: trên mỗi ô, dựng biểu tượng bằng Shape ghép: bàn tay = 5 hình chữ nhật bo tròn (ngón trỏ cao nhất) + lòng bàn tay; cuốc = cán xiên + lưỡi cong vẽ bằng Pen Tool; robot = đầu bo góc + 2 mắt tròn + ăng-ten; túi tiền = Pen Tool; tia sét = Polygon. Fill trắng, Stroke Inside 3 px viền tối. Biểu tượng chiếm khoảng 60% ô và căn giữa.
11. Bóng biểu tượng: mỗi biểu tượng thêm layer kẹp tô #d9e2ec cho nửa dưới. Hai tông trắng – xám nhạt là đủ cho icon 128 px; nhiều tông hơn sẽ rối khi thu nhỏ.
12. Kiểm tra độ đọc: thu nhỏ về 50% rồi 25% (⌘ Cmd+-). Ở 25% (32 px) bạn vẫn phải phân biệt được 5 nâng cấp nhờ màu ô. Nếu hai ô trông giống nhau (ví dụ xanh lá và xanh ngọc), đẩy chúng xa nhau hơn trên vòng màu.
13. Xuất PNG: ẩn layer Sketch và lưới mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) (⌥ Option+⇧ Shift+⌘ Cmd+W), Format PNG, Transparency (Độ trong suốt) bật → upgrades_128.png đúng 640 × 128 px. Lưu PSD để thêm nâng cấp mới sau này.
14. Đưa vào Unity 6: kéo PNG vào cửa sổ Project. Inspector: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Apply. Sprite Editor › Slice › Type Grid By Cell Size, Pixel Size 128 × 128 › Slice › Apply. Trong Canvas, mỗi dòng nâng cấp là một Button: Image dùng sprite icon, giá tiền và cấp độ là TextMeshPro đặt bên cạnh để script tự cập nhật.

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

• Trạng thái khóa: nhân đôi sheet, thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) với Saturation −100 và Lightness −30 ở trên cùng → upgrades_locked.png cho nâng cấp chưa đủ tiền mua.
• Mũi tên "có thể nâng cấp": vẽ riêng một hình tròn xanh #2ecc71 32 × 32 px có mũi tên trắng; trong Unity đặt nó làm Image con ở góc phải trên của nút và bật/tắt theo số tiền.
• Phiên bản 256 px: vì dựng bằng Shape, ImageHình ảnh›Image SizeKích thước ảnh 200% vẫn sắc nét – dùng cho màn hình máy tính bảng.