# Logoversiot: päälogo, pystylogo, kuvake ja yksivärinen

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

Yksi logo ei sovi leveään banneriin, pieneen ympyrään ja kumileimasimeen. Pieni logoversioiden perhe sopii. Tässä useimpien brändien tarvitsema joukko ja yhtenäisyyden säännöt.

## The short version

- Logoversiot ovat saman logon erilaisia asetteluja ja värityksiä, jotka sopivat sen kaikkiin käyttötiloihin.
- Tavalliseen joukkoon kuuluvat päälogo, vaakaversio, pystyversio, kuvake tai alalogo sekä mustat ja valkoiset yksiväriversiot.
- Jokaisen version pitäisi jakaa samat kirjainmuodot, symboli ja värit, jotta ne näyttävät yhdeltä logolta.
- Kuvake tai alalogo on profiilikuvissa, faviconeissa ja muissa pienissä neliötiloissa käytettävä versio.
- Kirjaa kunkin version käyttöpaikat, jotta kenenkään ei tarvitse arvailla tai venyttää päälogoa sopivaksi.

**Logoversiot** ovat yhden logon eri tiloihin aseteltuja ja väritettyjä muotoja. Useimmat brändit tarvitsevat viisi: päälogon, vaakayhdistelmän leveisiin tiloihin, pystyversion neliöihin, kuvakkeen tai alalogon pieniin tiloihin sekä mustat ja valkoiset yksiväriversiot. Samoista osista rakennettuina ne saavat logon näyttämään oikealta bannerissa, profiilikuvassa ja yhden musteen leimassa ilman venyttämistä tai litistämistä.

## Miksi yksi logo ei riitä

Myymäläkylttiin suunniteltu logo on yleensä liian leveä profiilikuvaksi ja yksityiskohtainen faviconiksi. Jos tiedostoja on yksi, ihmiset improvisoivat: pienentävät lukukelvottomaksi, litistävät sopivaksi tai asettavat katoamisen aiheuttavalle taustalle. Versiot ratkaisevat tämän etukäteen. Päätät kerran, miten logo mukautuu, ja kaikki noudattavat samaa vastausta.

## Viisi useimpien brändien tarvitsemaa logoversiota

| Versio | Mikä se on | Käyttö |
| --- | --- | --- |
| Päälogo | Koko suunniteltu logo, yleensä symboli ja nimi | Sivuston otsake, kyltit, asiakirjojen ensimmäinen sivu |
| Vaakalogo | Symboli nimen vasemmalla puolella yhdellä rivillä | Bannerit, sähköpostiotsakkeet, kapeat navigointipalkit |
| Pystylogo | Symboli nimen yläpuolella keskitettynä | Neliöjulkaisut, pakkausetiketit, oheistuotteet |
| Kuvake tai alalogo | Pelkkä symboli tai nimikirjaimet | Profiilikuvat, faviconit, sovelluskuvakkeet, vesileimat, tarrat |
| Yksivärinen | Mikä tahansa edellisistä täysin mustana tai valkoisena | Yhden musteen painatus, kuvat, kohokuviointi, leimat, tummat tai levottomat taustat |

Päälogosi voi jo olla vaaka- tai pystymuotoinen. Silloin tarvitset toisen asettelun sekä kuvake- ja yksiväriversiot.

Jotkut brändit lisäävät **pelkän nimilogon** ilman symbolia paikkoihin, joissa symboli olisi liian pieni. **Merkki- tai tunnuskuvioversio** voi olla hyödyllinen tarroissa ja pakkaussineteissä. Kumpikaan ei ole välttämätön alussa.

## Sovita jokainen versio tilaansa

Tilan muoto ratkaisee version. Leveään tilaan vaakayhdistelmä, neliöön pystyversio tai kuvake ja pikkukuvaa pienempään tilaan pelkkä kuvake.

- Sähköposti 1200×600: vaaka: 1200 × 600
- Instagram-neliö 1080×1080: pysty: 1080 × 1080
- Tarina 1080×1920: pysty tai kuvake: 1080 × 1920
- LinkedIn-banneri 1584×396: vaaka: 1584 × 396

Pinnan muoto kertoo, minkä version valitset. Pystylogo hukkaa ohuessa bannerissa tilaa, vaakalogo jää neliössä pieneksi.

Leveä sähköpostiotsake, jossa nimi Fern Studio on yhdellä rivillä ja uutuuksista kertova teksti vihreällä liukuvärillä

Leveässä sähköpostiotsakkeessa nimi on yhdellä rivillä ja tila tuntuu luontevalta.

Neliömuotoinen Instagram-julkaisu, jossa Studio on suuren Fern-sanan yläpuolella keskitettynä samalla vihreällä liukuvärillä

Neliössä pystyasettelu täyttää kuvan ja pysyy luettavan suurena.

## Väriversiot: täysvärinen, vaalea ja yksivärinen

