Lộ trình › Dự án game theo chủ đề › Bài 88/218

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.

Nâng cao 120 phút ★★★ Vừa Hướng dẫn cho Windows · đổi sang macOS

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.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (Ctrl+O).

Ở 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

Bốn icon vũ khí RPG: rìu, cung, trượng, búa đặt chéo 45° trong khung có viền màu độ hiếm, thử ở 64 px và 32 px
Bốn icon vũ khí RPG: rìu, cung, trượng, búa đặt chéo 45° trong khung có viền màu độ hiếm, thử ở 64 px và 32 px

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àuMã hexDùng cho
#9a6b43Gỗ cán (chung cả bộ)
#6b4428Bóng gỗ
#d4dbe5Thép
#8793a6Bóng thép
#ffc53dVàng trang trí
#a78bfaNgọc phép
#2b2340Nền khung
#9aa3aeViền độ hiếm: Thường
#31a8ffViền độ hiếm: Hiếm
#ff9f43Viền độ hiếm: Huyền thoại (Sử thi dùng tím #a78bfa)

Các bước

Bộ icon vũ khí: phác chéo 45°, viền, màu nền, bóng, sáng, khung độ hiếm
Bộ icon vũ khí: phác chéo 45°, viền, màu nền, bóng, sáng, khung độ hiếm
  1. Tạo file 1024 × 256 px, RGB, Transparent. ViewHiển thị›GuidesĐường gióng›New Guide Layout: Columns 4, Gutter 0, Margin 16 px ở cả 4 cạnh – mỗi ô 256 px có lề an toàn.
  2. 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 đó, LayerLớp›Smart Objects›Convert to Smart Object, đặ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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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ộ.
  8. 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.
  9. 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 #c99a6a dọ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.
  10. 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.
  11. Thử ở cỡ nhỏ: WindowCửa sổ›Arrange › 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.
  12. Đặ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í.
  13. Thu nhỏ và xuất: FileTệp›Save AsLưu thành bản khác bản weapons_2x.psd. Trên bản chính ImageHình ảnh›Image SizeKích thước ảnh: Width 512 px, Resample (Lấy mẫu lại) Bicubic (Nội suy mượt) Sharper (reduction). FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG → weapons.png 512 × 128 px.
  14. Đư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ẽ.
Mẹo: Lưu quy tắc phong cách ngay trong PSD: dùng Type Tool (T) gõ 5 quy tắc vào một layer chữ tên STYLE GUIDE rồi tắt con mắt. Khi vẽ món thứ 20 sau vài tuần, bạn mở ra là nhớ lại đúng bộ quy tắc.
Lỗi hay gặp: Mỗi món một góc (rìu 30°, cung thẳng đứng, búa 60°) và một kiểu bóng. Nhìn trong túi đồ, bộ icon sẽ như gom từ nhiều game khác nhau. Luôn vẽ đứng thẳng rồi xoay cùng một góc.

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

Xoay chính xác bằng số

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°.

Sửa một khung, đổi cả bộ

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.

Mở cửa sổ xem thứ hai

Dùng WindowCửa sổ›Arrange › 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.

Kiểm tra nhanh

1 Cách nào giúp 4 vũ khí có đúng cùng một góc đặt?
2 Vì sao dùng Smart Object cho khung icon?
3 Icon 128 px thường hiển thị ở 64 px hoặc 32 px. Bạn kiểm tra thế nào?
4 Màu viền độ hiếm nào đúng với quy ước trong bài?

Bài tập: Bộ 4 icon vũ khí cùng phong cách

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập