Lộ trình › Thử thách theo chủ đề › Bài 204/218
Thử thách 1: Bộ 5 icon Tết cho sự kiện game
Vẽ năm icon Tết – bánh chưng, bao lì xì, cành mai, câu đối, pháo giấy – trên sheet 640 × 128 px (5 ô 128 px) với cùng một nét viền, cùng hướng sáng và cùng bảng màu đỏ – vàng – xanh lá dong, rồi cắt thành 5 sprite cho cửa hàng sự kiện trong Unity 6.
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: (Ctrl+O).
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) (Ctrl+Alt+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 , đặ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.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#d62f3a | Đỏ Tết – lì xì, câu đối, pháo | |
#a01f2b | Đỏ bóng – mặt phải, mặt dưới | |
#f2c14e | Vàng kim – đồng tiền, viền câu đối, tua | |
#ffd23f | Vàng hoa mai | |
#4c9a3c | Lá dong bánh chưng | |
#2f6f2a | Lá dong bóng | |
#efe2a8 | Lạt tre buộc bánh | |
#8f5a32 | Gỗ trục câu đối, cành mai | |
#1b1a24 | Viền chung cho cả bộ |
Các bước
- Tạo file và lưới: (Ctrl+N), 640 × 128 px, Transparent. : Gridline Every 128 Pixels, Subdivisions 1, bật (Ctrl+'). Đặt file mẫu lên trên cùng và khóa. Lưu ngay thành
event_tet_icons.psd. - Nạp bảng màu một lần: mở , 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à".
- 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.
- 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. - 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#e8423bsá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. - 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 Ctrl+Alt+T xoay 72° quanh tâm, nhấn Ctrl+Shift+Alt+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. - Câu đối: hai chữ nhật 24 × 80 px
#d62f3acá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. - Pháo giấy trang trí: dây dọc ở giữa ô 5, bốn hình trụ 26 × 16 px
#e8423bxế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ổ. - Đổ bóng cho cả bộ cùng lúc: trên mỗi khối màu tạo layer mới, Ctrl+Alt+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. - 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
#86c868cho lá dong,#f0646ccho 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. - Kiểm tra cỡ thật: , ở 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.
- Đặ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.
- Xuất và đưa vào Unity 6: (Alt+Shift+Ctrl+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 () để cả cửa hàng chỉ tốn một lần vẽ (draw call).
Mẹo: Muốn cả bộ có "không khí Tết" mà không rối, chỉ dùng hai màu chủ đạo (đỏ và vàng) cho 4/5 icon, và để bánh chưng xanh làm nốt tương phản. Màu xanh lá dong giữa hàng đỏ làm cả dải icon có nhịp, mắt người chơi không bị mỏi.
Lỗi hay gặp: Mỗi icon một độ dày viền vì vẽ viền bằng tay lúc 2 px, lúc 4 px. Đặt viền bằng Layer Style Stroke 2,5 px rồi Copy Layer Style – Paste cho mọi khối, cả bộ sẽ đều tuyệt đối.
Nâng cao (tùy chọn)
- Bản icon 512 px cho banner: nhân đôi file, ×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.
Mẹo & trick học nhanh
Làm theo dây chuyền
Đừng hoàn thiện từng icon một. Phác cả 5, rồi tô nền cả 5, rồi bóng cả 5. Tay bạn giữ cùng một "lực" trong mỗi lượt nên cả bộ đồng đều hơn hẳn.
Chung một đường đáy
Đặt đáy mọi icon trên cùng một guide (y = 112). Khi xếp trong cửa hàng, các icon trông như đứng trên một kệ – gọn mắt hơn nhiều so với căn giữa theo chiều dọc.
Văn hóa ở bóng dáng
Người chơi nhận ra bánh chưng nhờ hình vuông xanh có lạt chia ô, nhận ra lì xì nhờ chữ nhật đỏ có điểm vàng. Giữ đúng những dấu hiệu đó, còn chi tiết nhỏ có thể lược bỏ.