Lộ trình › Key art & marketing cho game › Bài 194/218

Dự án 6: Feature graphic Google Play 1024 × 500

Làm ảnh feature graphic – biểu ngữ lớn trên trang Google Play: chủ thể ở 1/3 trái, logo bên phải, giữa khung để trống cho nút Play khi có video quảng cáo, lề an toàn quanh mép, JPG/PNG 24-bit không trong suốt và dưới 1 MB.

Nâng cao 60 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).

Feature graphic là ảnh ngang 1024 × 500 px mà Google Play dùng ở đầu trang ứng dụng, trong các mục giới thiệu và làm ảnh bìa cho video quảng cáo (promo video). Nó là bức "poster ngang" đầu tiên người xem thấy, nên phải truyền đạt phong cách game chỉ trong một cái liếc. Ràng buộc đặc biệt: khi bạn gắn video YouTube cho trang cửa hàng, Google Play phủ nút Play ở giữa feature graphic – mọi chi tiết quan trọng ở chính giữa sẽ bị che. Bài này dạy bạn bố cục theo một phần ba, làm việc từ key art có sẵn (Smart Object (Đối tượng thông minh)), và chuẩn hóa xuất file cho cửa hàng.

Hình mẫu

Feature graphic 1024 × 500: hiệp sĩ, cô gái cầm đèn và chú cáo ở một phần ba bên trái trên nền hoàng hôn tím có núi và đền, logo Lantern Quest và khẩu hiệu ở bên phải, vòng đứt nét giữa khung là chỗ nút Play phủ lên; bên dưới là mô phỏng trang cửa hàng thu nhỏ có nút Install
Feature graphic 1024 × 500: hiệp sĩ, cô gái cầm đèn và chú cáo ở một phần ba bên trái trên nền hoàng hôn tím có núi và đền, logo Lantern Quest và khẩu hiệu ở bên phải, vòng đứt nét giữa khung là chỗ nút Play phủ lên; bên dưới là mô phỏng trang cửa hàng thu nhỏ có nút Install

Thời gian ước tính: khoảng 60 phút. Google Play yêu cầu feature graphic đúng 1024 × 500 px, định dạng JPG hoặc PNG 24-bit không có kênh trong suốt. Bài này đặt thêm giới hạn dưới 1 MB để trang tải nhanh.

Chuẩn bị

  • Canvas: 1024 × 500 px, RGB Color, 8 bit. Tỉ lệ khoảng 2:1 – dài hơn 16:9, nên không thể đặt nguyên key art 16:9 vào mà phải bố cục lại.
  • Công cụ chính: Smart Object (đặt key art hoặc nền đã vẽ), Free Transform (Biến đổi tự do) (Ctrl+T), Layer Mask (Mặt nạ lớp), Gradient (Dải màu chuyển) Tool kiểu Radial cho ánh sáng, Type Tool / logo PNG, FileTệp›Export›Export AsXuất ra (tùy chỉnh).
  • Thiết bị: chủ yếu là ghép và bố cục – chuột làm tốt. Nếu cần vẽ nối dài nền (key art 16:9 không đủ rộng), bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) giúp vẽ đè mép núi, mây tự nhiên hơn; dùng chuột thì kéo dài nền bằng EditChỉnh sửa›Content-Aware Fill rồi sửa lại bằng Clone Stamp (Con dấu nhân bản).
  • File mẫu: "Khung feature graphic" – đặt trên cùng, khóa. Viền xanh là lề an toàn 60 px ngang, 40 px dọc; vòng hồng giữa là nút Play; vạch dọc ở x ≈ 341 chia một phần ba trái.
  • Tư liệu: nền, nhân vật và logo bạn đã làm ở các dự án trước (PNG trong suốt). Nếu chưa có logo, làm tạm bằng Type Tool như dự án 1.
MàuMã hexDùng cho
#1b1036Trời đêm – mép trên
#5a2a6eTím nền, núi xa
#e0705aCam chân trời
#ffc24aVàng logo
#2a1238Viền chữ
#fff3e0Khẩu hiệu

Các bước

