Dự án 9: Icon kỹ năng quả cầu lửa

Icon kỹ năng (skill icon) nằm trên thanh công cụ của người chơi, thường hiển thị chỉ 48–64 px. Mọi thứ phải đọc được trong nửa giây: một hình to, rõ, tương phản mạnh với nền khung. Lửa là vật tự phát sáng, nên ta vẽ theo cách khác: lớp ngoài tối, lõi sáng nhất.

Hình mẫu

Thời gian ước tính: khoảng 60 phút.

Chuẩn bị

• Canvas: vẽ ở 1024 × 1024 px (gấp 4 lần) để dễ vẽ, cuối cùng xuất 256 × 256 px.
• Công cụ: Rounded Rectangle (nhóm Shape U) cho khung, Lasso (Dây thòng lọng) (L) cho các lớp lửa, Soft Round cho quầng.

Các bước

1. Tạo file ⌘ Cmd+N 1024 × 1024 px. Kéo guide ở 64 px từ mỗi mép – vùng an toàn, không để chi tiết quan trọng ra ngoài.
2. Khung icon: chọn Rectangle Tool, trong bảng Properties đặt bo góc (corner radius) 110 px, Fill #2b1836, Stroke 24 px màu viền. Kéo từ guide này sang guide kia. Rasterize (Chuyển thành điểm ảnh) Layer. Thêm layer Frame Inner: vẽ khung bo góc nhỏ hơn 40 px, chỉ Stroke 14 px màu #ff9f43, Opacity (Độ mờ đục) 80%.
3. Phác hình lửa: layer Sketch. Một hình tròn (quả cầu) lệch xuống dưới – trái, và 2 lưỡi lửa kéo dài chéo lên trên – phải như sao chổi. Hình chéo tạo cảm giác chuyển động; hình đứng yên sẽ kém năng lượng.
4. Viền lửa: layer Line, Brush (Cọ vẽ) 12 px có Pen Pressure (Lực nhấn bút). Mép lửa là các đường cong chữ S, đầu lưỡi lửa nhọn. Khép kín hình.
5. Lửa ngoài: layer Fire dưới Line, Magic Wand (Đũa thần) + Expand 3 px, tô #ff5c3a.
6. Lớp tối: layer Clipping Mask (Mặt nạ cắt) (⌘ Cmd+⌥ Option+G) vào Fire. Lasso vẽ vùng mép ngoài và đầu các lưỡi lửa, tô #c9302c. Với lửa, phần xa lõi là phần tối nhất – ngược với vật thường.
7. Lửa giữa: layer Clipping Mask mới. Lasso vẽ một hình lửa nhỏ hơn cùng dáng (cách mép ngoài khoảng 1/5), tô #ff9f43.
8. Lửa trong: layer mới, hình lửa nhỏ hơn nữa, tô #ffd166. Các lớp lồng vào nhau như búp măng, lưỡi lửa bên trong ngắn hơn lưỡi ngoài.
9. Lõi nóng: Elliptical Marquee (Khung chọn) vẽ hình tròn ở tâm quả cầu, tô #fff6d5. Đây là điểm sáng nhất – mắt người chơi sẽ nhìn vào đây đầu tiên.
10. Quầng lửa: layer Glow nằm trên khung nhưng dưới lửa. Soft Round 500 px màu #ff9f43, chấm một lần sau quả cầu, blend mode Screen, Opacity 60%. Khung tối xung quanh sẽ bừng sáng nhẹ.
11. Tia lửa: layer Embers trên cùng: 3–4 hạt tròn nhỏ màu #ffd166 có viền tối bay quanh, một tia lóe trắng trên lõi.
12. Đá góc khung: Polygonal Lasso (Thòng lọng đa giác) vẽ 4 hình thoi nhỏ ở 4 góc, tô #ff9f43, Stroke 6 px. Chi tiết này báo hiệu độ hiếm/cấp kỹ năng.
13. Kiểm tra 64 px: WindowCửa sổ›Arrange›New Window for (tên file) mở cửa sổ thứ hai của cùng file, zoom 6,25% (bằng 64 px). Vẽ ở cửa sổ lớn, nhìn cửa sổ nhỏ để chắc icon vẫn rõ.
14. Xuất 256 px: FileTệp›Export›Export AsXuất ra (tùy chỉnh), ở mục Image Size (Kích thước ảnh) đặt Width 256 px (Resample (Lấy mẫu lại): Bicubic (Nội suy mượt) Sharper), Format PNG. Lưu PSD gốc 1024 px để sửa sau.

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

• Bộ 4 nguyên tố: dùng cùng khung vẽ cầu băng (xanh), cầu sét (vàng tím), cầu độc (xanh lá).
• Trạng thái hồi chiêu: tạo bản sao với Adjustment Layer (Lớp điều chỉnh) Black & White + Levels tối đi – icon lúc kỹ năng chưa dùng được.
• Dùng trong Unity 6: kéo PNG vào thư mục Assets, đặt Texture Type = Sprite (2D and UI), rồi gán vào thành phần Image của nút kỹ năng.