# Streambakgrunder, paneler och offlineskärmar

[Canonical HTML page](https://gradiently.design/sv/guide/stream-overlay-background)

En kanal ser professionell ut när offlineskärm, paneler, banner och scenbakgrunder tydligt hör ihop. Så bygger du uppsättningen, i rätt storlekar, utan att bråka med din encoder.

## The short version

- En uppsättning streambakgrunder är den grupp grafik en kanal använder runt sin video: offlineskärmen, profilbannern, panelerna och bakgrunderna till scener som starting soon och be right back.
- Twitchs offlineskärm är 1920×1080, profilbannern 1200×480 och infopanelerna 640×320.
- Varje del av en kanals grafik bör dela en bakgrund, en typstil och en accentfärg, så att tittarna känner igen kanalen överallt.
- Långsam, mjuk rörelse passar streambakgrunder, eftersom snabb rörelse och kraftigt korn kräver mer bitrate och kan bli blockigt i sändningen.
- Scenbakgrunder bör lämna lugn yta där webbkameran, chatten och aviseringarna ligger, så att de förblir läsbara.

En bra **streambakgrund** är inte en bild utan en uppsättning: offlineskärmen folk ser när du inte sänder, profilbannern, panelerna under videon och bakgrunderna bakom scener som starting soon, be right back och just chatting. När alla delar en bakgrund, en typstil och en accentfärg ser kanalen genomtänkt och igenkännbar ut. När var och en gjordes en annan dag av en annan mall ser den ut som en kanal som fortfarande söker sig fram.

En bred startskärm med orden Startar snart på en glödande gradientbakgrund

En scen för starting soon …

En bred offlineskärm med texten Tillbaka i morgon på samma gradient som scenen för starting soon

… och offlineskärmen, från samma bakgrund.

Den här guiden går igenom storlekarna, vad varje del är till för, hur du håller dem enhetliga och detaljerna som gäller streaming: rörelse, bitrate och utrymme för kamera och chatt. För kanalens varumärke bortom grafiken går [branding för innehållsskapare](https://gradiently.design/sv/guide/creator-branding) längre.

## Storlekar för streambakgrunder på Twitch

- Offlineskärm 1920×1080: 1920 × 1080
- Profilbanner 1200×480: 1200 × 480
- Panel 640×320: 640 × 320

De tre grafikerna för en Twitch-kanal, ritade i skala.

| Del | Storlek | Var den syns |
| --- | --- | --- |
| Offlineskärm | 1920×1080 | Videospelaren när du inte sänder |
| Profilbanner | 1200×480 | Längs överkanten av din kanalsida |
| Paneler | 640×320 | Under spelaren: om mig, schema, regler, länkar |
| Scenbakgrunder | 1920×1080 | Bakom din kamera och dina overlays på en 1080p-canvas |

Storlekar från varje plattforms rekommenderade uppladdning. Scener använder storleken på din streamingcanvas, oftast 1920×1080.

Streamar du också på YouTube eller driver en Discord-server utökas samma uppsättning med kanalbild för YouTube på 2560×1440, miniatyrer på 1280×720 och en serverbanner för Discord på 960×540. [Bildstorlekar för sociala medier](https://gradiently.design/sv/guide/social-media-image-sizes) listar resten.

## Scenerna varje kanal behöver

- **Starting soon.** En nedräkning eller en enkel rad medan tittarna kommer in. Musik, sändningens titel och inget som kräver noggrann läsning.
- **Just chatting eller huvudscen.** Bakgrunden bakom din kamera och chatt. Den lugnaste delen i uppsättningen, eftersom den är i bild längst.
- **Be right back.** Korta pauser. Samma bakgrund som starting soon med andra ord håller det välbekant.
- **Avslut.** Ett tack, tiden för nästa sändning och kanske en raid-kanal.
- **Offlineskärm.** Det folk ser mellan sändningarna: ditt schema och var de annars hittar dig.

Bygg dem i den ordningen efter vikt: huvudscenens bakgrund bär kanalen, så designa den först och ta fram de andra ur den.

## Så håller du uppsättningen streambakgrunder enhetlig

1. **Välj en bakgrund** Välj en gradient eller ett material och använd det till varje del. Variation kommer från ord och layout, inte från nya bakgrunder. [Enhetligt varumärke](https://gradiently.design/sv/guide/brand-consistency) förklarar varför upprepning bygger igenkänning.
2. **Välj en typstil** Ett displaytypsnitt för titlar och ett läsbart för detaljer som scheman. Håll storlekarna stora: en stor del av din publik tittar på mobil och tv.
3. **Välj en accentfärg** Använd den till aviseringar, markeringar och live-indikatorn. Hämta den ur bakgrundens palett så att allt hör ihop.
4. **Rendera varje storlek, beskär inte** En banner på 1200×480 är inte ett utsnitt av en skärm på 1920×1080. Lägg ut varje format på nytt så att bakgrundens ljusaste del hamnar där den ska.
5. **Skriv ner det** Samla färger, typsnitt och filer i en mapp så att moderatorer och redigerare använder samma delar. Ett [varumärkeskit](https://gradiently.design/sv/guide/brand-kit) gör precis detta.

En liten panelgrafik som visar sändningsschemat Tis till lör kl. 20 på kanalens gradient

En schemapanel på 640×320, på samma bakgrund som scenerna ovan.

## Rörelse, bitrate och streambakgrunder

Rörliga bakgrunder får en scen att kännas levande, och en loopande video går att lägga in i de flesta streamingprogram som en mediakälla inställd på loop. Men allt i bild konkurrerar om sändningens bitrate. Videoencodrar lägger mer data på detaljer som ändras i varje bildruta, så snabb rörelse, flimmer och kraftigt korn är dyra, och när budgeten tar slut blir bilden blockig. Långsam, bred färgrörelse är billig att koda och ser mjuk ut.

### Kostar bitrate

- Snabba, myllrande partikeleffekter
- Kraftigt, animerat filmkorn
- Skarpa mönster som förskjuts i varje bildruta
- Loopar med ett synligt hopp vid omstarten

### Kodas rent

- Långsam färgdrift över stora ytor
- Lätt, statiskt korn eller inget alls
- Mjuka gradienter med försiktig rörelse
- En sömlös loop på 10 sekunder eller mer

Den idealiska loopen har varken synlig start eller slut. [Sömlösa loopar](https://gradiently.design/sv/guide/seamless-loop-video) förklarar hur det fungerar. Gradiently exporterar designer som sömlösa loopande videor på 5 till 30 sekunder med den rörelse, det tempo och den färg du väljer, vilket passar scenbakgrunder väl.

## Lämna plats för kamera, chatt och aviseringar

En scenbakgrund är mest täckt. Skissa var webbkameran, chattrutan, aviseringarna och eventuell spelbild ligger och håll sedan bakgrundens ljusaste och mest myllrande område borta från dem. Text på overlays behöver lugn, jämn färg bakom sig, och teknikerna i [text på en gradientbakgrund](https://gradiently.design/sv/guide/text-on-gradient) gäller direkt. En bakgrund som lämnar tyst utrymme åt de här elementen ser ut att vara designad runt ditt innehåll snarare än bakom det.

> **Kontrollera i mobilstorlek** Krymp en skärmdump av din live-scen till en telefons bredd. Om orden på dina overlays och paneler är svåra att läsa där, gör dem större eller enklare.

## FAQ

### Vilken storlek har en offlineskärm på Twitch?

1920×1080 pixlar, samma 16:9-form som videospelaren.

### Vilken storlek har paneler på Twitch?

Designa paneler i 640×320 pixlar. De ligger under videospelaren och rymmer din presentation, schema, regler och länkar.

### Vilken storlek har en profilbanner på Twitch?

1200×480 pixlar. Den går längs överkanten av din kanalsida.

### Ska min streambakgrund vara animerad?

Mjuk rörelse hjälper en scen att kännas levande, men håll den långsam och bred. Snabb rörelse och kraftigt korn kräver mer bitrate och kan göra sändningen blockig.

### Hur får jag min streamgrafik att se enhetlig ut?

Använd en bakgrund, en typstil och en accentfärg för varje del, och lägg ut varje storlek på nytt i stället för att beskära en bild.
