Якщо ви шукаєте специфікації для всіх графічних елементів Steam, то перегляньте
загальний огляд графічних елементів.
Багато важливих подій у Steam, включно з регулярними курованими рекламними акціями, потребують ілюстрацій з унікальними розмірами.
You can access the full photoshop templates and details here: CURRENT TEMPLATES
(Note: Please use this new template and remove any previous versions)Багато цих графічних елементів ви можете створити самостійно разом зі своєю командою дизайнерів. Будь ласка, надсилайте матеріали до Valve принаймні за тиждень до початку події, щоби ми могли надати вам відгук, а наша команда локалізації мала час для перекладу. Ми завжди перекладаємо банери Steam на більш ніж 26 мов.
ПРИМІТКА: нижче подані вимоги до всіх зображень, які ви будете надсилати.
- **Розмір кожного файлу не повинен перевищувати 5 МБ**
ЩО НАМ ПОТРІБНО НАДІСЛАТИ
- Файли Photoshop (PSD) із шарами.
- Основні ілюстрації гри чи персонажа в найвищій можливій роздільності (надається перевага смартоб’єктам). Якщо буде потрібно, ми зможемо використати їх повторно для створення інших рекламних зображень для Steam.
- Логотип (надається перевага смартоб’єктам), окремо від ілюстрації.
- Увесь текст має бути доступний для редагування в окремій теці «text» у файлі PSD, щоби наша команда змогла без проблем його локалізувати.
- Використані шрифти (особливо нестандартні).
Анімовані елементи- Для анімованих елементів також надайте безшовний зациклений MP4 і PNG без тексту й логотипу. Текст не потрібно анімувати, щоби його без проблем змогла локалізувати наша команда.
- Старайтеся, щоб анімації тривали від 3 до 5 секунд. Це дозволить зменшити остаточний розмір файлу для показу в Steam. Усі остаточні версії експортованих файлів не повинні перевищувати 5 МБ.
- Намагайтеся робити анімації плавними, щоби вони не напружували очі. Вони не повинні привертати увагу.
- Намагайтеся робити анімації з безшовною циклічністю. Будь ласка, врахуйте, що Steam зациклює вашу анімацію автоматично й цю функцію не можна відключити. Безшовне зациклення не є обов’язковою вимогою, але ми настійно рекомендуємо його використовувати для кращих візуальних результатів.
- Усі анімовані маркетингові повідомлення буде експортовано як файли в форматі WebM і MP4.
- Для всього тексту (окрім логотипів гри чи розробника) з повідомленням до користувачів (наприклад, «Уже в Steam» чи «Щойно оновлено») має бути ввімкнена функція редагування, щоб його можна було локалізувати.
- Текст не слід анімувати. Не варто накладати ефекти анімації поверх тексту.
- Не об’єднуйте жодний текстовий шар з тлом чи анімацією.
- Коли експортуєте послідовність PNG чи файл MP4, переконайтеся, що вимкнули всі текстові шари, щоби текст не залишився на тлі.
- Уся важлива інформація повинна вміститися в позначену на шаблоні зеленим безпечну зону, бо на маленьких екранах усе навколо неї може обрізатися.
ЩО НАМ ПОТРІБНО НАДІСЛАТИ
- Файли Photoshop із відеорядом, що містить ваші зображення, повідомлення й анімовану послідовність PNG.
- Теку, що містить усю вашу анімовану послідовність PNG.
- Якщо ви не можете надати послідовність PNG, MP4-файл анімації теж підійде.
- Використані унікальні шрифти, особливо нестандартні.
| Назва елементу | Розмір | Тип | Примітки |
|---|
| Спливні маркетингові повідомлення | 570 на 600 пікселів | JPG, PNG. MP4 і WebM, якщо анімовано | Ілюстрація гри чи оновлення з логотипом гри. Короткий заклик до дії.
Див. подробиці |
| Банер «У центрі уваги» | 306 на 260 пікселів | JPG | Ілюстрація до гри з логотипом. Текст автоматично накладеться знизу.
Див. подробиці |
| Банер угорі крамниці | 1850 на 450 пікселів | JPG, PNG. MP4 і WebM, якщо анімовано | Ілюстрація гри чи оновлення з логотипом гри. Короткий заклик до дії.
Див. подробиці |
| Банер угорі крамниці (мобільна версія) | 500 на 350 пікселів | JPG, PNG. MP4 і WebM, якщо анімовано | Менша версія банера угорі крамниці.
Обов’язкова, якщо використовується банер угорі крамниці
Див. подробиці |
| Банер під каруселлю крамниці | 940 на 150 пікселів | JPG, PNG. MP4 і WebM, якщо анімовано | Ілюстрація гри чи оновлення з логотипом гри. Короткий заклик до дії.
Див. подробиці |
| Банер під каруселлю крамниці (мобільна версія) | 500 на 160 пікселів | JPG, PNG. MP4 і WebM, якщо анімовано | Ілюстрація гри чи оновлення з логотипом гри. Короткий заклик до дії.
Див. подробиці |
| Тло сторінки розпродажу | Див. шаблон для розмірів та обрізання. | JPG, PNG | Зображення, яке з’являється вгорі та на тлі вашої сторінки розпродажу.Обов’язкове, якщо використовується нестандартна головна сторінка розпродажу
Див. подробиці |
| Логотип сторінки розпродажу | 940px x 460px | JPG, PNG | This image is positioned at the top of your page, layered on top of the Sale Page Background.
Optional |
| Банер на сторінці в крамниці | 1100 на 160 пікселів | JPG, PNG | Банер, який привертає увагу до вашого розпродажу.
Обов’язковий, якщо використовується нестандартна головна сторінка розпродажу
Див. подробиці |
| Банер на сторінці в крамниці (мобільна версія) | 500 на 160 пікселів | JPG, PNG | Менша версія банера на сторінці в крамниці.
Обов’язкова, якщо використовується нестандартна головна сторінка розпродажу
Див. подробиці |
Шаблони для ресурсів вище доступні
ТУТ.
Спливні маркетингові повідомлення
Застосування: у спливних вікнах Steam і на головній сторінці Steam.
Приклади місць показу в Steam:
Дизайн: для найкращого результату переконайтеся, що логотип чітко видно, і додайте ЛИШЕ типову рекламну фразу («Акція серед тижня», «Акція на вихідних», «Придбайте дочасно вже зараз», «Уже в Steam», «Уже доступне оновлення» тощо) без відсотків знижки чи дат події. Ціна та кнопка із закликом до дії автоматично з’являться під цим зображенням. Якщо у вас є регіональний логотип, який слід використати для конкретних регіонів, додайте його до PSD-файлу.
Розмір: 570 на 600 пікселів, JPEG.
Розмір відео: 570 на 600 пікселів, MP4 і WebM.
Приклади:| Уже в Steam | Акція на вихідних | Доступний новий завантажуваний вміст |
 |  |  |