Jokainen asettelu tarvitsee myös väriversioita. Et tarvitse kaikkia yhdistelmiä, mutta nämä neljä antavat logolle ratkaisun vaaleille ja tummille taustoille sekä yhden musteen painatukseen.

- Täysvärinen vaalealla: #14532d
- Vaalea tummalla: #f7f3ea
- Yksivärinen musta: #111111
- Yksivärinen valkoinen: #ffffff

Fernin vihreä arkikäyttöön, lämmin paperiversio tummille pohjille sekä puhdas musta ja valkoinen leimoihin, valokuviin ja yhden musteen töihin.

Liukuväreillä ja valokuvilla yksivärinen valkoinen tai musta on usein oikea valinta, sillä kaksivärinen logo voi riidellä taustan kanssa. [Logo liukuväritaustalla](https://gradiently.design/fi/guide/logo-on-gradient-background) näyttää valinnan, ja [logon taustaideat](https://gradiently.design/fi/guide/logo-background-ideas) tarjoaa yksinkertaiselle logolle sopivia taustoja.

## Logoversioiden joukon rakentaminen

1. **Aloita vektoripäälogosta** Jokainen versio järjestetään samoista pääosista. Älä piirrä symbolia uudelleen tai vaihda nimen kirjasinvahvuutta.
2. **Tee vaaka- ja pystyyhdistelmät** Siirrä symboli nimen viereen tai yläpuolelle. Määritä väli mitalla, esimerkiksi nimen isojen kirjainten korkeudella.
3. **Pelkistä kuvake** Ota pelkkä symboli tai nimikirjaimet, poista hienot yksityiskohdat ja vahvista ohuet viivat. Sen pitää erottua hyvin pienenä, joten testaa [faviconina](https://gradiently.design/fi/guide/favicon-design).
4. **Luo väriversiot** Täysvärinen, vaalea, musta ja valkoinen joka asettelusta. Tarkista vaalea versio tummimmalla brändivärillä.
5. **Määritä suoja-alue ja vähimmäiskoot** Määritä tyhjä marginaali kunkin version ympärillä sekä pienin sallittu koko, näytöille pikseleinä ja painoon millimetreinä.
6. **Vie ja nimeä tiedostot selkeästi** SVG, PDF ja läpinäkyvä PNG jokaisesta, nimellä kuten `fern-stacked-reversed.svg`, jotta oikea löytyy avaamatta.

## Säännöt, jotka pitävät versiot yhden logon näköisinä

### Vältä

- Version venyttämistä tai litistämistä tilaan
- Kuvakkeen piirtämistä eri tavoin joka alustalle
- Vain yhdessä versiossa esiintyviä uusia värejä
- Tunnuslauseiden satunnaista lisäämistä osaan versioista
- Päälogon käyttöä kuvakkeen paikalla

### Tee näin

- Valitse tilan muotoon sopiva versio
- Yksi kuvake kaikkiin pieniin neliöihin
- Sama paletti koko joukossa
- Käsittele tunnuslauseyhdistelmä omana dokumentoituna versionaan
- Kunnioita suoja-aluetta ja vähimmäiskokoja

Dokumentoi joukko yhdelle [brändin tyylioppaan](https://gradiently.design/fi/guide/brand-style-guide) sivulle: jokainen versio, sen väritykset, suoja-alue, vähimmäiskoko ja käyttöpaikka. Laita tiedostot sitten sinne, missä ihmiset suunnittelevat. Gradientlyn brändipakettiin mahtuu useita logoja rinnakkain, joten pystyversio, kuvake ja vaalea tiedosto ovat Studiossa yhden klikkauksen päässä. Designer voi käyttää pakettia asettelussa. [Brändipaketti](https://gradiently.design/fi/guide/brand-kit) käsittelee niiden rinnalle kuuluvat asiat.

## FAQ

### Mitä logoversiot ovat?

Ne ovat yhden logon vaihtoehtoisia muotoja, kuten vaaka-, pysty-, kuvake- ja yksiväriversio. Niiden avulla logo sopii eri tiloihin vääristymättä.

### Kuinka monta logoversiota tarvitsen?

Useimmat brändit tarvitsevat noin viisi: päälogo, vaaka, pysty, kuvake tai alalogo sekä mustat ja valkoiset versiot. Lisää muita vain todelliseen tarpeeseen.

### Mikä on alalogo?

Alalogo on pelkistetty, yleensä tiivis logoversio, usein nimikirjaimet tai pelkkä symboli. Sitä käytetään profiilikuvien, faviconien ja tarrojen kaltaisissa pienissä tiloissa.

### Mikä on mukautuva logo?

Mukautuva logo on joukko versioita, jotka yksinkertaistuvat tilan pienentyessä: koko yhdistelmä suurilla näytöillä ja pelkkä kuvake pienimmissä koissa.

### Mitä logoversiota käytän profiilikuvassa?

Käytä kuvaketta tai alalogoa tai lyhyttä pystyversiota neliötaustalla. Leveä vaakalogo muuttuu pienessä ympyrässä lukukelvottomaksi.