5 подписчиков

Как сделать Иллюстрацию для витрины Steam

803 прочитали
Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.

Решим этот вопрос на моем примере, как делал это именно я.

Для начала я купил задний фон в Магазине очков Steam:

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-2

Купил я себе анимированный фон. Со статичным намного проще.

после чего перешел на сайт https://backgrounds.gallery/ru/animated

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-3

Нашел свой фон, и нажал справа Вырезать Фон.

После чего нажимаем Скачать ZIP. Там я не знал что выбрать и оставил по умолчанию mp4, хотя можно было сделать все проще и выбрать GIF.

После скачки у нас будет Архив, и его нужно распаковать:

Нам понадобятся только два файла : Artwork_Middle и Artwork_Right_Top
Нам понадобятся только два файла : Artwork_Middle и Artwork_Right_Top

Дальше мы работаем уже с двумя файлами:

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-5

Я заранее нарисовал свой Аватар для Steam :

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-6

и перешел на сайт https://www.remove.bg/ru для удаления фона:

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-7

Теперь на очереди у нас, создание нашей GIF для витрины.

Для этого перешел на сайт https://www.canva.com

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-8

И выбрал справа в углу Настраиваемый Размер, я открыл сразу оба, (для удобства). Размеры я описал в прошлом посте, не забудь посмотреть его.

Теперь выбираем слева Загрузки, и грузим наши файлы Artwork_Middle и Artwork_Right_Top

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-9

Дальше я уже сделал все по своему усмотрению, накинул аватар и словосочетание Welcome to my profile на широкое , а на узкое просто сверху вниз написал свой ник Disichl.

Это Широкое
Это Широкое
Это на узкое
Это на узкое

Когда все готово, нажимаем справа вверху кнопку Скачать и выбираем GIF формат:

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-12

Все наши GIF файлы готовы, теперь осталась финишная прямая.

Нам нужно обязательно зайти Steam через Браузер, у меня на примере Opera GX ( так же можно использовать Chrome, Mozila и т.д)

Заходим на свой профиль, и выбираем справа внизу, вкладку Иллюстрации:

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-13

Далее нажимаем Загрузить иллюстрацию, и выбираем Не из игры

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-14

В Название и в Описание вводим невидимый символ --- (⠀⠀⠀⠀⠀⠀) их несколько штук в скобках ( нам скобки не нужны просто скопируйте то что в скобках). И вставляем в Название и в Описание.

Потом Выбираем файл ( тот что мы создали с нашим аватаром).

Основной шаг, который ни в коем случае нельзя забывать!!!

Нажимаем Правой кнопкой мыши в любом месте, и выбираем Посмотреть код элемента. в Открывшемся окне выбираем Консоль (Console).

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-15

Теперь вводим первый код от $ до точки с запятой:

для иллюстраций:

$J('#image_width').val('1000');$J('#image_height').val('1');

если не сработала первая команда:

document.getElementsByName("image_width")[0].value = 999999;document.getElementsByName("image_height")[0].value = 1;

для скриншотов:

$J('#image_width').val('1000');$J('#image_height').val('1');$J('[name="file_type"]').val("5");

Дальше нажимаем Enter и можем закрывать Консоль

Далее ставим галочку Я подтверждаю, что являюсь автором этой иллюстрации, нажимаем Сохранить и продолжить.

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-16

Ждем некоторое время ( все зависит от интернета), пока не появится сообщение в желтой рамке ( у меня заняло примерно минут 6), и нажимаем на свой профиль.

И для Второй GIF все тоже самое.

И вот наш финиш. Выбираем Редактировать профиль, далее вкладку Витрины, выбираем Витрина иллюстраций:

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-17

На первую ставим Широкую, на вторую Узкую

Нажимаем Сохранить, и идем любоваться на свой профиль.

На то что бы разобраться как все сделать, я потратил около 12 часов, потому что в интернете не было сказано какие размеры должны быть для Иллюстраций.

Думаю я заслужил Лайка и Подписки

Спасибо что выбрал меня! Я уверен что эта статья тебе поможет.

Не прощаемся, Заходи на чай. А с тобой был Disichl !!!

Решим этот вопрос на моем примере, как делал это именно я. Для начала я купил задний фон в Магазине очков Steam: Купил я себе анимированный фон. Со статичным намного проще.-18