» » Как сделать оформление для твича. Оформление Twitch канала, шаблон шапки. Кнопка подбора музыки

Как сделать оформление для твича. Оформление Twitch канала, шаблон шапки. Кнопка подбора музыки
Miisty (follow her on Twitter @Miistymiisty) for letting me use her base design in this project.

How to Customize Your Twitch Panels

Watch the video or read the instructions below.

  1. Use the input controls to design your panel.
  2. Right click the panel and select “Save Image As…”
  3. That’s it! You’re ready to upload them to Twitch!

Use the app inputs to make the panel look exactly the way you’d like it to! I recommend that you start with the panel with the longest panel text . So if you’re making two panels with the text “Subscribers”, “Donate”, and “About Me”, you should start with the “Subscribers” panel, as it takes up the most horizontal space.

You want to do this so that your font sizes and text alignment are all the same. However, if you don’t want to have the same font sizes, that’s fine too!

Options Available

The follow options are currently available for this app:

  • Left Side Color – This input is done through a color picker. Changing this color will change the background color of the box on the left side. This is the box that contains the icon. By default it is set at #23b85e – you can use the pallette, HSL Slider, or color input to select your color.
  • Right Side Color – This input is done through a color picker. Changing this color will change the background color of the box on the right side. This is the box that contains your panel text. By default it is set at #101220 – you can use the pallette, HSL Slider, or color input to select your color.
  • Text Color – This input is done through a color picker. Changing this color will change the text color of your panel text. By default it is set at #ffffff – you can use the pallette, HSL Slider, or color input to select your color.
  • Panel Text – This input field controls the text to be included on your panel. The text will be updated as you type.
  • Icon – The icon dropdown will change the image displayed on your stream panel. Simply choose any of the pre-made icons and it will be updated on your panel automatically.
  • Text Size – Use the text size slider to select how big you would like your panel text.
  • Text Vertical Align – The text vertical align slider can be used to move your text along the Y-axis. This option is useful if you’d like to move your text towards the top or bottom of the panel. On some browsers the text will not be automatically aligned to the middle.
  • Add Padding – For some Twitch panels you will like “padding” or empty space on the bottom of your panels to add space between your image and text that you may be putting underneath it. Selecting Yes will show the checkerboard, which indicates that there will be empty space added underneath the panel. No will remove the padding and the image will include no empty space on the bottom.
  • Font Family – Allows you to manually set a font of your choosing. Simply type in the name of any font that you have installed on your local system.

Should I add padding?

The easiest way to make your panels look great, is to “Yes” for padding if the image will be a link. If the image will not contain a link, then select “No” for padding.

An example of your images with and without padding, as links and non-links.

Please let me know if you have any problems with this app!

If you’re experiencing any issues, please let me know in the comments below. It will be much easier for me to add icons to this system, versus my previous post.

Updates

  • Added support for mobile scrolling on webkit devices.
  • Added text box for font input. This allows users to enter any font they have installed on their system with these panels.
  • Added support to directly input color code into the color picker.
  • (03/08/16) – Added Game Wisp, Crown, Snapchat icons.
  • (03/13/16) – Added Plays.TV, Tumblr, DeviantArt, Keyboard, Mouse, Battle.Net icons.
  • (03/25/16) – Added Playstation, Xbox, Pokemon, PayPal, Extra Life, UPlay, and Thumbs up icons.
  • (07/17/16) – Added download button and file name input.

Оформление Twitch канала, шаблон шапки.

Объяснять, что это такое Twitch не буду, если вы попали на данную статью, то Вам это известно, так что перейдём сразу к делу.

Шаг 1. Создаём шапку.

С момента создания канала ваша шапка будет выглядеть так:

Согласитесь не очень то интересное оформление. Собственно для того что бы его заменить первоначально нам необходимо нарисовать свою обложку. Рекомендуемый размер шапки 1200×300 и размер файла не должен превышать 3 Мб. Я уже сделал готовый шаблон нужного размера, выглядит он так:

Готовый шаблон Twitch — сохраняем в photoshop

Шаг 2. Заменяем шапку на Twitch.

Шапка у нас уже есть, остаётся только заменить её на самом канале Twitch. Для этого заходим в свой канал и нажимаем на наш ник.

Появиться текущая шапка Twich. Наводим на неё мышкой, нам предложат изменить баннер профиля, она же шапка. Нажимаем мышкой в любом месте обложки, нам предложат загрузить новое изображение. Перетаскиваем нашу картинку шапки в браузер, либо выбираем из нужной папки.

Нажимаем кнопку «Готово»

В итоге получаем такую шапку:

Менять обложку Вы можете сколько угодно раз и в любое время.

Популярностью сегодня пользуются сервисы видеостриминга. Среди них самым известным считается интернет канал Twitch (Твич), который позволяет транслировать игровой процесс и одновременно общаться со зрителями. Трансляция Twitch может сопровождаться аудиокомментариями игрока и чатом для зрителей. На канале транслируются самые разнообразные игры (от популярных Minecraft и World of Warcraft до гонок и симуляторов The Sims), организовываются матчи между киберспорстменами, за которыми можно наблюдать онлайн. Данный канал - это просто находка для тех, кто любит игры, хочет общаться со своими единомышленниками или просто посмотреть стрим, архивные видео или отдельные каналы. Запустили его в июне 2011-го года Эммет Шир и Джастин Кан. На сегодняшний день, в месяц его посещают более 45 млн уникальных посетителей.

Правила создания баннера

