Dự án 6: Bộ 4 icon vũ khí RPG cùng phong cách
Vẽ rìu, cung, trượng phép và búa thành một bộ icon đồng bộ: cùng góc 45°, cùng khung, cùng vật liệu, màu viền theo độ hiếm – và kiểm tra độ đọc ở 64 px, 32 px.
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: (Ctrl+O).
- Lưới 4 ô 128 × 128 px có lề an toàn 8 px (512 × 128 px) PNG · 1 KB
- Bảng màu tất cả dự án game PNG · 158 KB
Ở dự án thanh kiếm trước đây bạn đã vẽ một món vũ khí. Game nhập vai (RPG) thì cần hàng trăm món, và thách thức thật sự là làm chúng trông như cùng một họa sĩ vẽ. Bộ quy tắc phong cách (style guide) bạn đặt ra ở đây – góc đặt, độ dày viền, vật liệu, khung độ hiếm – chính là thứ các studio gửi cho mọi họa sĩ trong nhóm.
Hình mẫu
Thời gian ước tính: khoảng 2 giờ: 30 phút đặt quy tắc và khung, 20 phút mỗi món vũ khí, 10 phút kiểm tra.
Chuẩn bị
- Canvas: 512 × 128 px để xuất; nên vẽ ở gấp đôi (1024 × 256 px) cho thoải mái rồi thu nhỏ ở bước cuối.
- Quy tắc phong cách (ghi ra giấy): vũ khí đặt chéo 45°, đầu vũ khí ở góc trên – phải; viền 4 px (ở cỡ 1024); ánh sáng từ trên – trái; gỗ và thép dùng chung 4 màu; khung nền chung, chỉ viền trong đổi màu theo độ hiếm.
- Công cụ chính: Rectangle Tool, Pen Tool (Bút tạo đường) (P), Lasso (Dây thòng lọng) (L), Brush (Cọ vẽ) (B), Free Transform (Biến đổi tự do) (Ctrl+T), Smart Object (Đối tượng thông minh).
- Thiết bị: vân gỗ và vệt sáng trên thép đẹp nhất khi có lực nhấn. XP-Pen/Huion: bật Windows Ink (Windows Ink (bút Windows)) trong driver và đặt Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút) ở F5. Chuột: bật Smoothing (Làm mượt nét) 30–40%, vẽ vân gỗ bằng Line Tool rồi xóa bớt đầu nét. iPad qua Sidecar/Astropad: dùng Apple Pencil (Bút chì) như bút bảng vẽ.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#9a6b43 | Gỗ cán (chung cả bộ) | |
#6b4428 | Bóng gỗ | |
#d4dbe5 | Thép | |
#8793a6 | Bóng thép | |
#ffc53d | Vàng trang trí | |
#a78bfa | Ngọc phép | |
#2b2340 | Nền khung | |
#9aa3ae | Viền độ hiếm: Thường | |
#31a8ff | Viền độ hiếm: Hiếm | |
#ff9f43 | Viền độ hiếm: Huyền thoại (Sử thi dùng tím #a78bfa) |
Các bước
- Tạo file 1024 × 256 px, RGB, Transparent. : Columns 4, Gutter 0, Margin 16 px ở cả 4 cạnh – mỗi ô 256 px có lề an toàn.
- Khung icon dạng Smart Object: ô đầu tiên, Rectangle 240 × 240 bo góc 36, Fill
#2b2340, viền 8 px tối, thêm một dải tối mờ ở đáy. Chọn layer đó, , đặt tên Frame. Viền độ hiếm làm riêng: Rectangle bo góc 24, nhỏ hơn khung 16 px mỗi cạnh, chỉ có Stroke 8 px màu#9aa3ae, đặt tên Rarity. - Nhân khung: chọn Frame và Rarity, với Move Tool (Công cụ Di chuyển) giữ Alt+Shift kéo sang 3 ô còn lại. Các bản sao Smart Object dùng chung nội dung – sửa một khung, cả 4 khung đổi theo; còn layer Rarity của mỗi ô vẫn đổi màu riêng được.
- Phác đứng thẳng: layer Sketch, vẽ từng vũ khí đứng thẳng (cán dọc) cao khoảng 200 px: rìu có lưỡi cong bên phải và gai sau; cung là cung tròn có tay cầm đỏ, mũi tên ngang; trượng có vuốt vàng ôm viên ngọc; búa có đầu thép chữ nhật và đai vàng.
- Xoay 45° thống nhất: chọn phác của từng món, Ctrl+T, gõ 45 vào ô góc xoay trên thanh Options, Enter. Đặt cho đầu vũ khí về góc trên – phải và cán ra góc dưới – trái. Vẽ đứng rồi xoay giúp mọi món có đúng cùng một góc.
- Nét viền: layer Line, Brush cứng 8 px (ở file 1024) màu
#1b1a24. Nét dài, dứt khoát, xoay canvas bằng Rotate View (Xoay khung nhìn) R cho tay vẽ thuận. Chỗ các vật liệu gặp nhau (thép – gỗ) cũng có nét viền để tách khối. - Màu phẳng theo vật liệu: layer Flat dưới Line: dùng Magic Wand (Đũa thần) (Sample All Layers) chọn từng vùng, Expand 2 px, tô gỗ
#9a6b43, thép#d4dbe5, vàng#ffc53d, ngọc#a78bfa. Mọi món dùng cùng màu gỗ và thép – đây là "chữ ký" của bộ. - Bóng một nửa theo trục: layer Shadow kẹp vào Flat. Vì vũ khí nằm chéo, bóng là dải chạy dọc nửa dưới – phải của mỗi thanh cán và mỗi mặt thép: gỗ
#6b4428, thép#8793a6, vàng#d18a1a, ngọc#6d4bd1. - Sáng và vân vật liệu: layer Light kẹp vào: một vệt trắng mảnh dọc cạnh trên – trái của lưỡi thép, vệt
#c99a6adọc cán gỗ, một chấm trắng trên viên ngọc. Thép có vệt sáng sắc và tương phản mạnh; gỗ có vệt mờ hơn – vật liệu khác nhau "bắt sáng" khác nhau. - Kiểm tra bộ quy tắc: đặt 4 icon cạnh nhau và soát: cùng góc 45°? cùng độ dày viền? món nào to lấn khung, món nào quá nhỏ? Mọi vũ khí nên chạm tới khoảng 85% đường chéo của khung.
- Thử ở cỡ nhỏ: › New Window for …, đặt cửa sổ mới ở 25% (tương đương icon 64 px) và 12,5% (32 px). Ở 32 px, cung và trượng dễ thành "que mảnh" – làm cán dày hơn hoặc đầu vũ khí to hơn cho tới khi đọc được.
- Đặt độ hiếm: đổi viền trong của khung: Thường
#9aa3ae, Hiếm#31a8ff, Sử thi#a78bfa, Huyền thoại#ff9f43. Thêm một vầng sáng tròn cùng màu, Opacity (Độ mờ đục) 16%, phía sau vũ khí. - Thu nhỏ và xuất: bản
weapons_2x.psd. Trên bản chính : Width 512 px, Resample (Lấy mẫu lại) Bicubic (Nội suy mượt) Sharper (reduction). PNG →weapons.png512 × 128 px. - Đư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. Khi game có nhiều icon, gom chúng vào một Sprite Atlas (Assets › Create › 2D › Sprite Atlas, kéo thư mục icon vào mục Objects for Packing) để giảm số lần vẽ.
Nâng cao (tùy chọn)
- Bản nâng cấp +1: nhân đôi rìu, thêm hoa văn vàng, đổi thép sang màu xanh băng và nâng viền lên "Hiếm" – người chơi phải thấy ngay món nào mạnh hơn.
- Icon bị khóa: thêm Adjustment Layer (Lớp điều chỉnh) Black & White và một ổ khóa nhỏ góc dưới – phải cho vật phẩm chưa mở.
- Hiệu ứng huyền thoại: thêm 4 tia sáng mảnh chéo góc khung màu cam, blend mode Linear Dodge (Add) (Cộng sáng).
Mẹo & trick học nhanh
Trong Free Transform (Ctrl+T) gõ góc vào ô xoay trên thanh Options. Giữ Shift khi xoay bằng chuột để bước nhảy 15°.
Bấm đúp vào thumbnail Smart Object để mở nội dung, sửa rồi Ctrl+S và đóng – mọi bản sao dùng chung nội dung cập nhật theo.
Dùng › New Window cho cùng file, đặt ở 25%. Vẽ ở cửa sổ lớn, mắt liếc cửa sổ nhỏ – cách duy nhất để chắc icon đọc được ở cỡ thật.