1. Зайдите на сайт Steam Background Cropper[steam.design].

2. Войдите через свой профиль STEAM.

3. Теперь можно выбрать тот фон, который вы намерены использовать. Сделайте это.
Присутствует возможность выбрать высоту иллюстраций. Для этого нужно потянуть нижний край иллюстрации с зажатой левой кнопкой мыши вверх или вниз.

4. Далее нажмите на

5. Поставьте галочки на первом и втором пункте.


6. Сохраните получившиеся изображения на компьютер

Создание частей фона завершено. Их можно найти в ZIP-файле в ваших загрузках. Кроме двух картинок, там будет и картинка, подходящая на место аватарки.

Все манипуляции необходимо производить в браузере

1. Зайдите в свои иллюстрации.


2. Нажмите на кнопку загрузки новой иллюстрации.


3. Выберите файл иллюстрации.

4. Добавить описание (обычно я даю такие названия: < - для большой иллюстрации и > - для узкой).

5. Установить видимость Для всех.

6. Поставьте галочку, подтверждающую ваше авторство.

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

7. Нажмите F12 либо Ctrl+Shift+I(английское И).
Должно появится подобное меню (может различаться в зависимости от браузера):


8. Выберите пункт Консоль или Console (на скрине выделена синим шрифтом). В самом низу есть строка, в которой можно писать. В нее нужно вписать эту строку:

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

Для удобства вот ссылка на TXT-файл с этой строкой для копи-пасты:

Диск Google[drive.google.com]

9. Когда строка введена в консоль, нужно нажать Enter. Строка должна отобразиться в консоли, а на строку ниже должна появиться 1.

10. Только теперь можно нажать на синюю кнопку


Иллюстрации сохранены в вашем профиле и теперь их можно поместить в витрину.

1. Нажимаем на кнопку на странице профиля STEAM.

2. Спускаемся к пункту Витрины и первой выставляем Витрина иллюстраций:

3. Далее выбираем те картинки, которые вы загрузили. Возможно, они будут видны в меню выбора в виде тонкой полоски (как на скрине).

Но после выбора приобретут изначальный вид (см. предпоследний скрин).

4. Далее осталось спустится вниз страницы и нажать

Вот и все. Таким же образом можно создать и анимированные варианты фона в виде GIF. Например, добавить бегущую строку с ником.