# Bannerin suunnittelu verkkoon, someen ja painoon

[Canonical HTML page](https://gradiently.design/fi/guide/banner-design)

Bannerit ovat pitkiä, matalia ja usein osin profiilikuvan peittämiä tai puhelimessa rajattuja. Muoto huomioiden muutama sana kantaa koko brändiä. Alta löydät tarvitsemasi koot.

## The short version

- Bannerit ovat leveitä: blogi- ja sähköpostibannerin kuvasuhde on noin 2:1, LinkedIn-yrityskannen noin 6:1.
- Leveässä bannerissa silmä kulkee vasemmalta oikealle. Sanojen kannattaa olla yhtenä tiiviinä lohkona, ei koko leveydelle hajotettuina.
- Useimmat somebannerit jäävät osin profiilikuvan alle tai rajautuvat puhelimissa. Tärkeä sisältö kuuluu keskialueelle.
- YouTube-kanavan banneri on 2560 × 1440 pikseliä, mutta vain noin 1546 × 423 pikselin keskikaistale näkyy kaikilla laitteilla.
- Roll upien kaltaiset painetut bannerit luetaan metrien päästä, joten ne tarvitsevat paljon vähemmän sanoja ja suuremman tekstin kuin verkkobannerit.

Hyvä **bannerin suunnittelu** hyödyntää muotoa. Banneri on leveä ja matala, joten anna sille yksi tiivis tekstilohko: lyhyt otsikko ja ehkä tukirivi paikassa, jota mikään ei peitä. Tausta kantaa värin muulle leveydelle. Tarkista ensin alustan koko ja turva-alue. LinkedIn-profiilibanneri on 1584 × 396 pikseliä, ja profiilikuva peittää vasemman alakulman. YouTube-banneri on 2560 × 1440, mutta puhelimessa näkyy vain keskikaistale.

## Bannerikoot verkkoon ja someen

| Banneri | Koko (px) | Muoto | Mikä peittää sitä |
| --- | --- | --- | --- |
| LinkedIn-profiilibanneri | 1584 × 396 | 4:1 | Profiilikuva vasemmalla alhaalla |
| LinkedIn-yrityskansi | 2256 × 382 | Noin 6:1 | Logo vasemmalla alhaalla |
| X-otsake | 1500 × 500 | 3:1 | Profiilikuva vasemmalla alhaalla |
| Facebook-kansi | 1640 × 624 | Noin 2,6:1 | Profiilikuva, rajaus puhelimissa |
| YouTube-kanavakuva | 2560 × 1440 | 16:9 | Vain keskiosa näkyy kaikilla laitteilla |
| Bluesky-banneri | 3000 × 1000 | 3:1 | Avatar vasemmalla alhaalla |
| Verkkosivun pääkuva | 1920 × 1080 | 16:9 | Navigointi yläreunassa |
| Blogibanneri ja sähköpostiotsake | 1200 × 600 | 2:1 | Ei mikään, mutta usein pieni näyttökoko |
| Etsy-kaupan banneri | 3360 × 840 | 4:1 | Rajautuu puhelimissa |

Koot Gradientlyn kokoluettelosta, joka noudattaa alustojen suositeltuja latauskokoja. Tarkemmin: [LinkedIn-bannerin koko](https://gradiently.design/fi/guide/linkedin-banner-size) ja [YouTube-bannerin koko](https://gradiently.design/fi/guide/youtube-banner-size).

- Blogibanneri 2:1: 1200 × 600
- X-otsake 3:1: 1500 × 500
- LinkedIn-banneri 4:1: 1584 × 396
- LinkedIn-yrityskansi 6:1: 2256 × 382

Neljä banneria mittakaavassa. Muodon madaltuessa tekstille jäävä tila kutistuu paljon nopeammin kuin leveys kasvaa.

## Tekstin taitto leveään banneriin

Banneria luetaan tekstirivin tavoin: nopeasti vasemmalta oikealle. Koko leveydelle hajautettu teksti pakottaa silmän kulkemaan liian pitkälle. Ryhmittele sanat yhteen, noin kolmanneksen levyiseen lohkoon. Tee otsikosta luettava silloinkin, kun koko banneri pienenee puhelimen levyiseksi.

Leveä LinkedIn-banneri, lyhyt otsikko oikealla ja liukuväri muualla

LinkedIn-profiilibanneri, jonka sanat pysyvät poissa vasemman alakulman profiilikuvan alta.

X-otsakebanneri ilmoittaa uudet podcast-jaksot torstaisin liukuväritaustalla

X-otsake: yksi rivi, yksi tieto, ei mitään tärkeää avatarin kulmassa.

Näin matalassa muodossa hierarkian pitää olla yksinkertainen. Kaksi tasoa on yleensä enimmäismäärä: otsikko ja pieni rivi sen yllä tai alla. Kolmas kuuluu luultavasti itse profiiliin. [Visuaalinen hierarkia](https://gradiently.design/fi/guide/visual-hierarchy) kertoo, miten koko ja välit hoitavat työn ilman lisäkoristeita.

## Turva-alueet ja rajaus

Jokainen alusta rajaa tai peittää bannerinsa eri tavoin tietokoneessa ja puhelimessa. Varma tapa on kaikkialla sama: anna taustan ulottua reunasta reunaan ja pidä sanat ja logot keskialueella poissa avatarin kulmasta.

1. **Etsi peittyvä kulma** LinkedInissä, X:ssä ja Blueskyssa profiilikuva peittää vasemman alakulman. Jätä siihen vain taustaa.
2. **Varaudu puhelinrajaukseen** Facebook ja Etsy leikkaavat sivuja puhelimissa. Pidä sanat leveyden keskimmäisessä kahdessa kolmanneksessa.
3. **Käytä YouTuben keskikaistaletta** 2560 × 1440-kehyksestä vain noin 1546 × 423 pikselin keskiosa näkyy kaikilla laitteilla. Sijoita nimi ja sanat siihen.
4. **Tarkista oikeassa koossa** Lataa kuva ja katso sitä puhelimessa ja kannettavalla. Suunnittelutyökalun esikatselu ei näytä alustan käyttöliittymää. Alustat myös muuttavat asettelujaan, joten tarkista niiden ohjesivut ennen suurta lanseerausta.

## Painetut bannerit: roll upit ja tapahtumakyltit

Tavallisesti 850 × 2000 mm:n roll upissa ongelma on päinvastainen: se on korkea ja sitä katsotaan metrien päästä ohikulkiessa. Logo ja otsikko kuuluvat yläkolmannekseen silmien tasolle. Alakolmannekseen tulee hyvin vähän, sillä se jää pöytien ja jalkojen taakse. Tekstin pitää erottua huoneen toiselta puolelta. Kysy painolta tarkkuusvaatimus. Suuret bannerit painetaan yleensä selvästi alle 300 dpi:n tiedostoista, koska niitä ei katsota läheltä.

### Vältä

- Kappaletta, joka selittää toimintasi
- Sanoja koko leveydelle levitettynä
- Pientä tekstiä avatarin peittämässä kulmassa
- Levotonta kuvaa otsikon takana
- Tärkeitä tietoja roll upin alareunassa

### Tee näin

- Neljästä kahdeksaan sanaa, jotka kertovat kuka olet
- Yksi tiivis tekstilohko
- Vain taustaa käyttöliittymän kohdalla
- Rauhallinen värialue sanojen takana
- Logo ja otsikko silmien tasolle

Messuosastoihin ja lavoille katso [tapahtumataustan suunnittelu](https://gradiently.design/fi/guide/event-backdrop-design), suuriin paperiformaatteihin [julistekoot](https://gradiently.design/fi/guide/poster-size-guide).

## Yksi ilme kaikkiin bannereihin

Useimmat tarvitsevat viisi tai kuusi banneria kerralla: LinkedIniin, X:ään, YouTubeen, sähköpostiin ja verkkosivun pääkuvaksi. Ne näyttävät yhdeltä brändiltä, kun tausta, typografia ja väri pysyvät ja vain taitto muuttuu. Liukuväri sopii tähän hyvin, koska siinä ei ole rajattavaa kohdetta, kunhan se piirtyy kuhunkin muotoon venyttämisen sijaan.

Leveä banneriliukuväri, tumma vasemmalta: `linear-gradient(100deg, #0e1a2b 0%, #183b56 40%, #2a7f8f 75%, #9fd8cb 100%)`

Vaakasiirtymä pysyy tummana vasemmalla avatarin tai logon kohdalla ja vaalenee oikealle. Kopioi se profiilibannerin lähtökohdaksi.

Gradientlyssä Mark piirtyy uudelleen joka bannerikokoon, siirtää rauhallisimman alueensa sanojen taakse ja antaa Automaattisen musteen valita vaalean tai tumman tekstin riveittäin. Prolla yksi suunnitelma muuttuu kaikkiin kokoihin kerralla, joten LinkedIn-, X- ja YouTube-bannerit syntyvät yhdessä. Yhtä tunnistettavaa taustaa käsittelee [brändin oma ilme](https://gradiently.design/fi/guide/brand-signature-look).

## FAQ

### Minkä kokoinen bannerin pitäisi olla?

Käyttökohteen mukaan: 1584 × 396 LinkedIn-profiiliin, 1500 × 500 X:ään, 2560 × 1440 YouTubeen ja 1200 × 600 blogiin tai sähköpostiin.

### Mihin teksti sijoitetaan somebannerissa?

Yhteen tiiviiseen lohkoon keskelle tai oikealle, poissa vasemmasta alakulmasta, jossa profiilikuva yleensä on.

### Mikä on YouTube-bannerin turva-alue?

Noin 1546 × 423 pikseliä 2560 × 1440-kuvan keskellä. Vain tämä alue näkyy kaikilla laitteilla.

### Kuinka monta sanaa bannerissa pitäisi olla?

Otsikossa neljästä kahdeksaan ja korkeintaan yksi pieni tukirivi. Bannerit nähdään lyhyesti ja usein pieninä.

### Minkä tarkkuuden painettu banneri tarvitsee?

Kysy painolta. Kaukaa katsottavat suuret bannerit painetaan yleensä selvästi alle 300 dpi:n tiedostoista lopullisessa koossa.