Thử thách 1: Bộ 5 icon Tết cho sự kiện game

Gần như game mobile nào cũng mở sự kiện Tết: cửa hàng đổi màu đỏ vàng, nhiệm vụ "thu thập lì xì", phần thưởng là cành mai hay bánh chưng. Người làm art thường chỉ có một hai ngày để vẽ cả bộ icon – nên đây là thử thách tốc độ và tính đồng bộ. Năm icon phải trông như do một người vẽ trong một buổi: cùng độ dày nét viền, cùng hướng sáng trên trái, cùng bảng màu chỉ 9 ô. Bạn cũng học cách giữ tinh thần văn hóa Tết mà không biến icon thành bức tranh quá nhiều chi tiết – ở cỡ 64 px trên điện thoại, chỉ bóng dáng và màu là còn đọc được.

Hình mẫu

Thời gian ước tính: khoảng 70 phút – 10 phút phác cả 5 ô, 40 phút tô màu và bóng theo dây chuyền (làm cùng một bước cho cả 5 icon rồi mới sang bước tiếp), 20 phút chi tiết và xuất file.

Chuẩn bị

• Canvas (khung vẽ): 640 × 128 px (5 ô × 128 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Mỗi icon nằm gọn trong ô của nó, cách mép ít nhất 8 px.
• Công cụ chính: Rectangle Tool và Ellipse Tool (U) cho khối cơ bản, Pen Tool (Bút tạo đường) (P) cho cành mai và nắp lì xì, Brush (Cọ vẽ) Tool (B) Hard Round cho bóng, Clipping Mask (Mặt nạ cắt) (⌘ Cmd+⌥ Option+G), Layer Style Stroke để mọi viền dày đúng 2,5 px.
• Thiết bị: bộ icon dựng phần lớn bằng Shape nên chuột làm tốt hoàn toàn. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (qua Sidecar hay Astropad) giúp vẽ cành mai và nét thư pháp câu đối tự nhiên hơn: bật F5 › Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút). Dùng chuột: vẽ cành bằng Pen Tool rồi chuột phải › Stroke Path, tích Simulate Pressure để nét thon hai đầu.
• File mẫu: "Lưới 5 ô 128 px" ở cuối bài – mở bằng FileTệp›Place Embedded, đặt trên cùng, Opacity (Độ mờ đục) 50% và khóa. Vùng hồng là lề an toàn, đường đứt hồng là đáy vật (y = 112) – mọi icon "đứng" trên cùng một đường để khi xếp hàng trong cửa hàng không cái nào lơ lửng.

Các bước

