# Bannerdesign: bannere til web, sociale medier og tryk, der kan læses [Canonical HTML page](https://gradiently.design/da/guide/banner-design) Bannere er lange, tynde og ofte halvt dækket af et profilbillede eller beskåret på telefoner. Design til den form, og få ord kan bære et helt brand. Hver størrelse, du sandsynligvis får brug for, står herunder. ## The short version - Bannere er brede formater, fra omkring 2:1 til blog- og e-mailbannere til 6:1 til et LinkedIn-virksomhedsbanner. - I et bredt banner læser øjet fra venstre mod højre, så ordene bør sidde i én kompakt blok frem for at brede sig over hele bredden. - De fleste sociale bannere er delvist dækket af et profilbillede eller beskåret på telefoner, så vigtigt indhold hører til nær midten. - Et YouTube-kanalbanner er 2560 × 1440 pixel, men kun den centrale stribe på omkring 1546 × 423 pixel vises på alle enheder. - Trykte bannere som roll ups læses fra flere meters afstand, så de har brug for langt færre ord og meget større tekst end webbannere. God **bannerdesign** arbejder med formen frem for imod den. Et banner er bredt og lavt, så giv det én kompakt blok med ord, en kort overskrift og måske én understøttende linje, placeret, hvor intet dækker den, og lad baggrunden bære farven resten af bredden. Tjek først hver platforms størrelse og sikre område: et LinkedIn-profilbanner er 1584 × 396 pixel og mister sit nederste venstre hjørne til dit foto, mens et YouTube-banner er 2560 × 1440 og kun viser en central stribe på telefoner. ## Bannerstørrelser til web og sociale medier | Banner | Størrelse (px) | Form | Hvad der dækker det | | --- | --- | --- | --- | | LinkedIn-profilbanner | 1584 × 396 | 4:1 | Profilbillede, nederst til venstre | | LinkedIn-virksomhedsbanner | 2256 × 382 | Omkring 6:1 | Logo, nederst til venstre | | X-header | 1500 × 500 | 3:1 | Profilbillede, nederst til venstre | | Facebook-cover | 1640 × 624 | Omkring 2,6:1 | Profilbillede, beskåret på telefoner | | YouTube-kanalbanner | 2560 × 1440 | 16:9 | Kun midten vises på alle enheder | | Bluesky-banner | 3000 × 1000 | 3:1 | Avatar, nederst til venstre | | Hero på websted | 1920 × 1080 | 16:9 | Navigation langs toppen | | Blogbanner og e-mailheader | 1200 × 600 | 2:1 | Intet, men ofte set i lille størrelse | | Etsy-butiksbanner | 3360 × 840 | 4:1 | Beskåret på telefoner | Størrelser fra størrelseslisten i Gradiently, som følger hver platforms anbefalede uploadstørrelse. Platformsguider går dybere: [størrelse på LinkedIn-banner](https://gradiently.design/da/guide/linkedin-banner-size) og [størrelse på YouTube-banner](https://gradiently.design/da/guide/youtube-banner-size). - Blogbanner 2:1: 1200 × 600 - X-header 3:1: 1500 × 500 - LinkedIn-banner 4:1: 1584 × 396 - LinkedIn-virksomhed 6:1: 2256 × 382 Fire bannere tegnet i målestok. Efterhånden som formen bliver tyndere, skrumper pladsen til ord langt hurtigere, end bredden vokser. ## Sådan lægger du ord ud i et bredt banner Folk læser et banner, som de læser en tekstlinje: fra venstre mod højre, hurtigt. Hvis ordene spredes over hele bredden, skal øjet rejse for langt. Saml dem i én blok, omkring en tredjedel af bredden, og sæt overskriften stor nok til at kunne læses, når hele banneret skrumper til en telefonskærms bredde. Et bredt LinkedIn-banner med en kort overskrift i højre side og en gradient, der fylder resten Et LinkedIn-profilbanner med ordene holdt fri af profilbilledet nederst til venstre. Et X-headerbanner, der meddeler nye podcastafsnit hver torsdag på en gradientbaggrund En X-header: én linje, ét faktum og intet vigtigt i avatarens hjørne. Hierarkiet skal være enkelt i den højde. To niveauer er som regel grænsen: en overskrift og en lille linje over eller under. Hvis du har brug for et tredje, hører det nok til på selve profilen. [Visuelt hierarki](https://gradiently.design/da/guide/visual-hierarchy) forklarer, hvordan størrelse og afstand klarer det arbejde uden ekstra pynt. ## Sikre områder og beskæring Hver platform beskærer eller dækker sit banner forskelligt på computer og telefon. Den sikre tilgang er den samme overalt: lad baggrunden løbe fra kant til kant, og hold ord og logoer i midten af rammen, væk fra hjørnet, hvor avataren sidder. 1. **Find det dækkede hjørne** På LinkedIn, X og Bluesky ligger profilbilledet over det nederste venstre hjørne. Hold det område til kun baggrund. 2. **Tag højde for beskæring på telefon** Facebook og Etsy trimmer siderne på telefoner. Hold ord inden for de centrale to tredjedele af bredden. 3. **Brug YouTubes centrale stribe** Af rammen på 2560 × 1440 vises kun midten på omkring 1546 × 423 pixel på alle enheder. Sæt navnet og eventuelle ord dér. 4. **Tjek i virkelig størrelse** Upload, og se det på en telefon og en bærbar. Et eksempel i et designværktøj kan ikke vise dig platformens grænseflade, og platforme ændrer deres layouts, så tjek deres egne hjælpesider før en stor lancering. ## Trykte bannere: roll ups og arrangementsskilte Et roll up-banner, almindeligvis 850 × 2000 mm, er det modsatte problem: højt og set fra flere meters afstand, mens folk går forbi. Det har brug for et logo og en overskrift i den øverste tredjedel i øjenhøjde, meget lidt i den nederste tredjedel, som skjules bag borde og ben, og tekst stor nok til at kunne læses fra den anden side af et rum. Spørg dit trykkeri, hvilken opløsning de vil have; store bannere trykkes normalt fra filer langt under 300 dpi, fordi ingen ser dem på tæt hold. ### Undgå - Et afsnit, der forklarer, hvad du laver - Ord spredt over hele bredden - Lille tekst i hjørnet, skjult af avataren - Et travlt foto bag overskriften - Vigtige detaljer nederst på et roll up ### Gør - Fire til otte ord, der siger, hvem du er - Én kompakt blok tekst - Kun baggrund, hvor grænsefladen sidder - Et roligt farveområde bag ordene - Logo og overskrift i øjenhøjde Til stande og scener, se [design af arrangementsbaggrunde](https://gradiently.design/da/guide/event-backdrop-design), og til store papirformater, [plakatstørrelser](https://gradiently.design/da/guide/poster-size-guide). ## Ét udtryk på tværs af alle bannere De fleste har brug for fem eller seks bannere på én gang: LinkedIn, X, YouTube, en e-mailheader, et hero på et websted. De ligner ét brand, når baggrund, skrift og farve forbliver de samme, og kun layoutet ændrer sig. En gradient er ideel til det, fordi den ikke har noget motiv, der kan beskæres, så længe den gengives til hver form frem for at blive strakt. En bred bannergradient, mørk til venstre: `linear-gradient(100deg, #0e1a2b 0%, #183b56 40%, #2a7f8f 75%, #9fd8cb 100%)` En vandret overgang, der forbliver mørk til venstre, hvor en avatar eller et logo sidder, og lysner mod højre. Kopiér den som udgangspunkt for et profilbanner. I Gradiently gengives en Mark på ny i hver bannerstørrelse, flytter sit roligste område bag dine ord og lader Automatisk tekstfarve vælge lys eller mørk tekst pr. linje. Med Pro kan ét design ændres til alle størrelser i ét trin, så bannerne til LinkedIn, X og YouTube kommer sammen. Idéen om én genkendelig baggrund er beskrevet i [et signaturudtryk](https://gradiently.design/da/guide/brand-signature-look). ## FAQ ### Hvilken størrelse skal et banner have? Det afhænger af, hvor det skal bruges: 1584 × 396 til en LinkedIn-profil, 1500 × 500 til X, 2560 × 1440 til YouTube og 1200 × 600 til en blog eller et e-mailbanner. ### Hvor skal teksten stå på et banner til sociale medier? I én kompakt blok nær midten eller til højre, væk fra det nederste venstre hjørne, hvor profilbilledet som regel sidder. ### Hvad er det sikre område på et YouTube-banner? Omkring 1546 × 423 pixel i midten af billedet på 2560 × 1440. Kun det område vises på alle enheder. ### Hvor mange ord skal et banner have? Fire til otte til overskriften plus højst én lille understøttende linje. Bannere ses kort og ofte i lille størrelse. ### Hvilken opløsning har et trykt banner brug for? Spørg dit trykkeri. Store bannere, der ses på afstand, trykkes som regel fra filer langt under 300 dpi i fuld størrelse.