| | | |
| Акція серед тижня | Щойно оновлено | |
 |  | |
| | | |
| Придбайте дочасно вже зараз | Завантажте дочасно вже зараз | |
 |  | |
| | | |
| Безкоштовні вихідні | |
 |
Банер «У центрі уваги»
Застосування: банери «У центрі уваги» з’являються вгорі домашньої сторінки Steam для конкретних пропозицій, як-от «Акція серед тижня» чи «Акція на вихідних». Крім того, вони будуть і у відповідних центрах вмісту, як-от на сторінках жанрів чи позначок.
Дизайн: акцентом цього банера мають бути ілюстрація та логотип гри. Банер «У центрі уваги» автоматично згенерує під зображенням розділ з текстом для опису акції (наприклад, «Акція на вихідних») та датою її завершення.
Розмір: 306 на 260 пікселів, JPEG.
Приклади місць показу в Steam:
Банер угорі крамниці
Застосування: використовується лише для випусків найочікуваніших ігор та конкретних розпродажів видавця. Цей банер показується вгорі домашньої сторінки крамниці Steam.
Дизайн: простий, але повинен впадати в око. Зазвичай це одна ключова ілюстрація, що представляє ваш бренд і логотип вашого продукту. Зображення може мати розтушовані краї або переходити до іншого суцільного кольору, якщо основний колір занадто контрастує зі стандартним синім кольором крамниці Steam.
Розмір: 1850 на 450 пікселів, PNG.
Розмір відео: 500 на 350 пікселів, MP4 і WebM.
Банер угорі крамниці (мобільна версія)
Застосування: це версія банера угорі крамниці Steam для мобільних пристроїв. Показуватиметься в браузерах із шириною менше ніж 500 пікселів.
Дизайн: має бути таким самим, як і для банера угорі крамниці, але меншого розміру. Використовуйте повнорозмірне зображення і заповніть простір логотипом та закликом до дії.
Розмір: 550 на 350 пікселів, PNG.
Розмір відео: 940 на 150 пікселів, MP4 і WebM.
Банер під каруселлю крамниці
Застосування: використовується лише для випусків деяких найочікуваніших ігор та конкретних розпродажів видавця. Показується у верхній частині домашньої сторінки крамниці Steam, одразу під каруселлю головної капсули.
Дизайн: простий, але повинен впадати в око. Зазвичай це одна ключова ілюстрація, що представляє ваш бренд і логотип вашого продукту. Це зображення буде показане як банер, тож ви можете використовувати весь простір елемента (без розтушованих країв).
Розмір: 940 на 150 пікселів, PNG.
Розмір відео: 500 на 160 пікселів, MP4 і WebM.
Банер під каруселлю крамниці (мобільна версія)
Застосування: це версія банера під каруселлю крамниці Steam для мобільних пристроїв. Показуватиметься в браузерах із шириною менше ніж 500 пікселів.
Дизайн: має бути таким самим, як і для банера під каруселлю крамниці, але меншого розміру. Використовуйте повнорозмірне зображення і заповніть простір логотипом та закликом до дії.
Розмір: 500 на 160 пікселів, PNG.
Розмір відео: 500 на 160 пікселів, MP4 і WebM.
Тло сторінки розпродажу
Застосування: це зображення показується вгорі й на тлі вашої сторінки розпродажу.
Дизайн: важливий вміст слід розміщувати в безпечній зоні шаблону, позначеній лаймово-зеленим полем шириною 940 пікселів. За потреби ілюстрація може виходити за межі збоку чи внизу сторінки. Наприклад, ви можете завантажити ілюстрацію для тла шириною 1789 пікселів із градієнтним переходом до суцільного кольору з боків і знизу, а потім у Steamworks установити колір тла сторінки, який би відповів цьому суцільному кольору.
Банер на сторінці в крамниці
Застосування: цей банер можна встановити вгорі сторінки в крамниці кожної гри, що бере участь у вашій події. Ви можете використовувати банери на сторінках в крамниці, лише якщо авторам кожної гри, яка є на вашій сторінці розпродажу, відомо про них, і вони їх схвалюють. Іншими словами, поява вашого банера на сторінці гри в крамниці не повинна стати сюрпризом для розробників цієї гри.
Дизайн: простий, але повинен впадати в око. Зазвичай це одна ключова ілюстрація, що представляє розпродаж.
Розмір: 1100 на 160 пікселів, PNG.
Банер на сторінці в крамниці (мобільна версія)
Застосування: це версія банера на сторінці в крамниці для мобільних пристроїв. Показуватиметься в браузерах із шириною менше ніж 500 пікселів.
Дизайн: має бути таким самим, як і для банера на сторінці в крамниці, але меншого розміру. Використовуйте повнорозмірне зображення і заповніть простір логотипом та закликом до дії.
Розмір: 500 на 160 пікселів, PNG.
