Dự án 15: Bộ 6 icon kỹ năng nguyên tố

Ở dự án icon cầu lửa trước đây bạn đã làm một icon kỹ năng. Game thật có cả thanh kỹ năng (skill bar) với nhiều hệ nguyên tố, và người chơi phải bấm đúng nút trong lúc chiến đấu căng thẳng. Bộ icon này dạy bạn thiết kế hệ thống: một khung chung, một quy tắc màu, và mỗi nguyên tố một ngôn ngữ hình khối riêng để phân biệt ngay cả khi thu nhỏ hay nhìn trắng đen.

Hình mẫu

Thời gian ước tính: khoảng 5 giờ: 45 phút khung và quy tắc, 30–40 phút mỗi icon, 30 phút kiểm tra và xuất.

Chuẩn bị

• File vẽ: 1536 × 256 px (gấp đôi), ViewHiển thị›GuidesĐường gióng›New Guide Layout Columns 6, Gutter 0, Margin 16 px. Cuối cùng thu về 768 × 128 px.
• Ngôn ngữ hình khối: lửa – đường cong nhọn đi lên; băng – lục giác, đối xứng 6 cánh; sét – đường gãy khúc zig-zag; đất – khối đa giác nặng, đáy rộng; gió – đường cong nằm ngang; bóng tối – hình tròn, lưỡi liềm, xoáy vào trong.
• Công cụ chính: Pen Tool (Bút tạo đường) (P), Polygon Tool, Lasso (Dây thòng lọng), Brush (Cọ vẽ), Smart Object (Đối tượng thông minh) cho khung, Paint Symmetry (biểu tượng con bướm trên thanh Options của Brush) cho icon băng.
• Thiết bị: các vệt sáng và glow cần nét thon: bút XP-Pen/Huion/Wacom bật Pen Pressure (Lực nhấn bút); chuột vẽ vệt sáng bằng Pen Tool rồi Stroke Path có Simulate Pressure; iPad qua Sidecar/Astropad dùng Apple Pencil (Bút chì) như bút thường.

Các bước

1. Khung chung: ô đầu tiên, Rectangle 224 × 224 bo góc 32, viền 10 px tối; bên trong viền kim loại #c3ccd8 6 px bo góc 22; dải tối mờ 25% ở 1/4 dưới. Chuyển thành Smart Object Skill Frame. Nền màu hệ là layer riêng nằm dưới Smart Object.
2. Nhân khung 6 ô: Alt+Shift + kéo Skill Frame sang 5 ô còn lại, căn theo guide. Tạo 6 layer nền màu theo bảng trên, mỗi nền kẹp một vòng tròn cùng màu biểu tượng Opacity (Độ mờ đục) 18% phía sau – ánh sáng nền của kỹ năng.
3. Phác 6 biểu tượng: layer Sketch, mỗi biểu tượng nằm trong vòng tròn đường kính khoảng 150 px ở tâm ô. Vẽ dưới dạng bóng đen trước: nếu 6 bóng đen đã khác nhau rõ, bạn đang đi đúng hướng.
4. Lửa: Pen Tool vẽ ngọn lửa ba đỉnh cong vút lên, lõi vàng hình giọt nước lệch dưới, chấm trắng nóng ở đáy lõi. Bóng lưỡi liềm đỏ tối #c9302c phía phải.
5. Băng với Paint Symmetry: chọn Brush, bấm biểu tượng con bướm trên thanh Options › Radial, Segment Count 6. Vẽ một cánh tinh thể, Photoshop tự nhân ra 6 cánh đều nhau. Giữa là lục giác có mặt sáng #e8fbff trên – trái và mặt tối #3aa8d8 dưới.
6. Sét: Polygonal Lasso (Thòng lọng đa giác) vẽ tia sét gãy 3 khúc chéo từ trên – phải xuống dưới – trái, nửa phải tô vàng tối #e0a91f, vệt sáng mảnh #fff6c4 dọc cạnh trái.
7. Đất: khối đá đa giác 6–7 cạnh, đáy phẳng rộng. Chia mặt như gem: mặt trên – trái sáng #e0b988, mặt dưới – phải tối #7a4f2e, các đường nứt tỏa từ một điểm.
8. Gió: ba đường cong ngang dày dần, đầu cuộn tròn như dấu phẩy, viền tối bao ngoài từng đường. Gió "vô hình" nên chỉ có thể kể bằng chuyển động – đường cong nằm ngang và đuôi thon.
9. Bóng tối: quả cầu tím đậm, bóng dày ở dưới – phải, lưỡi liềm sáng #e3d9ff ở giữa, viền sáng #a78bfa ở mép trên – trái để cầu không chìm vào nền tối.
10. Glow và hạt: mỗi icon một layer blend mode Linear Dodge (Add) (Cộng sáng): Soft Round nhỏ màu chủ đạo quanh biểu tượng, 2–3 hạt sáng (tia lửa, bông tuyết, tia điện…). Giữ glow nhẹ – quá sáng sẽ mất viền.
11. Kiểm tra ở cỡ nhỏ và trắng đen: New Window ở 25% (64 px) và 12,5% (32 px); thêm Adjustment Layer (Lớp điều chỉnh) Black & White. Ở 32 px trắng đen, 6 icon vẫn phải khác nhau nhờ hình dáng. Thử thêm Color Blindness ở ViewHiển thị›Proof Setup.
12. Thu nhỏ và xuất: lưu bản 2x, ImageHình ảnh›Image SizeKích thước ảnh Width 768 px, Bicubic (Nội suy mượt) Sharper. Export As (Xuất ra (tùy chỉnh)) PNG → skills.png đúng 768 × 128 px.
13. Đưa vào Unity 6: Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 128, Sprite Editor › Slice › Grid By Cell Size 128 × 128 › Apply. Trên thanh kỹ năng, mỗi ô là Image icon cộng một Image đen 60% đè lên với Image Type Filled, Fill Method Radial 360 – thay đổi Fill Amount để làm hiệu ứng hồi chiêu (cooldown) quay vòng.

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

• Cấp độ kỹ năng: thêm 1–3 chấm vàng ở cạnh dưới khung cho kỹ năng cấp cao, hoặc đổi viền kim loại sang vàng cho kỹ năng tối thượng.
• Trạng thái chưa mở khóa: bản trắng đen, tối 50%, có ổ khóa nhỏ – xuất thêm sheet thứ hai.
• Kỹ năng kết hợp: thiết kế icon "lửa + gió = bão lửa" kết hợp ngôn ngữ hình khối của hai hệ.