Customizable Twitch Panels

Make customized Twitch Panels for free and without the assistance of Photoshop, GIMP, or any image editing software! This is my first customizable free resource and hopefully it’s one of many.  Choose your colors, icon, font size, text to include on the panel, and more!

A huge shoutout to @Tehkhop for helping me out on a few parts of this small app.

Also, thanks again to Twitch.tv/Miistymiisty (follow her on Twitter @UbiMiiSTY) 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.

Padding Example
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.
  • Ravens

    Haha, this is much needed for all the different request you’ve been getting for the panels. 😛

    • Derek

      Definitely. This will enable me to the following as well…
      1) Add icons quickly
      2) Allow users to use different languages (will add font drop down in the somewhat near future)
      3) Make similar apps for overlays etc!

  • Pingback: Twitch Panels for free, and Setup Guide - Nerd or Die()

  • Wicked

    Pretty Dope

  • Derek,
    Awesomeness is embodied here! Thank you Derek for this outstanding tool and for making it available for all of us.
    Helix

  • D7X

    Dude, you’re awesome! I used your default ones at first, and now this! I searched FOREVER for free custom ones. Yes, It’s quite limited, but hope for more options in the future! Will you make more options in the future? Thanks =)

    • Derek

      Some next options have been made since you posted 😀 Check the updates at the bottom (or just check out the app). Enjoy!

      • D7X

        Thanks, man! I edited my reply before I saw your text, sorry. Anyway, in the future will there be more background designs? Thanks for adding the font option =) Good luck in the future, Derek!

        Hope to see more from you in the future! twitch.tv/d7xlive if anyone want to see what I did w/ the panel =P

        • Derek

          Nice! Red and black, always a good choice 😀

          • Thanks! Sorry for the questions, but what do you plan to do in the future? (Ex: Offline banner, more options, etc.)

            Once again, thanks! =)

            ~D7X

          • Derek

            I plan on making an overlay maker next, offline image creator after that, then a “BRB” sort of overlay thing, and then from there seeing what people are interested in. My goal is to enable any new streamer to have all the basic graphics needed to get started.

          • Awesome! I look forward to seeing these great updates! ^.^

  • Darko

    How about a snapchat icon? 😀

    • Derek

      Snapchat is added, will note to add Tumblr next time I do an update.

  • Pavel Lesnikov

    Thank you!

  • Gisse

    Can u add Battle.net icon?

    • Derek

      Just added it, let me know if you have any other suggestions!

  • Dragon4424

    Can you add a Uplay icon?

    • Derek

      Uplay has been added 😀

  • DerpyGentleman

    The Icon’s glitch when i use twitter or youtube then I just see nothing but the coloured background

    • DerpyGentleman

      Nevermind you can fix it by just turning of any add blocking program

  • John Orwig

    I might be dumb for asking, but I don’t know how to get the app. How do I get the app?

  • Tim LinkTom

    Can I get a pokeball one and/or a 3ds one

  • Peter Gomez

    I strongly suggest you make an Extra Life icon, as a lot of streamers use Extra Life for raising charity money. A PayPal button would also be nice. Regardless, thank you for the amazing work here. You’ve made my life easier.

    • Derek

      Both of those are excellent suggestions, added to my list – will update ASAP.

  • Nick Tengler

    These are great. Thanks for this tool. One request, could you add a text horizontal align. Just like your vertical one. I apologize if youve already had this suggested.

  • Matthew Woolley

    It is not letting me customise my panels!!!!

    • Derek

      Can you please explain what you mean a bit more?

      • Matthew Woolley

        I go on the page on my computer and it has no options for me to customise. Just say Battle.net

  • The Jester

    Might I suggest being able to upload an image to go behind where the wording goes on the panel

  • Adam kehoe

    May I suggest One for CSGO and a Padlock ? keep up the great work!!

    • Derek

      Scheduled for next update.

  • John Orwig

    This is GREAT man. Thanks 1000 times over. One icon i feel like is missing but i dont really know how you would achieve it, would be a goal(s) icon

  • Silentmode

    I can’t save image from mobile. Is there any other way?

    • Derek

      As of now, no, sorry. I’ll look into a ‘download’ button of sorts in the near future.

    • Silentmode

      Thanks

  • Absolutely love this… more-so since I have no graphical ability of my own, at least not on the computer. LOL. Would love something for Generic Swag or something like that.

    • Derek

      As in a merchandise type icon? You should check out the overlay maker as well if you need more! http://nerdordie.com/free-resources/customize-your-twitch-overlay/

      • Yeah… something like a shirt icon or something. I did… even though I have been going through your tutorial videos on how to use it. LOL. I made a bunch of icons thanks to YOU, and I have not started streaming, but I want to look nice before I do. 😉

  • Matt Pikowsky

    I saw below that you stated you might make a overlay maker and I was wondering if you have put that into the making yet?

  • Darko

    An icon for Spotify? 🙂

  • Levent Welcome

    This is a GREAT. But it doesn’t support Cyrillic fonts 🙁

  • Ephemeria Gaming

    Great idea thx for my twitch !

  • This is a fantastic resource! Can you add WordPress icon to the list? I use wordpress as a main hub for my youtube and twitch. Thank you so much!! 😀

  • Gavin Wolfgang

    Can you add a Nintendo Network icon???

    • Gavin Wolfgang

      And a person icon? Like, the contacts icon on Android?

  • Kay Park
  • Maybe just me, but I can’t seem to get custom (non-standard Windows fonts) to work with this any longer? Worked months ago last time I checked, and custom fonts still work on the Overlay-Maker tool.

  • Kyle Beardsley

    how do I download the app?? I cant find a link to download anywhere, or simply edit the panels I have watched your video but I see nothing on this page for editing the panels

  • Kyle Beardsley

    how come I cant edit any panels?? I there is no sections allowing it and no download to download an app for it?