Dự án 3: Bộ nút UI tròn Play – Pause – Settings

Nút bấm là "tay nắm cửa" của game: người chơi chạm vào nó hàng trăm lần. Một bộ nút tốt có chung một khuôn (cùng kích thước, cùng độ dày đế, cùng vệt sáng) và chỉ khác màu cùng biểu tượng. Bạn sẽ học cách dựng một nút mẫu rồi nhân bản, thay vì vẽ ba nút ba kiểu.

Hình mẫu

Thời gian ước tính: khoảng 50 phút: 30 phút cho nút mẫu, 20 phút nhân bản và đổi biểu tượng.

Chuẩn bị

• Canvas: 384 × 128 px (3 ô 128 × 128), Transparent, RGB Color.
• Công cụ chính: Ellipse Tool và Polygon Tool (cùng nhóm với Rectangle, phím U – bấm ⇧ Shift+U để đổi), Rectangle Tool, Lasso (Dây thòng lọng) (L), Brush (Cọ vẽ) (B).
• File mẫu: "Lưới 3 ô 128 × 128": viền hồng là ranh giới ô, khung xanh lá là lề an toàn 8 px – nút không được vượt ra ngoài khung xanh.
• Thiết bị: chỉ vệt sáng cần nét thon hai đầu. Bút XP-Pen/Huion/Wacom: bật Pen Pressure (Lực nhấn bút) cho Size. Chuột: vẽ vệt sáng bằng Ellipse rồi xóa bớt, hoặc Pen Tool (Bút tạo đường) › Stroke Path có tích Simulate Pressure. iPad qua Sidecar/Astropad: Apple Pencil (Bút chì) cho lực nhấn như bút thường.

Các bước

1. Tạo file 384 × 128 px, Transparent. Mở file "Lưới 3 ô" (⌘ Cmd+O), kéo nó sang file của bạn bằng Move Tool (Công cụ Di chuyển) (V) giữ ⇧ Shift để nó vào đúng giữa. Đặt layer lưới trên cùng, Opacity (Độ mờ đục) 50%, khóa bằng biểu tượng ổ khóa.
2. Chia cột bằng guide: ViewHiển thị›GuidesĐường gióng›New Guide Layout: Columns 3, Gutter 0, bỏ Rows, bấm OK – có guide ở x 128 và 256.
3. Đế nút (Base): Ellipse Tool, giữ ⇧ Shift vẽ hình tròn 104 × 104, Fill #1f8a4a. Trong Properties đặt X 12, Y 18. Đây là phần "thân" nhìn thấy khi nút nổi lên.
4. Mặt nút (Face): nhân đôi đế ⌘ Cmd+J, đổi Fill sang #3ecf6e, đặt Y 10 (cao hơn đế 8 px). Thêm LayerLớp›Layer Style›StrokeViền 4 px Outside viền tối cho cả đế và mặt.
5. Bóng cel của mặt nút: layer mới kẹp vào Face (⌘ Cmd+⌥ Option+G). Chọn Elliptical Marquee (Khung chọn) (M) vẽ hình tròn cùng cỡ mặt nút nhưng lệch lên trên – trái 6 px, đảo vùng chọn ⌘ Cmd+⇧ Shift+I, tô #1f8a4a. Kết quả: một lưỡi liềm tối ở dưới – phải.
6. Vệt sáng: layer kẹp mới, Brush tròn cứng 7 px màu #9ff0b8, vẽ một cung ngắn ở mép trên – trái (từ 10 giờ đến 12 giờ). Thêm một chấm trắng 4 px ở phía trên – phải – đây là "điểm lóe" của mặt nhựa bóng.
7. Gom thành nút mẫu: chọn Base, Face và các layer kẹp, ⌘ Cmd+G đặt tên Btn Play. Từ giờ mọi nút đều là bản sao của Group này.
8. Biểu tượng Play: Polygon Tool, trên thanh Options đặt số cạnh (Number of Sides) 3, vẽ tam giác trắng rồi xoay 90° (⌘ Cmd+T, gõ 90 vào ô góc xoay) cho mũi chỉ sang phải. Dời tam giác lệch phải 3 px so với tâm – mắt người thấy như vậy mới là "chính giữa". Viền 4 px, bóng #d9e2ec ở nửa dưới biểu tượng.
9. Nhân bản nút: chọn Group, giữ ⌥ Option và kéo bằng Move Tool sang ô thứ hai (giữ thêm ⇧ Shift để đi thẳng hàng), đặt X đúng 128 px so với nút đầu. Làm tiếp cho ô thứ ba. Đổi tên thành Btn Pause, Btn Settings.
10. Đổi màu hàng loạt: trong Btn Pause, bấm đúp vào ô màu của từng layer shape để đổi: mặt #ff9f43, đế và bóng #c0602a, vệt sáng #ffd29a. Btn Settings: #31a8ff, #1f5fa8, #a9d8ff.
11. Biểu tượng Pause: xóa tam giác, vẽ 2 Rectangle 18 × 60 px bo góc 5 px cách nhau 16 px. Chép kiểu viền từ tam giác bằng Copy/Paste Layer Style.
12. Biểu tượng Settings (bánh răng): vẽ hình tròn 52 px và một Rectangle 14 × 70 px đứng giữa. Chọn Rectangle, nhấn ⌘ Cmd+⌥ Option+T (nhân đôi và biến đổi), gõ góc 45°, Enter; nhấn ⌘ Cmd+⌥ Option+⇧ Shift+T thêm 2 lần để lặp lại phép xoay – có 4 thanh tạo 8 răng. Gộp các shape (⌘ Cmd+E), vẽ hình tròn 22 px ở giữa và chọn Subtract Front Shape để khoét lỗ.
13. Kiểm tra và xuất: xem ở 50% – ba nút phải có cùng độ cao đế, cùng vị trí vệt sáng. Ẩn layer lưới mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG 100% → buttons.png 384 × 128 px.
14. Đưa vào Unity 6: Sprite Mode Multiple, Sprite Editor › Slice › Grid By Cell Size 128 × 128 › Apply. Tạo Button trong Canvas, gán sprite vào Image; ở component Button đặt Transition Sprite Swap và gán sprite "đang nhấn" vào ô Pressed Sprite (xem phần Nâng cao).

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

• Trạng thái đang nhấn (Pressed): nhân đôi cả sheet, trong mỗi nút dời Face xuống 6 px (gần chạm đế) và làm tối mặt 10% bằng Hue/Saturation (Sắc độ/Độ bão hòa) – xuất buttons_pressed.png để dùng trong Sprite Swap.
• Trạng thái vô hiệu (Disabled): thêm Adjustment Layer (Lớp điều chỉnh) Black & White lên bản sao sheet và giảm Opacity nút còn 60%.
• Nút chữ nhật cùng bộ: dùng lại đúng layer style và bảng màu để làm nút "Chơi lại" 256 × 96 px.