1. Tạo file và lưới: FileTệp›NewTạo mới (⌘ Cmd+N), 640 × 128 px, Transparent. Photoshop›SettingsCài đặt›Guides, Grid & Slices: Gridline Every 128 Pixels, Subdivisions 1, bật ViewHiển thị›ShowHiện›GridLưới (⌘ Cmd+'). Đặt file mẫu lên trên cùng và khóa. Lưu ngay thành event_tet_icons.psd.
2. Nạp bảng màu một lần: mở WindowCửa sổ›SwatchesBảng mẫu màu, bấm biểu tượng thư mục để tạo Group Tet, rồi lần lượt chọn 9 màu ở bảng trên và bấm Create new swatch. Từ giờ chỉ lấy màu từ Group này – đó là cách đơn giản nhất để 5 icon "cùng một nhà".
3. Phác cả 5 ô cùng lúc (10 phút): layer Sketch, cọ Hard Round 3 px, Opacity 30%. Mỗi icon chỉ là một hình khối lớn: bánh chưng = hình vuông, lì xì = chữ nhật đứng, cành mai = đường chéo từ dưới trái lên trên phải, câu đối = hai chữ nhật cao, pháo = chuỗi hình trụ dọc. Kiểm tra: năm bóng dáng phải khác nhau khi nheo mắt – vuông, đứng, chéo, đôi, chuỗi.
4. Bánh chưng: Rectangle Tool, kéo hình 64 × 64 px ở ô 1, Properties › bo góc 6 px, Fill #4c9a3c. Layer Style › Stroke: Size 2,5 px, Position Inside, Color #1b1a24 – chuột phải layer › Copy Layer Style để dán cho mọi khối sau. Lạt tre: hai đường dọc và hai đường ngang 4 px màu #efe2a8 (Line Tool, giữ ⇧ Shift), chia mặt bánh thành 9 ô như bánh thật.
5. Bao lì xì: chữ nhật 48 × 70 px bo 5 px màu #d62f3a. Nắp: Pen Tool vẽ ngũ giác (hai cạnh trên thẳng, đáy nhọn xuống giữa) màu #e8423b sáng hơn thân một chút. Đồng tiền: Ellipse 20 px #f2c14e đặt ngay đỉnh nhọn của nắp – điểm nhấn vàng duy nhất, mắt sẽ dừng ở đây.
6. Cành mai: Pen Tool vẽ cành chéo, đầu gốc dày 8 px, ngọn mảnh 3 px, tách một nhánh phụ – Fill #8f5a32. Hoa: Ellipse Tool vẽ 5 hình tròn nhỏ xếp vòng (hoặc một hình tròn rồi ⌘ Cmd+⌥ Option+T xoay 72° quanh tâm, nhấn ⌘ Cmd+⇧ Shift+⌥ Option+T ba lần), màu #ffd23f, nhụy cam #e8742a. Vẽ 6 bông to nhỏ khác nhau, bông to nhất ở ngọn.
7. Câu đối: hai chữ nhật 24 × 80 px #d62f3a cách nhau 16 px, trục gỗ #8f5a32 ở trên và dưới, viền trong vàng 1,5 px. Chữ thư pháp ở cỡ 128 px không đọc được – thay bằng 5–6 nét cọ đen ngắn, đậm nhạt khác nhau, gợi cảm giác thư pháp chữ Việt. Nếu muốn có chữ thật, để dành cho bản icon 512 px.
8. Pháo giấy trang trí: dây dọc ở giữa ô 5, bốn hình trụ 26 × 16 px #e8423b xếp so le trái phải, mỗi trụ hai sọc vàng 2 px. Dưới cùng là tua vàng hình thang. Đây là pháo giấy treo trang trí quen thuộc ngày Tết – vẽ tua và dây, không vẽ tia lửa hay khói nổ.
9. Đổ bóng cho cả bộ cùng lúc: trên mỗi khối màu tạo layer mới, ⌘ Cmd+⌥ Option+G để kẹp, cọ Hard Round tô dải bóng ở mặt phải và mặt dưới bằng màu bóng tương ứng (#a01f2b, #2f6f2a…). Làm bóng cho icon 1 → 5 liền một mạch, không quay lại phác – dây chuyền giúp bóng đều tay.
10. Vệt sáng trên trái: layer kẹp mới, chế độ Normal, cọ Hard Round 4–6 px màu sáng hơn nền 2 bậc (vd #86c868 cho lá dong, #f0646c cho lì xì). Một vệt dọc mép trái, một vệt ngang mép trên. Cành mai: chấm sáng #fff4b0 ở cánh trên trái mỗi bông.
11. Kiểm tra cỡ thật: WindowCửa sổ›Arrange›New Window for event_tet_icons.psd, ở cửa sổ mới zoom 50% (bằng cỡ hiển thị 64 px trên điện thoại). Icon nào "nhòe" thì bỏ bớt chi tiết; icon nào trông nhẹ hơn các icon khác thì tăng bóng hoặc viền.
12. Đặt tên layer và gom Group: mỗi icon một Group: 01_banh_chung, 02_li_xi, 03_canh_mai, 04_cau_doi, 05_phao_giay. Ẩn layer Sketch và file mẫu.
13. Xuất và đưa vào Unity 6: FileTệp›Export›Export AsXuất ra (tùy chỉnh) (⌥ Option+⇧ Shift+⌘ Cmd+W), PNG, Transparency (Độ trong suốt) bật → event_tet_icons.png đúng 640 × 128 px. Trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Apply; mở Sprite Editor › Slice › Type Grid By Cell Size, Pixel Size 128 × 128, Slice, Apply. Kéo từng sprite vào component Image của nút trong cửa hàng sự kiện. Gom 5 sprite vào một Sprite Atlas (Assets›Create›2D›Sprite Atlas) để cả cửa hàng chỉ tốn một lần vẽ (draw call).

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

• Bản icon 512 px cho banner: nhân đôi file, ImageHình ảnh›Image SizeKích thước ảnh ×4 (Resample (Lấy mẫu lại): Preserve Details), rồi vẽ thêm chi tiết chỉ hợp với cỡ lớn: vân lá dong, nét thư pháp chữ "An Khang" thật trên câu đối, hoa văn mây trên lì xì.
• Trạng thái "đã nhận": nhân đôi Group mỗi icon, thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) kẹp vào, Saturation −80, Lightness +20, và một dấu tích xanh ở góc – dùng cho phần thưởng đã lĩnh.
• Hoa đào thay mai: đổi cành mai vàng (miền Nam) thành cành đào hồng #ff9ab8 (miền Bắc) bằng một Adjustment Layer Hue/Saturation kẹp vào Group hoa – thử xem người chơi vùng nào thích bản nào.