# Läpinäkyvä PNG-tausta: milloin tarvitset sitä ja miten

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

Läpinäkyvää PNG:tä tarvitaan, kun logo tai otsikko sijoitetaan jonkin muun kuin oman suunnitelmasi päälle. Sitä käytetään myös tilanteissa, joissa ei pitäisi.

## The short version

- Läpinäkyvä PNG-tausta tallentaa alfakanavan, joten jokainen pikseli voi olla täysin läpinäkyvä, täysin peittävä tai jotakin niiden väliltä.
- Läpinäkyvät PNG:t sopivat logoihin, otsikoihin, tarroihin ja päälle asetettaviin elementteihin taustoilla, joita et hallitse, kuten videoissa, dioissa ja verkkosivuilla.
- JPG ei tallenna läpinäkyvyyttä, joten JPG-logon mukana tulee aina yhtenäinen laatikko sen taakse.
- Useimmat somejulkaisut kannattaa viedä koko taustansa kanssa läpinäkyvien tiedostojen sijaan.
- Tarkista läpinäkyvä vienti sekä vaalealla että tummalla taustalla, sillä vaaleat reunukset ja heikot varjot näkyvät vain toisella niistä.

**Läpinäkyvä PNG-tausta** tarkoittaa kuvaa, jonka tausta on jätetty tyhjäksi. Näkyviin jää vain logo, teksti tai kohde, ja kaikki alla oleva näkyy läpi. Tarvitset tällaista tiedostoa, kun suunnitelma sijoitetaan jonkin sellaisen päälle, jota et ole itse tehnyt: logo asiakkaan verkkosivulle, otsikko videokuvaan, tarra valokuvaan tai tunnus diaan. PNG pystyy tähän alfakanavan ansiosta. Se on jokaisen pikselin neljäs arvo, joka kertoo läpinäkyvyyden. JPG:ssä alfakanavaa ei ole, joten JPG-logossa on aina valkoinen tai värillinen laatikko.

## Miten PNG:n läpinäkyvyys toimii

Tavallisen kuvan jokaisella pikselillä on kolme arvoa: punainen, vihreä ja sininen. Läpinäkyvä PNG lisää neljännen, alfan, täysin läpinäkyvästä täysin peittävään. Väliarvot ovat yhtä tärkeitä kuin ääripäät. Kirjaimen pehmeä reuna, hento varjo tai lasitehoste koostuu osittain läpinäkyvistä pikseleistä. Ne auttavat suunnitelmaa sulautumaan sen takana olevaan sisältöön.

| Muoto | Läpinäkyvyys | Sopii parhaiten |
| --- | --- | --- |
| PNG | Täysi alfakanava, pehmeät reunat | Logot, otsikot, tarrat ja päälle asetettavat elementit |
| JPG | Ei ole | Valokuvat ja kokonaiset suunnitelmat taustoineen |
| SVG | Kyllä, vektorina | Verkkosivujen logot ja kuvakkeet, skaalattavissa kaikkiin kokoihin |
| WebP | Täysi alfakanava | Verkkokuvat, joissa tiedostokoko merkitsee |
| GIF | Vain päällä tai pois, kovat reunat | Yksinkertaiset animaatiot |
| MP4 | Ei tavallisessa käytössä | Video omalla taustallaan |

Tiedostomuodot, jotka tukevat tyhjää taustaa. GIF:n läpinäkyvyys on kaikki tai ei mitään, joten pehmeät reunat sahalaitautuvat. PNG ja WebP säilyttävät ne tasaisina.

