Страница на 𝓘𝓽𝓬𝓱.𝓲𝓸 [Гайд по оформлению с css]
Статья по следам личного опыта, в ней вы узнаете как сделать анимированный бекграунд. Получить доступ к кастомному CSS. Анимировать "интерфейс", ну и само собой как нарисовать подобное оформление.
Перед технической частью скажу от себя зачем вообще нужно украшать страницу и какую роль она играет (можно скипнуть)
В общем то страница это первое что видит человек зайдя на вашу игру(или что там) помимо кавера. Можно сказать "ну зачем ей заниматься если человек уже заинтересован и готов провести время с вашим детищем?". Но не все так просто, страница это вполне себе инструмент который усиливает и создает ожидания, можно сказать что это главное меню игры до самого меню или трейлер фильма. Через него можно многое сказать, подать и визуализировать суть того что есть ценного в том что вы оформляете.
Если оно невнятное или сделано наперекосяк, то содержимое не будет вызывать доверия и интереса. Если оно правильно подает информацию и тематически направляет, то и ожидания будут лучше и яснее.
В принципе это большая тема для чего то писания тк ссылается к визуальному языку, дизайну и в целом к тому что вы хотите сказать. Тут будет только step by step guide и описание того какие инструменты есть чтобы сделать оформление приятней и таким чтобы оно работало над подачей материала эффективней.
Кастомный CSS
Официальный гайд здесь, инструкция и личный опыт тут.
Кратко, CSS это дополнение к вашей странице которое позволяет менять визуальное поведение на ней. В нем можно: менять оформление и свойства HTML элементов, создавать анимации, кастомное поведение этих элементов и многое 👁. Язык широко используется в WEB дизайне, так что материалов в сети по нему очень много. По факту если вам что то пришло в голову относительно того что вы хотите сделать, можно это загуглить и оно есть 👀.
Работает оно так что мы добавляем кастомные HTML элементы через описание (должны начинаться с префикса "custom-". чтобы itch их не вырезал) и наш CSS код который модифицирует поведение элементов на странице.
Получаем доступ к этому вашему CSS
Ну так как же его получить? Нужно написать на email support@itch.io в котором вам нужно сказать что вы прочитали то что написано внизу официального гайда и сказать что хотите сделать.
Вот что написал я, можно это скопировать, указав свою страницу к которой привязан email. Только вместо содержания сказать что то попроще, например хочу оформить страницу визитку для игры в стим и сделать анимированные кнопочки.
Минимальный пример
В общем то теперь у нас есть доступ и на странице появилось вот такое вот неудобное багованное окно в который мы можем вставлять свой CSS код.
Есть много редакторов в которых можно работать с CSS, я использовал простой плагин для Сhrome с визуальным редактированием
Давайте что то попробуем сделать чтобы убедиться что нас не обманули и заблюрим скриншоты.
в плагине нужно нажать кнопку Export и вставить в окошко с тегом <style>
Делаем анимации кнопочек ✨
Настраиваем как хотим чтобы выглядела кнопочка в редакторе и прописываем переход (есть сайты где можно подобрать анимацию эффективней но нам не надо)
Получился вот такой код для анимации кнопочки мы добавили :hover состоянию в которое хотим перейти и свойство transition для того чтобы указать по каким полям осуществлять переход и как подробнее
Задник
Задник на itch поддерживает прозрачность и может быть гифкой.
Особо тут говорить не о чем, можно только сказать что ширина переднего фрейма(BG2) зависит от разрешения встраиваемой игры(если такая есть) и измеряется в пикселях. Проще всего отредактировать снимок страницы в фотошопе подогнав под контент.
Ну давайте его нарисуем, мне понравился вот этот фрейм его и будем использовать
* тк задник полностью нарисованный, фрейм не обязательно должен быть ровным, он может как то искажаться, быть затекстурированн или иллюстрирован, можно даже использовать не тайлящийся задник поддерживающий тему
Делаем анимированный задник ⬜
В общем гуглим, находим то что нравится вставляем на страницу. Взял от сюда вариант с квадратам тк меньше кода изменив под себя. Я использовал анимации css взятые с рандомного сайта, но если заморачиваться можно комбинировать происходящее с гифками и как то связывать между собой.
Анимации легко вставились на основной странице профиля, но со вставкой на страницу с игрой пришлось повозиться и поставить квадрат-маску для перекрытия, отключить overflow у основного фрейма, получилось вот
Элементы добавляются на страницу через описания, потом кастомизируются, все кастомные классы должны начинаться со слова "custom-". можно вставлять гифки, картинки менять их поведение и расположения. В данном примере, на страницу добавляются элементы для анимации
Не забывайте исследовать бескрайний космос вашей жизни и двигаться к звездам ~~☆’.･.･:★’.･.･:☆
* Задолбался честно говоря писать, по факту вещь достаточно техническая и все что нужно делать это разобраться как вставлять элементы и редактировать то что есть через css код. Пример бы конечно нормально перерисовать(не думал что буду его делать), но уж ладно, такая стать
|------------------------------ - - - - - - - - -
Лайки ставьте и в группу вступайте