Xuất bộ icon nhiều cỡ bằng Artboards
Đặt bốn artboard 512, 256, 128 và 64 px trong cùng một file, mỗi artboard một bản Smart Object của icon, rồi xuất cả bộ PNG đúng tên chỉ với một lệnh.
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.
Tải về rồi mở bằng Photoshop: (⌘ Cmd+O).
- Icon búa sấm sét, nền trong suốt (1024 × 1024 px) PNG · 135 KB
Một vật phẩm trong game thường cần nhiều cỡ icon: ảnh to trong cửa hàng, ô túi đồ vừa, biểu tượng nhỏ trên thanh kỹ năng. Artboards (Bảng vẽ) cho phép đặt nhiều "trang" kích thước khác nhau trong một file PSD và xuất tất cả cùng lúc, mỗi trang thành một file đúng tên.
Mục tiêu
- Tạo tài liệu có Artboard (Bảng vẽ con) và dùng Artboard Tool để thêm, đổi cỡ, đổi tên artboard.
- Đặt nền artboard Transparent để icon xuất ra trong suốt.
- Xuất toàn bộ artboard bằng Export As (Xuất ra (tùy chỉnh)) với tên file lấy từ tên artboard.
Chuẩn bị
Tải p2-icon-bua-sam.png. Bốn cỡ cần làm: icon-512, icon-256, icon-128, icon-64 – đều là lũy thừa của 2, rất hợp với Unity.
Các bước thực hiện
- ⌘ Cmd+N, nhập 512 × 512 px, tích ô Artboards, Background Contents Transparent, bấm Create. Bảng Layers có nhóm
Artboard 1. - Nhấp đúp vào tên
Artboard 1, đổi thànhicon-512. - chọn icon búa. Ảnh tự thu vừa artboard, nhấn ↩ Return. Đặt tên layer
Hammer. - Chọn nhóm artboard
icon-512trong Layers, nhấn ⌘ Cmd+J (Duplicate Artboard). Bản sao nằm bên cạnh, đổi tên thànhicon-256. - Nhấn ⇧ Shift+V đến khi chọn được Artboard Tool. Với
icon-256đang chọn, trên Options bar (Thanh tùy chọn) (hoặc bảng Properties) nhập W 256, H 256. - Chọn layer
Hammertrongicon-256, ⌘ Cmd+T, nhập W và H 50%, Enter. Dùng Move Tool (Công cụ Di chuyển) bấm Align Horizontal Centers và Align Vertical Centers để icon nằm giữa artboard. - Lặp lại cho
icon-128(Hammer 25%) vàicon-64(Hammer 12,5%). Vì là Smart Object (Đối tượng thông minh), bản nhỏ được tính lại từ ảnh gốc 1024 px nên vẫn sắc nét. - Với mỗi artboard, xem bảng Properties: mục Artboard Background Color phải là Transparent.
- Phóng to icon-64 để kiểm tra: nếu nét quá mảnh bị mất, thêm Smart Filter nhẹ (Amount 50%, Radius 0,5 px) cho riêng layer này.
- : danh sách bên trái hiện cả 4 artboard. Chọn tất cả, Format PNG, tích Transparency (Độ trong suốt), bấm Export All và chọn thư mục.
Kết quả mong đợi
Thư mục có 4 file icon-512.png, icon-256.png, icon-128.png, icon-64.png, mỗi file đúng kích thước, nền trong suốt, icon nằm chính giữa.
Mẹo & trick học nhanh
Chọn Artboard Tool, nhấp dấu + ở cạnh một artboard để tạo artboard trống cùng cỡ ngay bên cạnh.
File > Export > Artboards to Files cho thêm tùy chọn tiền tố tên file và chỉ xuất nội dung trong artboard.
Ở cỡ 64 px nên ẩn bớt chi tiết mảnh (tia sét nhỏ, vân gỗ) bằng mask trên artboard đó – icon rõ hình khối hơn.