Kahden tavallisimman muodon tarkempi vertailu on oppaassa [PNG vai JPG](https://gradiently.design/fi/guide/png-vs-jpeg). Verkkosivujen logoista [SVG vai PNG](https://gradiently.design/fi/guide/svg-vs-png) kertoo, milloin vektori on parempi valinta.

## Milloin tarvitset läpinäkyvän PNG:n

- **Logot muiden käyttöön.** Kumppanit, media, tapahtumajärjestäjät ja sponsorit sijoittavat logosi omille taustoilleen. Lähetä läpinäkyvä PNG, mieluiten vaaleina ja tummina [logoversioina](https://gradiently.design/fi/guide/logo-variations), sekä SVG.
- **Videon otsikot ja alareunan nimitekstit.** Videoeditorit asettavat läpinäkyvän PNG:n videokuvan päälle, jolloin sanat ovat suoraan kuvassa.
- **Tarrat ja päälle asetettavat elementit.** Valokuviin ja tarinoihin lisättävät ”Uusi”- tai ”Myyty”-tunnukset, kehykset ja hintalaput.
- **Diat ja asiakirjat.** Logo tai kaavio värilliselle dialle ilman valkoista laatikkoa.
- **Verkkosivut.** Kuvakkeet, logot ja kuvitukset värillisten osioiden tai päätaustojen päällä.
- **Oheistuotteet ja tilaustulostus.** Monet painopalvelut pyytävät läpinäkyvän PNG:n, jotta paitaan tai mukiin painetaan vain itse grafiikka.

Leveä banneri, jossa Northfield-sanamerkki on liukuväritaustalla

Koko suunnitelma: sanamerkki ja tausta yhdessä, sopivana banneriin tai julkaisuun.

Sama Northfield-sanamerkki eri värisellä taustalla, kuten läpinäkyvä PNG mahdollistaa

Läpinäkyvänä viety sama sanamerkki voidaan sijoittaa kumppanin taustalle. Tässä se on eri värikentällä.

## Milloin läpinäkyvä tausta on väärä valinta

Läpinäkyvyys on osia, ei valmiita kokonaisuuksia varten. Somejulkaisu, tarina, juliste tai sähköpostiotsake kannattaa viedä taustansa kanssa, sillä tausta on puolet suunnitelmasta. Useimmat somealustat eivät säilytä lataamiesi julkaisujen läpinäkyvyyttä, ja tyhjä alue voidaan täyttää värillä, jota et valinnut. Jotkin kauppapaikat vaativat myös tuotekuvat yhtenäisellä valkoisella taustalla läpinäkyvän sijaan, joten tarkista alustan omat säännöt.

### Vie läpinäkyvänä

- Logo kumppaneille ja medialle
- Otsikko videon päälle
- Tarra tai tunnus valokuviin
- Kuvake värilliseen verkkosivun osioon
- Grafiikka tilaustulostukseen

### Vie taustan kanssa

- Instagram-, LinkedIn- ja Facebook-julkaisut
- Tarinat, Reels-kannet ja pikkukuvat
- Julisteet, esitteet ja ruokalistat
- Sähköpostiotsakkeet
- Kaikki, minkä haluat näyttävän täsmälleen suunnitellulta

## Näin teet läpinäkyvän PNG:n

Vaihtoehtoja on kaksi. Jos suunnittelet itse esimerkiksi otsikon, logon tai tunnuksen, rakenna se ilman taustaa ja vie läpinäkyvyys käytössä. Jos aloitat valokuvasta, tausta pitää poistaa ensin käsin tai poistotyökalulla. Se on eri tehtävä ja vaikeampi. Seuraavat vaiheet koskevat ensimmäistä tapaa.

1. **Suunnittele tarvitsemaasi kokoon** Läpinäkyviä tiedostoja suurennetaan usein myöhemmin, joten vie odottamaasi suurempana. Vähintään 2 000 px leveä sanamerkki on turvallinen lähtökohta.
2. **Jätä tausta tyhjäksi** Piilota tai poista taustatasot. Useimmat työkalut näyttävät tyhjyyden harmaavalkoisena ruutukuviona.
3. **Valitse PNG ja läpinäkyvyys** Valitse vienti-ikkunassa PNG ja varmista, että läpinäkyvyys tai tyhjä tausta on valittuna. JPG täyttää sen huomaamatta valkoisella.
4. **Rajaa reunat** Rajaa grafiikan ympärille pieni hengitystila, jotta tiedoston käyttäjät eivät joudu taistelemaan näkymättömien marginaalien kanssa.
5. **Testaa vaalealla ja tummalla** Aseta tiedosto valkoiselle ja mustalle sivulle. Etsi vaaleita kehiä, kadonneita varjoja ja tekstiä, joka katoaa toisella taustalla.

- Testaa valkoisella: #ffffff
- Testaa keskiharmaalla: #808080
- Testaa lähes mustalla: #111111
- Testaa brändivärillä: #2563eb

Neljä taustaa jokaisen läpinäkyvän viennin tarkistamiseen. Vaalea reunus näkyy mustalla, tumma varjo katoaa siihen ja valkoinen grafiikka katoaa valkoisella.

> **Valkoisen kehän ongelma** Jos grafiikka on alun perin piirretty valkoiselle, sen pehmeisiin reunoihin voi jäädä ohut vaalea reunus, joka näkyy tummilla taustoilla. Vie alkuperäisistä tasoista ilman taustaa sen sijaan, että pyyhkisit valkoisen yhdistetystä kuvasta.

## Läpinäkyvän PNG:n vienti Gradientlyssä

Gradientlyssä suunnitelma on tavallisesti Markinsa, kaiken takana olevan elävän taustan, päällä. Prolla voit viedä sen läpinäkyvänä PNG:nä: vain elementit, kuten teksti, muodot, kuvakkeet ja valokuvat, tyhjällä taustalla ilman Markia. Tämä tiedosto lähetetään kumppanille, lisätään videoeditoriin tai sijoitetaan verkkosivulle. Pro vie samoihin tarkoituksiin myös SVG:n, ja molemmat syntyvät samasta suunnitelmasta, jonka julkaiset koko taustansa kanssa. Kuten kaikessa Gradientlyn viennissä, suunnitelman Markin pitää olla sinun. [Kuvien ja toistuvien videoiden vienti](https://gradiently.design/fi/guide/export-images-and-loops) käy läpi kaikki muodot, ja [logo liukuväritaustalla](https://gradiently.design/fi/guide/logo-on-gradient-background) käsittelee logoja värillisillä taustoilla.

## FAQ

### Voiko JPG:n tausta olla läpinäkyvä?

Ei. JPG:ssä ei ole alfakanavaa, joten tyhjä alue täytetään yhtenäisellä värillä, yleensä valkoisella. Käytä PNG:tä, WebP:tä tai SVG:tä.

### Miksi läpinäkyvässä PNG:ssäni on valkoinen tausta?

Läpinäkyvyys ei ollut käytössä viennissä tai tiedoston avaava sovellus näyttää tyhjät alueet valkoisina. Tarkista asettamalla kuva tummalle taustalle.

### Kannattaako Instagramiin ladata läpinäkyviä PNG-kuvia?

Ei. Vie julkaisut ja tarinat koko taustansa kanssa, sillä alusta ei säilytä läpinäkyvyyttä ja voi täyttää tyhjät alueet omalla värillään.

### Onko logolle parempi läpinäkyvä PNG vai SVG?

SVG verkkosivuille ja kaikkeen skaalattavaan, sillä se pysyy terävänä kaikissa ko’oissa. Läpinäkyvä PNG sovelluksiin, videoeditoreihin ja ihmisille, jotka eivät voi avata SVG:tä.

### Minkä kokoinen läpinäkyvän PNG-logon pitäisi olla?

Odottamaasi tarvetta suurempi, sanamerkin kohdalla vähintään 2 000 pikseliä leveä. Muut voivat näin pienentää sitä ilman pehmenemistä.