По правилам Twitch, пользоваться каналом могут только те особы, которым уже исполнилось 13 лет. Причем до 18-летнего возраста делать это они должны под присмотром родителей. Если участник не придерживается правил, то его канал или аккаунт могут заморозить. Регистрация бесплатная. Перед тем, как создавать свой канал, нужно позаботиться об информационном наполнении и графических изображениях, а именно о баннере.

Для пользования Твичем нужно будет подобрать лого - это картинка, минимальный размер которой должен быть в пределах 200×200 пикселей, а также изображения для внешних ссылок (их ширина должна быть в пределах 320 пикселей). Далее нужно будет создать:

  • баннер профиля - заставку, которая будет видна в окне профиля (рекомендуемый размер 2600×450 пикселей, минимальный - 900×480 пикселей). Лучше придерживаться рекомендуемого размера, чтобы изображение хорошо просматривалось;
  • баннер видеопроигрывателя - картинку, которую будут все видеть, когда канал не подключен к Твич. Формат изображения: 2400×1350 пикселей или 1280×720 пикселей. Пользователи рекомендуют придерживаться именно этих форматов, чтобы картинка не растягивалась по всему экрану.

Создаем банер для Твича с помощью онлайн конструктора

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

  • создание учетной записи;
  • выбор нужного шаблона;
  • добавление собственных изображений или подходящих графических изображений, иллюстраций или фотографий из библиотеки;
  • редактирование изображений (изменение фона, шрифта, цвета) и текста
  • сохранение баннера.

Еще раз отметим, что за создание баннера в данном онлайн конструкторе не нужно ничего платить. В библиотеке можно найти оригинальные и красивые макеты для баннеров Твич, специально созданные профессиональным дизайнерами. Удобно и то, что созданный макет можно отредактировать, например, изменить цвет шрифта (доступно более 130-ти шрифтов) или фон картинки. К слову, баннер может помочь увеличить количество подписчиков в таких соцсетях как Твиттер, Инстаграм или Ютуб. Достаточно добавить на баннер кнопки данный соцсетей и имя пользователя.

Таким образом, воспользовавшись макетами онлайн конструктора Canva, можно за несколько минут создать стильный и интересный баннер для Твича.

Twitch канал - популярная стримминговая платформа, которая позволяет транслировать игровой процесс, различные киберспортивные турниры и одновременно общаться со зрителями (для этого предусмотрен видеочат или аудиокомментарии). Доступное видео можно просматривать по запросу или в реальном времени. Канал транслирует разные игры: от самых популярных, таких как, например, "Minecraft" до разных спортивных симуляторов. Кроме того, сервис постоянно организовывает киберспортивные турниры или турниры по покеру, за которыми можно следить в реальном времени.

Twitch Interactive является дочерней компанией "Amazon" и работает с 2011-го года. Сервис доступен через браузер, установленный на любом устройстве. Есть специальное приложение для ПК, Android, iOS. Регистрация на Twitch канале бесплатная, но нужно соблюдать правила пользования, иначе участника могут забанить. В частности, не допускаются угрозы или попытки нанесения физического вреда, разжигание ненависти и агрессии, мошенничество, спам, выдача себя за совершенно другое лицо и т.д. Перед тем, как стать активным пользователем сообщества, нужно позаботиться о графических изображениях, а также информационном наполнении своего канала.

Размеры баннера

После регистрации на платформе Twitch нужно будет подобрать для своей страницы лого, баннер видеопроигрывателя и баннер профиля. Также необходимо подобрать изображения, которые будут показаны при внешних ссылках на страницу. Они должны иметь ширину не менее 320 пикселей. Картинка для лого должна иметь размеры 200×200 пикселей. Важно подобрать интересную картинку для баннера видеопроигрывателя, ведь она будет отображаться на экране тогда, когда участник не ведет трансляцию и находится оффлайн.

Обычно на ресурсах, которые рассказывают о том, как создать баннер, указано, что для Твича он должен быть примерно 1280×720. Но опытные пользователи рекомендуют брать картинку размерами 2400×1350 пикселей, тогда она будет корректно отображаться на всех устройствах, в том числе на смарт ТВ и не будет выглядеть растянутой в ширину. Далее нужно отредактировать баннер профиля: добавить картинку, которая будет отображаться в окне профиля. Чтобы изображение хорошо просматривалось, пользователи канала рекомендуют использовать изображение с размерами 900×480 пикселей или 2600×450 пикселей.

Создание баннера онлайн

Баннер должен быть интересным и одновременно оригинальным. Создать баннер для Twitch поможет онлайн конструктор "Canva", в библиотеке которого собраны уникальные и яркие шаблоны, а также более 1 млн. картинок, иллюстраций и изображений на любую тематику. Займет это от силы 5-10 минут. Для этого нужно будет выполнить такие действия:

  • создать свою учетную запись;
  • выбрать понравившийся шаблон (бесплатно, шаблоны премиум класса обойдутся всего в 1 доллар);
  • выбрать из библиотеки качественные иллюстрации или картинки;
  • отредактировать текст, добавить фильтры;
  • сохранить баннер.

При создании баннера в онлайн конструктор можно добавлять свои собственные изображения, также можно менять фон шаблона, шрифты (доступно более 130 видов шрифтов) и их цвет. Кроме того, с баннером, сделанным в "Canva" можно увеличить число подписчиков в Твиттере или Фейсбуке: просто добавить кнопки соцсетей на баннер.

Макеты баннеров, которые представлены в онлайн конструкторе Canva, разработаны профессиональными дизайнерами. Именно поэтому все баннеры, созданные с помощью данного сервиса, получаются эффектными и запоминающимися.