Dự án 4: Poster sự kiện trong game 900 × 1200
Thiết kế poster báo sự kiện hiện ngay khi người chơi mở game – "Lễ hội Đèn lồng" dịp Tết: thứ bậc đọc tiêu đề → nhân vật & phần thưởng → ngày & nút, chừa chỗ nút đóng của game, kiểm tra value bằng ảnh trắng đen và đưa lên giao diện 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.
Tải về rồi mở bằng Photoshop: (Ctrl+O).
Game mobile và game online thường mở đầu bằng một poster sự kiện (event pop-up): "Lễ hội Đèn lồng – nhận skin giới hạn!". Người chơi chỉ nhìn nó vài giây trước khi bấm đóng, nên poster phải trả lời ba câu hỏi theo đúng thứ tự: Đây là sự kiện gì? → Tôi được gì? → Đến bao giờ, bấm vào đâu?. Thứ tự đó gọi là thứ bậc thị giác (visual hierarchy) và là kỹ năng nền của mọi ảnh marketing bạn làm sau này. Dự án dùng chủ đề Tết với đỏ – vàng truyền thống, nhưng cách chia vùng áp dụng cho mọi sự kiện: Halloween, Trung thu, mùa giải mới.
Hình mẫu
Thời gian ước tính: khoảng 55 phút. Khung 900 × 1200 px (tỉ lệ 3:4) vừa hiển thị đẹp dạng pop-up trên cả điện thoại dọc lẫn màn hình ngang (có viền tối hai bên).
Chuẩn bị
- Canvas: 900 × 1200 px, RGB Color, 8 bit.
- Công cụ chính: Guides (Đường gióng), Gradient (Dải màu chuyển) Tool (G), + Layer Style Pattern Overlay (Phủ chồng) cho họa tiết mây, Ellipse Tool (U) cho đèn lồng, Rectangle Tool có bo góc cho ô phần thưởng và nút, Type Tool (T), Adjustment Layer (Lớp điều chỉnh) Black & White để kiểm tra value.
- Thiết bị: toàn bộ poster làm được bằng chuột vì dựa trên Shape, Pattern và Type. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) hữu ích khi vẽ họa tiết mây tay hoặc thêm vệt sáng mềm quanh nhân vật (cọ Soft Round, Pen Pressure (Lực nhấn bút) ở Opacity (Độ mờ đục)).
- File mẫu: "Khung poster sự kiện" – đặt trên cùng, khóa, Opacity 50%. Các vạch ngang chia vùng: 0–330 tiêu đề, 330–800 nhân vật, 820–890 ngày, 910–1060 phần thưởng, 1070–1180 nút. Vòng hồng góc trên phải là chỗ nút X (đóng) của game.
- Font: tiêu đề tiếng Việt cần font hỗ trợ đủ dấu (ví dụ các font trên Google Fonts có tích Vietnamese, giấy phép OFL dùng thương mại được). Font lỗi dấu là lỗi bị người chơi chụp màn hình chê nhiều nhất.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#c8282e | Đỏ Tết – nền trên | |
#5a0a18 | Đỏ thẫm – chân nền | |
#ffcf5c | Vàng đèn – viền, họa tiết, ruy băng | |
#e0473a | Thân đèn lồng | |
#3a0a14 | Viền chữ nâu đỏ, nền ô phần thưởng | |
#2ecc71 | Nút hành động – màu đối lập với nền đỏ |
Các bước
- Viết nội dung trước khi vẽ: ghi ra 4 dòng: tên sự kiện (≤ 4 từ), phần thưởng (3 món), thời gian, lời kêu gọi (1 động từ: "THAM GIA"). Poster không có chỗ cho đoạn văn – mọi chi tiết luật chơi để ở màn hình bên trong sự kiện.
- Chia vùng: tạo file, đặt file mẫu, kéo guide theo các vạch (hoặc Margin 48 px). Đánh số thứ bậc: 1 = tiêu đề, 2 = nhân vật + phần thưởng, 3 = ngày + nút. Nút X góc trên phải là của game – không đặt gì quan trọng ở đó.
- Nền đỏ: layer BG, Gradient Linear từ
#c8282e(trên) tới#5a0a18(dưới). Nền tối dần xuống đáy giúp ô phần thưởng sáng màu nổi lên. - Họa tiết mây: file mới 150 × 150 px trong suốt, vẽ hai đường xoắn mây bằng Pen Tool (Bút tạo đường), Stroke 5 px vàng. . Quay lại poster: layer mới tô đầy, Layer Style Pattern Overlay chọn pattern vừa tạo, Opacity 20%. Họa tiết phải mờ – nó là "giấy dán tường", không được cạnh tranh với chữ.
- Quầng sáng giữa: layer Glow chế độ Screen, cọ Soft Round 800 px màu
#ffcf5cchấm một lần sau lưng nhân vật. Vùng sáng nhất ảnh kéo mắt về đó trước. - Đèn lồng treo: Ellipse Tool vẽ thân đèn
#e0473a, Stroke 5 px vàng; hai đường cong vàng trên thân làm nan; hai hình chữ nhật vàng làm miệng đèn trên dưới; một đường thẳng làm dây treo. Gom thành Group, nhân bản ra 4 đèn (2 lớn ở trên, 2 nhỏ thấp hơn) đối xứng hai bên – bố cục đối xứng hợp không khí lễ hội. - Nhân vật: nhân vật PNG, đặt giữa vùng 330–800, chân chạm vạch 800. Nhân vật nhìn thẳng hoặc hơi nghiêng về phía người xem – poster là lời mời trực tiếp.
- Tiêu đề: Type Tool hai dòng "LỄ HỘI" / "ĐÈN LỒNG", cỡ khoảng 110–120 px, Layer Style Gradient Overlay vàng, Stroke 18 px
#3a0a14, Drop Shadow Distance 6. Kiểm tra dấu tiếng Việt không bị font thay bằng ô vuông hay dấu lệch chỗ. - Dải ngày: Pen Tool vẽ ruy băng có hai đuôi cắt chữ V, Fill vàng
#ffcf5c, Stroke nâu. Chữ ngày "01.02 – 15.02" màu đỏ thẫm, cỡ khoảng 52 px. Dùng dấu gạch ngang dài (–) giữa hai ngày, không dùng dấu trừ ngắn. - Ba ô phần thưởng: Rectangle Tool, Radius 24 px, 170 × 150 px, Fill
#2a0a14, Stroke vàng 6 px. Nhân ba ô, chọn cả ba và bấm Distribute Horizontal Centers trên thanh Options để cách đều. Trong mỗi ô đặt icon (xu, ngọc, hộp skin – lấy lại icon bạn đã vẽ ở chặng icon) và số lượng "x500", "x20", "SKIN" bên dưới. - Nút hành động: Rounded Rectangle 320 × 88 px, Radius 44 (bo tròn hẳn), màu xanh
#2ecc71– màu duy nhất trên poster không thuộc dải đỏ – vàng, nên mắt tìm thấy ngay. Chữ "THAM GIA" trắng, đậm. Thêm Inner Shadow nhẹ dưới đáy để nút trông bấm được. - Kiểm tra value: thêm Adjustment Layer Black & White trên cùng. Trong ảnh xám, thứ tự sáng nhất phải là: tiêu đề và quầng sáng → nhân vật → nút. Nếu nút chìm, làm nút sáng hơn hoặc viền nút tối hơn. Xem xong thì ẩn layer này.
- Thử cỡ nhỏ và xuất: mở zoom 25% để xem như trên điện thoại nhỏ. Ẩn file mẫu, PNG, Convert to sRGB →
event_lantern_900x1200.png. Trong Unity 6: Texture Type Sprite (2D and UI), đặt vào một UI Image trong Canvas, tích Preserve Aspect để poster không bị kéo méo trên màn hình khác tỉ lệ.
Nâng cao (tùy chọn)
- Biến thể ngang 16:9: dùng lại các Smart Object, xếp tiêu đề bên trái và nhân vật bên phải trên Artboard (Bảng vẽ con) 1920 × 1080 để đăng fanpage cùng lúc.
- Đồng hồ đếm ngược: chừa một ô trống dưới dải ngày cho chữ "Còn 3 ngày" – lập trình viên sẽ ghi số bằng TextMeshPro trong Unity thay vì vẽ cứng vào ảnh.
- Bản nhiều ngôn ngữ: tách toàn bộ chữ ra Group riêng và xuất poster không chữ; chữ gắn trong game bằng hệ thống Localization để không phải vẽ lại cho từng thứ tiếng.
Mẹo & trick học nhanh
Sự kiện gì? Được gì? Bao giờ, bấm đâu? Mỗi câu một tầng thứ bậc, đọc từ trên xuống, to nhất ở trên.
Màu nút hành động không nên xuất hiện ở bất kỳ đâu khác trên poster. Mắt người chơi tìm thấy nó mà không cần đọc.
Adjustment Layer Black & White cho biết ngay thứ bậc có đúng không: vùng quan trọng phải tương phản mạnh nhất trong ảnh xám.