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

Всем привет! С этой статьи, я хочу начать цикл публикаций в которых я расскажу и покажу как оформить Twitch канал.

В данном уроке я расскажу как оформить баннеры в панели под плеером.

Для того, чтобы приступить к созданию уникального дизайна, нужно кликнуть по кнопке «Редактирование панели».

Затем у вас должна появиться вкладка, жмите по ней, и у вас появиться форма, в которой вам нужно будет задать параметры будущего баннера.

1. «Panel Title» это заголовок вашего баннера.

2. «Add image» данная кнопка предназначена для загрузки изображения баннера. Максимальная ширина загружаемого баннера должна быть не меньше 320px, иначе загруженная картинка будет автоматически растянута в ширину.

3. «image Links To» в это поле, при необходимости, можно добавить ссылку, которая будет открываться при нажатии по баннеру. Обычно данная функция используется для направления пользователя, на другие ваши ресурсы и для перехода в форму для отправки доната DonationAlerts.

4. «Description» Это описание под картинкой вашего баннера. В нем можно указывать какую либо дополнительную информацию

Если вы начинающий стример, то вам будет достаточно установить в панели под плеером 5-6 баннеров:

Обо мне — краткая информация о вас.

Поддержка стримера (баннер для доната через DonationAlerts)

Группа ВК (При отсутствии, необходимо создать)

Канал ютуб (при наличии) обычно на каналы YouTube заливаются вырезки интересных моментов.

Баннер с электронными кошельками — кошельки WebMoney, Яндекс.Деньги, QIWI и т.д.

Мой PC — тут нужно указать характеристики вашего компьютера.

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

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

1. Открываем любой удобный для вас редактор, от стандартного «Paint» до «Adobe Photoshop».

2. Выбираем любую понравившуюся заготовку из папки.

3. Затем на фон заготовки, сверху, накладываем заголовки из той же папки. На большой баннер, нужно наложить слой со значками электронных кошельков. Я добавил два значка для WebMoney, так как обычно используются два кошелька WMZ, WMR.

4. Заходим на канал, жмем «Редактировать панель», и по одной добавляем (не забывая подписывать заголовок) ваши баннеры. Не забываем жать «Submid» под каждой формой.

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.
You want to choose Twitch banner dimensions that are large enough for you to give your audience crucial information. At the same time, you don’t want a banner that dominates the screen obnoxiously. Find a happy median so your channel looks professional.
  • Identify your theme

    Adobe offers several Twitch background themes that can help you stand out from the crowd. Choose one that complements your channel.
  • Choose an image

    With Adobe Spark, you can access thousands of free images online. Of course, you can also import a Twitch offline image that you made yourself.
  • Customize your typography

    Twitch banner templates on Adobe will let you browse hundreds of typeface options. Find a script that brings your channel to life. Then, you just paste your content into the text box.
  • Download and upload your Twitch banner

    Once you make your Twitch Banner with Spark Post, you can download it and place it on your account. Now, you have a banner that offers a custom look and personalized information.
  • Оформление Twitch канала, шаблон шапки.

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

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

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

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

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

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

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

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

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

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

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