Icon & UI Game
Vẽ icon vật phẩm/kỹ năng đọc rõ ở 64 px, làm panel và nút bấm có thể co giãn bằng 9-slice, tái sử dụng bằng Smart Object.
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.
Icon là "ngôn ngữ" giao tiếp nhanh nhất giữa game và người chơi: thanh máu, kỹ năng, vật phẩm trong túi đồ. Một icon tốt phải được nhận ra trong chưa tới một giây, ở kích thước rất nhỏ.
Nguyên tắc icon vật phẩm và kỹ năng
- Vẽ to, kiểm tra nhỏ: thường vẽ ở 256 × 256 px nhưng phải đọc rõ khi thu về 64 px hoặc 32 px.
- Silhouette mạnh: vật thể chiếm khoảng 70–80% khung, đặt chéo hoặc hơi nghiêng để có hình động.
- Tương phản value: vật thể sáng trên nền tối hoặc ngược lại. Kiểm tra bằng cách chuyển tạm sang trắng đen.
- Rim light / outline: một viền sáng mảnh (rim light) hoặc outline tối giúp tách vật thể khỏi nền, nhất là khi icon nằm trên UI nhiều màu.
- Khung theo độ hiếm (rarity): dùng màu khung nhất quán, ví dụ xám – thường, xanh lá – hiếm, xanh dương – rất hiếm, tím – sử thi, cam – huyền thoại.
Hướng sáng nhất quán
Toàn bộ icon và UI trong một game phải dùng cùng một hướng sáng, thường là từ trên-trái. Nếu cây kiếm sáng bên trái còn bình thuốc sáng bên phải, túi đồ sẽ trông lộn xộn dù từng icon đều đẹp.
Thực hành: dựng template icon
- Tạo file 256 × 256 px nền Transparent (Ctrl+N). Kẻ guide lề 16 px mỗi cạnh bằng .
- Vẽ khung icon trên một layer riêng bằng Rounded Rectangle (U). Chọn layer khung, vào .
- Vẽ vật phẩm trên các layer phía trên khung: silhouette phẳng trước, sau đó sáng tối theo hướng trên-trái.
- Thêm rim light: tạo layer mới, clipping mask vào vật thể bằng Ctrl+Alt+G, vẽ một nét sáng mảnh ở cạnh đối diện nguồn sáng chính.
- Kiểm tra kích thước nhỏ: rồi zoom cửa sổ mới xuống 25% (tương đương 64 px).
- Để làm icon tiếp theo, nhân đôi file hoặc nhóm layer. Khi cần đổi khung cho cả bộ, chỉ cần sửa Smart Object (Đối tượng thông minh).
Panel và nút bấm UI
UI game gồm panel (khung cửa sổ), nút bấm, thanh máu, tooltip… Chúng thường phải co giãn theo nhiều kích thước màn hình. Đó là lúc cần 9-slice.
9-slice là gì?
Ảnh được chia thành 9 phần bằng 4 đường cắt. 4 góc giữ nguyên, 4 cạnh kéo dài theo một chiều, phần giữa kéo dài cả hai chiều. Nhờ vậy một nút 96 × 48 px có thể thành nút 400 × 60 px mà góc bo không bị méo. Trong Unity 6, bạn đặt 4 đường cắt này bằng Border trong Sprite Editor, rồi chọn Image Type = Sliced ở component Image.
Khi vẽ cho 9-slice: đặt mọi họa tiết đặc biệt ở góc, giữ cạnh và phần giữa là màu hoặc texture đơn giản có thể lặp/kéo giãn.
Layer Styles – dùng có chừng mực
Nhấp đúp vào layer để mở Layer Style. Ba hiệu ứng hay dùng cho UI:
- Stroke: tạo viền nhanh. Đặt Position là Inside để viền không bị cắt ở mép canvas.
- Bevel & Emboss: tạo độ nổi. Đặt Angle khớp hướng sáng chung và bỏ chọn Use Global Light nếu cần kiểm soát riêng.
- Outer Glow: hào quang cho vật phẩm hiếm hoặc nút đang được chọn.
Khi hài lòng, bạn có thể chuột phải vào layer và chọn Rasterize (Chuyển thành điểm ảnh) Layer Style để "đóng băng" hiệu ứng thành pixel, nhưng hãy giữ bản gốc có style để còn chỉnh.
Mẹo & trick học nhanh
Thêm một Adjustment Layer Black & White ở trên cùng để xem icon có đủ tương phản value không, rồi tắt đi.
Kéo khung, màu rarity và layer style vào để dùng lại cho mọi file UI.
Chuột phải layer > Copy Layer Style, rồi Paste Layer Style lên layer khác để giữ các nút đồng bộ.
Đặt icon trên nền UI thật của game (hoặc nền xám tối) khi đánh giá, không đánh giá trên nền ô cờ trong suốt.