Меняем Steam под себя! #1

Что тут происходит?!

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

Тема для Steam - это визуальное изменения основных элементов программы (цвет кнопок, текста, наложение текстур и т.д.). Ниже приведен мой пример. По итогу, вы сможете в течении пяти минут, изменить любой-основной элемент интерфейса. Большая часть из этих элементов, изменяются без использования фотошопа или других сторонних программ. Поясню, что речь идет об изменении цвета и прозрачности. Для замены некоторых текстур, я использовал фотошоп. Но, обо всем по порядку!

---

Меняем Steam под себя!

Часть 1: Вступление. Работа с цветом и прозрачностью.
Часть 2: Полный список параметров с примерами.
Часть 3: Графическая составляющая.
Часть 4: Дополнительные материалы.

---

- Часть 1: Вступление. Работа с цветом и прозрачностью - 

 

Постарался воссоздать атмосферу всеми любимого сайта! 
Скачать тему и ознакомиться с подробной инструкцией по установке, можно по ссылке с сайта: СКАЧАТЬ 
 

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

В первую очередь, я взял первую попавшуюся под руки готовую тему (скин... кому, как проще). Тема была необходима только для определения основных папок, в куупе с которыми получается наша тема. Папки на скриншоте ниже, я скопировал из корневой папки Steam. Все готовые темы хранятся в папке "skins" (тоже лежит в корне стима). Логично, что там и необходимо начинать создание новой темы. На скриншоте, предоставлен готовый для редактирования вариант. Чтобы выбрать свою тему в стиме, заходим в настройки -> интерфейс.
 

По итогу создания своей собственной темы, начинаем поиски источника волшебства! Сейчас я говорю о файле, в котором, прописываются значения для того или иного параметра (каждого элемента нашего интерфейса). Путь данного файла указан на скриншоте. Файл "steam" открывается и редактируется обычным блокнотом.
 

В открывшемся файле мы увидим перечисление основных цветов, только часть из которых, реально используется. Далее, уже следуют параметры и присваиваемые им цвета. Как пример: Text="196 196 196 255", где "Text" - параметр отвечающий за текст в определенных местах, а "196 196 196 255" - присваиваемый цвет. В данном случае, цвет я ставил свой (по поводу того, как подбираются эти значения, чуть позже). Но, для наглядности обратимся к скриншоту. Во избежании громоздких картинок, я ограничился только началом файла.
 

Чтобы присвоить параметру "Text" серый цвет, просто заменим значения из списка стандартных цветов: Text="153 153 153 255". К слову, ничего не изменится, если задать серый цвет и таким образом: Text="grey". Теперь, вы сможете присвоить нескольким параметрам одно значение и впоследствии, изменять цвет всех параметров, путем редактирования значений самого цвета. Хотя, это так, минутка об удобстве.

 

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

Ссылка на палитру: http://colorscheme.ru/color-converter.html

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

На деле все выглядит вот так:
Text="R G B A"
Text="93 209 40 A"
Text="93 209 40 255"

Буква "А" выступает в роли альфа-канала. Говоря русским языком - влияет на степень прозрачности элемента. Минимальное значение "0" - полностью невидимый объект, максимальное значение "255" - непрозрачный элемент. Старайтесь очень внимательно играться с этим значением и чаще всего придерживайтесь "255", за исключением редких случаев, где это действительно выглядит хорошо.
 

При подборе цветов, старайтесь слишком не разбегаться и используйте для своей темы не более 3-4 основных цветов. Из них: один-два ярких (зеленый, оранжевый, синий), два светлых (белый, серый), один темный (коричневый, черный). После выбора основных цветов, можете подобрать близкие к вашим цветам оттенки. Только после сбора собственной палитры для оформления, можно уже приступать к созданию темы.
 

Напоследок, дам всем желающим поиграться с цветом основного фона и некоторых окон, кнопок. Ищем данный параметр в текстовом файле, ставим свои значения и перезагружаем стим. Желтый цвет в примере, показывает, на что именно влияет параметр. Смотрим, что получилось в итоге!
 

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

---

Благодарю за внимание!