Dự án 2: Icon app game mobile 1024 × 1024

Icon app là "bìa sách" của game: người ta lướt cửa hàng ứng dụng và quyết định có bấm vào hay không trong chưa tới một giây. Icon sẽ hiện ở nhiều cỡ – từ 1024 px trên trang cửa hàng tới khoảng 40 px trên màn hình điện thoại – và mỗi hệ điều hành tự cắt nó theo hình riêng: iOS bo góc, nhiều máy Android cắt tròn. Bài học quan trọng nhất: vẽ kín ô vuông, đặt mọi thứ quan trọng trong vòng an toàn, và không tự bo góc.

Hình mẫu

Thời gian ước tính: khoảng 80 phút. Icon chỉ có một nhân vật, một mặt trời làm nền sáng phía sau đầu – không có chữ. Chữ nhỏ không đọc được ở 40 px, và tên game đã hiện ngay dưới icon.

Chuẩn bị

• Canvas: 1024 × 1024 px, Resolution (Độ phân giải) 72, RGB Color, Background Contents: White. Icon cửa hàng không được trong suốt, nên nền phải đặc ngay từ đầu.
• Công cụ chính: Pen Tool (Bút tạo đường) (P) và Polygon Tool cho tai, đầu cáo; Ellipse Tool; Gradient (Dải màu chuyển) Tool (G); Brush (Cọ vẽ) Tool (B) cỡ lớn, mềm cho vầng sáng.
• Thiết bị: khối chính dựng bằng Shape nên chuột vẫn làm được. Bút Wacom, XP-Pen, Huion hay iPad giúp vẽ vệt lông và vầng sáng tự nhiên hơn nhờ lực nhấn (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 thì thay bằng Brush mềm Opacity (Độ mờ đục) 30% và tô nhiều lần.
• File mẫu: "Khung vùng an toàn" – đặt trên cùng, Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)), khóa lại, ẩn trước khi xuất.

Các bước

1. Tạo file Ctrl+N 1024 × 1024 px, Background Contents: White. Đặt file mẫu vùng an toàn lên trên cùng bằng FileTệp›Place Embedded, Blend Mode Multiply, khóa layer (Ctrl+/).
2. Phác hình (layer Sketch): Opacity 30%, Brush 8 px. Vẽ đầu cáo nhìn thẳng chiếm khoảng 60% chiều rộng. Mắt, mũi và hai má phải nằm trong vòng nét đứt (đường kính 676 px); đầu tai được phép chạm vòng ngoài.
3. Nền gradient: layer Sky dưới cùng. Gradient Tool G, kiểu Linear, mở Gradient Editor đặt 3 điểm màu #ffb35c – #ff6f61 – #7b4bd6, kéo từ trên xuống dưới (giữ Shift để kéo thẳng). Tô kín cả 1024 × 1024.
4. Mặt trời và đồi: Ellipse Tool vẽ hình tròn 560 × 560 px, Fill #ffd36b, đặt ngay sau đầu cáo – vùng sáng nhất của icon nằm sau mặt nhân vật để kéo mắt người xem. Pen Tool vẽ dải đồi uốn lượn ở 1/4 dưới, Fill #5b3a9e, kéo tràn ra hai mép.
5. Tai cáo: Polygon Tool hoặc Pen Tool vẽ 2 tam giác tai, Fill #ff7a2f, Stroke Inside 18 px màu #2b1a24. Vẽ thêm tam giác nhỏ hơn bên trong tai màu #7a2e1f.
6. Đầu cáo: Pen Tool vẽ khối đầu hình "khiên" – rộng ở trán, nhọn dần về cằm. Cùng Fill và Stroke như tai. Tai đặt dưới layer đầu để đường nối gọn.
7. Má và mõm trắng: Pen Tool vẽ 2 mảng má hình giọt nước chạy từ mắt xuống mõm, Fill #fff4e6, Stroke 14 px. Mũi là elip tối 70 × 48 px ở mõm.
8. Mắt: 2 elip đứng 56 × 76 px màu #2b1a24, cách nhau khoảng một bề rộng mắt. Mắt to và tròn cho cảm giác thân thiện; mắt nheo dài cho game hành động.
9. Đổ bóng: layer kẹp vào đầu (Ctrl+Alt+G), Lasso (Dây thòng lọng) (L) vẽ mảng lưỡi liềm ở cằm và nửa dưới, tô #d9541b. Một mảng bóng lớn, rõ đọc tốt hơn nhiều mảng nhỏ khi icon chỉ còn 40 px.
10. Ánh sáng: layer kẹp thứ hai, Brush cứng tô vệt sáng #ffb07a ở trán bên trái. Thêm điểm lóe trắng 22 px ở góc trên – trái mỗi mắt và một chấm nhỏ trên mũi – mắt "có hồn" là nhờ điểm lóe này.
11. Vầng sáng và lấp lánh: layer mới trên Sky, Blend Mode Screen, Brush mềm lớn màu #fff1b8 chấm một lần giữa mặt trời. Vẽ 2 ngôi sao lấp lánh 4 cánh ở góc (vẫn trong vùng an toàn của iOS).
12. Xem thử mặt nạ: tạo bản sao bằng ImageHình ảnh›DuplicateNhân bản, trên bản sao chọn LayerLớp›Flatten ImageGộp phẳng toàn bộ. Vẽ Rectangle 1024 × 1024 bán kính góc 229 px, Ctrl + bấm vào thumbnail của nó để lấy vùng chọn, ẩn nó đi rồi chọn layer ảnh và bấm Add layer mask ở đáy bảng Layers – đây là hình iOS sẽ hiển thị. Làm lại với hình tròn đường kính 676 px cho Android. Mắt, mũi, má phải còn nguyên ở cả hai bản.
13. Xuất PNG: ẩn layer Sketch và file mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, tắt Transparency (Độ trong suốt) → icon_1024.png 1024 × 1024 px. Google Play cần thêm bản 512 × 512: Export As (Xuất ra (tùy chỉnh)) lần nữa, ô Size đặt 512 px.
14. Đưa vào Unity 6: kéo PNG vào Project, giữ Texture Type Default. Mở EditChỉnh sửa›Project Settings › Player › ô Default Icon (góc trên) – kéo icon_1024.png vào. Ở tab Android, mục Icon › Adaptive: tách lớp nền (Sky + đồi + mặt trời) và lớp nhân vật thành 2 ảnh vuông riêng, gán vào Background và Foreground (Màu tiền cảnh). Unity tự tạo các cỡ nhỏ khi Build.

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

• Ảnh nổi bật cửa hàng (feature graphic) 1024 × 500: canvas mới 1024 × 500 px, kéo nhân vật từ icon sang bên trái, thêm tên game bằng Type Tool bên phải – ở cỡ này chữ đọc được.
• Phiên bản theo mùa: thêm mũ ông già Noel hoặc lồng đèn Trung thu trên layer riêng – game mobile thường đổi icon theo sự kiện để kéo người chơi quay lại.
• Thử A/B: làm thêm một bản nền xanh lạnh #2f6fd6 và đặt cạnh bản cam để so xem bản nào nổi bật hơn giữa các icon khác.