Sáu giai đoạn: đặt lề an toàn và vòng nút Play, ghép nền từ key art bằng Smart Object, đặt nhóm nhân vật ở một phần ba trái, thêm logo và khẩu hiệu bên phải, thống nhất ánh sáng và vignette, xem thử trên trang cửa hàng
Sáu giai đoạn: đặt lề an toàn và vòng nút Play, ghép nền từ key art bằng Smart Object, đặt nhóm nhân vật ở một phần ba trái, thêm logo và khẩu hiệu bên phải, thống nhất ánh sáng và vignette, xem thử trên trang cửa hàng
  1. Tạo file và vùng cấm: 1024 × 500 px. Đặt file mẫu, khóa. Đánh dấu ba vùng trong đầu: trái (0–341) cho chủ thể, giữa (vòng nút Play, bán kính ~70 px) để thoáng, phải (600–964) cho logo.
  2. Nền từ key art: FileTệp›Place Embedded ảnh nền (hoặc key art) dưới dạng Smart Object. Ctrl+T, giữ tỉ lệ, phóng to cho phủ kín chiều ngang 1024 – phần trên dưới bị cắt là bình thường. Chọn đoạn nền có đường chân trời ở khoảng 60–65% chiều cao.
  3. Nối dài nền nếu thiếu: nếu nền 16:9 không đủ rộng, Rectangular Marquee (Khung chọn) chọn vùng trống ở mép, EditChỉnh sửa›Content-Aware Fill để Photoshop vẽ tiếp. Sửa chỗ lặp lộ bằng Clone Stamp (S) trên một layer mới (Sample: Current & Below).
  4. Nhóm nhân vật ở 1/3 trái: Place Embedded từng nhân vật. Nhân vật chính to nhất, đặt ở vạch 1/3; nhân vật phụ thấp và lùi phía sau; thú cưng phía trước. Chân nhân vật có thể bị mép dưới cắt – cắt ở đùi hoặc đầu gối trông chủ ý, cắt ở mắt cá thì trông như sai sót.
  5. Hướng nhìn: nếu nhân vật nhìn sang trái (ra ngoài khung), dùng EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang để họ nhìn vào trong – về phía logo. Ánh nhìn nhân vật dẫn mắt người xem.
  6. Hòa màu nhân vật vào nền: layer Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G) cho từng nhân vật: một layer Multiply (Nhân (làm tối)) tô tím #5a2a6e Opacity (Độ mờ đục) 25% ở phần dưới; một layer Screen tô cam #e0705a Opacity 30% ở mép phía chân trời. Nhân vật giờ nhận cùng ánh sáng với nền.
  7. Logo bên phải: đặt logo (Smart Object hoặc Type) căn giữa vùng phải, cạnh trái của logo không chạm vòng nút Play. Chiều rộng logo khoảng 35–40% khung. Logo không cần quá to – feature graphic luôn hiển thị cạnh tên ứng dụng.
  8. Khẩu hiệu: một dòng dưới logo, cỡ khoảng 28 px ở file gốc, mô tả thể loại ("RPG phiêu lưu thắp đèn"). Không viết lời quảng cáo kiểu "Game số 1", "Tải ngay miễn phí" – chính sách Google Play hạn chế chữ khuyến mại, xếp hạng trong ảnh đồ họa.
  9. Ánh sáng tụ vào chủ thể: layer Glow chế độ Screen, Gradient Radial vàng → trong suốt, đặt phía sau đầu nhân vật chính. Layer Vignette: Gradient Radial trong suốt → đen, chế độ Multiply, Opacity 60%. Mép tối giúp ảnh không "tràn" vào nền trắng của cửa hàng.
  10. Kiểm tra nút Play: bật file mẫu, nhìn vòng hồng: trong vòng chỉ nên có nền (trời, núi). Nếu đầu nhân vật hay chữ lọt vào, dịch nhóm nhân vật sang trái hoặc logo sang phải.
  11. Kiểm tra cỡ nhỏ: trên điện thoại, feature graphic chỉ rộng khoảng 360–400 px. Mở WindowCửa sổ›Arrange›New Window for… zoom 35%. Logo vẫn đọc được? Nhân vật vẫn nhận ra?
  12. Làm phẳng màu và xuất: ẩn file mẫu. FileTệp›Export›Export AsXuất ra (tùy chỉnh): JPG Quality 85, Convert to sRGB. Hộp thoại hiện dung lượng – giữ dưới 1 MB. Nếu muốn PNG, chọn PNG và bỏ tích Transparency (Độ trong suốt) để ra PNG 24-bit không alpha.
  13. Lưu file nguồn: lưu PSD với các Smart Object – mùa sự kiện sau bạn chỉ thay nhân vật hoặc nền, bố cục vẫn đúng chuẩn.
Mẹo: Thử đặt feature graphic cạnh icon game và tên game (như mô phỏng trong hình mẫu). Ba thứ này luôn xuất hiện cùng nhau – màu nền feature graphic nên hợp với nền icon để trang cửa hàng trông như một bộ nhận diện thống nhất.
Lỗi hay gặp: Đặt nhân vật chính ngay giữa ảnh như key art. Khi có video quảng cáo, nút Play phủ đúng lên mặt nhân vật – người xem thấy một vòng tròn đen trên mặt nhân vật chính. Hãy dời chủ thể sang 1/3 trái.

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

  • Phiên bản sự kiện: tạo Layer Comps "Mặc định", "Tết", "Halloween" – mỗi comp thay nhân vật/trang phục và màu ánh sáng – để thay feature graphic theo mùa chỉ bằng vài cú bấm.
  • Ảnh bìa video: xuất thêm bản 1280 × 720 từ cùng Smart Object làm thumbnail cho chính video quảng cáo – người xem bấm Play thấy hình nhất quán.
  • Ảnh cho Galaxy Store, cửa hàng khác: nhiều cửa hàng dùng ảnh banner ngang với tỉ lệ khác; giữ Smart Object và chỉ dựng lại bố cục trên Artboard (Bảng vẽ con) mới thay vì kéo giãn ảnh 1024 × 500.

Mẹo & trick học nhanh

Giữa khung là của nút Play

Khi trang có video, nút Play phủ lên chính giữa feature graphic. Đặt chủ thể ở 1/3 trái và logo bên phải.

Không alpha, không chữ khuyến mại

Xuất JPG hoặc PNG 24-bit không trong suốt. Tránh "Top 1", "Miễn phí", giá tiền, xếp hạng trong ảnh – chỉ cần logo và khẩu hiệu thể loại.

Làm từ key art bằng Smart Object

Đặt key art làm Smart Object rồi bố cục lại theo khung mới. Khi key art được sửa, chỉ cần cập nhật Smart Object.

Kiểm tra nhanh

1 Vì sao không đặt mặt nhân vật chính ở giữa feature graphic?
2 Định dạng nào hợp lệ cho feature graphic Google Play?
3 Cách nào giúp nhân vật dán vào trông "cùng ánh sáng" với nền hoàng hôn?

Bài tập: Feature graphic cho trang Google Play của game bạn

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