Designing a Twitch panel

Where panels live

In the dashboard, open Twitch Panels under the Stream section of the sidebar. Everything on this page is the design side. The link a panel opens is set on Twitch, not in pulz.

The artboard

Twitch renders panels at 320 CSS pixels wide, so both panel presets are 320 wide and differ only in height:

• Twitch panel - 320 x 160, the standard Twitch panel width.
• Twitch panel (tall) - 320 x 300.

Every coordinate in the editor is an artboard pixel. The whole board is scaled as one thing, so the editor, the gallery card and the exported PNG all come from the same render and cannot disagree with each other.

Start from a template

Start from blank

The editor

It is the same editor as scenes, in three parts: the Add and Layers rail on the left, the artboard in the middle, and the selected layer's settings on the right. Nothing you learn here is panel-only, which is the point of the shared editor.

What you can put on a panel

A panel leaves pulz as a flat PNG, so the live widgets - chat, alerts, goal bars - are scene-only. The Add rail on a panel lists the elements:

• Text - a heading, a caption, a rule for chat. Font, size, weight, colour, alignment, line height, letter spacing, uppercase, plus seven shadow and stroke effects.
• Image - a logo, a PNG frame, a GIF from Giphy or Tenor. Upload a file, or paste an https link and press Use link.
• Shape - rectangle, ellipse, line or triangle, with fill, border, corner radius and a shadow preset.
• Icon - any icon from the pulz set, in any colour.

The rail also offers Embed and Sound because it is shared with the scene editor. Neither has anything to do in a flat image, so leave them to scenes.

Background and colours

A new panel starts on your page theme, so it matches your pulz page from the first second. A scene starts transparent instead, because it composites over gameplay.

The panel editor has no background control. To get a flat colour, a gradient or a border, add a Shape that covers the artboard and send it to the back.

Any colour or font you leave empty resolves to your page theme: accent, text colour, card background, body font and title font. Change the theme on your page and every panel and scene re-skins with it, with no per-layer edit.

Placing things precisely

Layers snap to the artboard's edges and centre lines, and to the edges and centres of every other layer, while you drag. At 320 pixels wide there is very little room, so the nudge keys matter more here than on a scene.

The toolbar's Align button covers Left, Center, Right, Top, Middle and Bottom. With one layer selected it aligns to the artboard; with several it aligns them to each other. Space across and Space down need at least three layers selected. Fit zooms the artboard back to fit the window and re-centres it.

Saving

Panels autosave. The toolbar reads Saving, Unsaved or Saved, and it also saves when you leave the editor. If a save fails it keeps saying Unsaved rather than claiming a save that did not happen, and the next edit retries.

Sharing a panel you are happy with

Share as template in the toolbar sends the design to the public library. Give it a name, a category and one line about it, then press Send for review. A moderator publishes it, your handle is credited on the card, and your copy stays yours. Submissions are capped at 10 a day.