# PNG med genomskinlig bakgrund: när du behöver den och hur

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

En genomskinlig PNG är filen du tar till när en logotyp eller titel ska ligga på något du inte designat. Det är också filen folk använder när de inte borde.

## The short version

- En PNG med genomskinlig bakgrund lagrar en alfakanal, så att varje pixel kan vara helt genomskinlig, massiv eller något däremellan.
- Genomskinliga PNG:er passar logotyper, titlar, klistermärken och överlägg som ska ligga på bakgrunder du inte styr, som videor, bildspel och webbplatser.
- JPG kan inte lagra transparens, så en JPG av en logotyp har alltid en massiv ruta bakom sig.
- De flesta sociala inlägg ska exporteras med hela sin bakgrund, inte som genomskinliga filer.
- Kontrollera en genomskinlig export på både ljus och mörk bakgrund, eftersom bleka kanter och svaga skuggor bara syns på den ena.

En **PNG med genomskinlig bakgrund** är en bild där bakgrunden lämnats tom, så att bara logotypen, texten eller objektet finns kvar och det som ligger under syns igenom. Du behöver en varje gång din design ska placeras på något du inte gjort: en logotyp på en kunds webbplats, en titel över videomaterial, ett klistermärke på ett foto, ett märke på en bild i ett bildspel. PNG klarar det eftersom den lagrar en alfakanal, ett fjärde värde för varje pixel som säger hur genomskinlig den är. JPG har ingen alfakanal, vilket är varför en JPG-logotyp alltid kommer i en vit eller färgad ruta.

## Så fungerar transparens i en PNG

Varje pixel i en vanlig bild har tre värden: rött, grönt och blått. En PNG med transparens lägger till ett fjärde, alfa, från helt genomskinlig till helt massiv. Mellanvärdena betyder lika mycket som ytterligheterna. Den mjuka kanten på en bokstav, en lätt skugga eller en glaseffekt är gjord av delvis genomskinliga pixlar, och de låter designen smälta in i det som ligger bakom.

| Format | Transparens | Bäst för |
| --- | --- | --- |
| PNG | Full alfa, mjuka kanter | Logotyper, titlar, klistermärken, överlägg |
| JPG | Ingen | Foton och hela designer med bakgrund |
| SVG | Ja, vektor | Logotyper och ikoner på webbplatser, skalbara till vilken storlek som helst |
| WebP | Full alfa | Webbbilder där filstorleken spelar roll |
| GIF | Bara på eller av, hårda kanter | Enkla animationer |
| MP4 | Ingen i vanlig användning | Video med egen bakgrund |

Vilka format som kan bära en tom bakgrund. GIF-transparens är allt eller inget, så mjuka kanter ser hackiga ut; PNG och WebP behåller dem mjuka.

För en djupare jämförelse av de två vanligaste formaten, se [PNG eller JPG](https://gradiently.design/sv/guide/png-vs-jpeg), och för logotyper på webbplatser förklarar [SVG eller PNG](https://gradiently.design/sv/guide/svg-vs-png) när vektor är det bättre valet.

## När du behöver en genomskinlig PNG

- **Logotyper som andra ska använda.** Partner, press, eventarrangörer och sponsorer placerar din logotyp på sina egna bakgrunder. Skicka en genomskinlig PNG, helst i ljusa och mörka [logotypvarianter](https://gradiently.design/sv/guide/logo-variations), plus en SVG.
- **Titlar och undertitlar i video.** Videoredigerare lägger en genomskinlig PNG över filmmaterial, så att orden svävar över bilden.
- **Klistermärken och överlägg.** Märken som ”Ny” eller ”Såld”, ramar och prislappar som läggs på foton eller stories.
- **Bildspel och dokument.** En logotyp eller ett diagram som ska ligga på en färgad bild utan en vit ruta.
- **Webbplatser.** Ikoner, logotyper och illustrationer som placeras över färgade sektioner eller hjältebakgrunder.
- **Merchandise och tryck på beställning.** Många tryckleverantörer ber om en genomskinlig PNG så att bara motivet trycks på tröjan eller muggen.

En bred banner med ordbilden Northfield över en gradientbakgrund

Hela designen: ordbilden och bakgrunden tillsammans, rätt för en banner eller ett inlägg.

Samma ordbild Northfield placerad på en annan färgad bakgrund, som en genomskinlig PNG tillåter

Exporterad genomskinlig kan samma ordbild i stället ligga på en partners bakgrund. Här hamnar den på ett annat färgfält.

## När en genomskinlig bakgrund är fel val

Transparens är till för delar, inte färdiga verk. Ett socialt inlägg, en story, en affisch eller ett e-posthuvud ska exporteras med sin bakgrund, eftersom den bakgrunden är halva designen. De flesta sociala plattformar behåller inte transparens i inlägg du laddar upp, och en tom yta kan fyllas med en färg du inte valt. Vissa marknadsplatser ber också om produktfoton på massivt vitt i stället för genomskinligt, så kontrollera plattformens egna regler.

### Exportera genomskinligt

- En logotyp för partner och press
- En titel att lägga över video
- Ett klistermärke eller märke för foton
- En ikon för en färgad webbsektion
- Motiv för tryck på beställning

### Exportera med bakgrund

- Inlägg på Instagram, LinkedIn och Facebook
- Stories, Reels-omslag och miniatyrer
- Affischer, flygblad och menyer
- E-posthuvuden
- Allt du vill ska se ut exakt som designat

## Så gör du en genomskinlig PNG

Det finns två vägar. Om du designar saken själv, som en titel, en logotyp eller ett märke, bygg den utan bakgrund och exportera med transparens påslagen. Om du utgår från ett foto måste du ta bort bakgrunden först, för hand eller med ett borttagningsverktyg, vilket är ett annat och svårare jobb. Stegen nedan täcker den första vägen.

1. **Designa i den storlek du kommer att behöva** Genomskinliga filer skalas ofta upp senare, så exportera större än du tror: en ordbild på 2 000 px i bredd eller mer är en säker början.
2. **Lämna bakgrunden tom** Dölj eller radera varje bakgrundsskikt. De flesta verktyg visar tomhet som ett grått och vitt schackmönster.
3. **Välj PNG med transparens** Välj PNG i exportdialogen och se till att transparens eller klar bakgrund är ikryssad. JPG fyller den tyst med vitt.
4. **Trimma kanterna** Beskär till motivet med lite andrum, så att den som placerar det inte kämpar mot osynliga marginaler.
5. **Testa på ljust och mörkt** Släpp filen på en vit sida och en svart sida. Leta efter bleka glorior, saknade skuggor och text som försvinner på en av dem.

- Testa på vitt: #ffffff
- Testa på mellangrått: #808080
- Testa på nästan svart: #111111
- Testa på en varumärkesfärg: #2563eb

Fyra bakgrunder att kontrollera varje genomskinlig export mot. En blek kant syns på svart; en mörk skugga försvinner på den; vitt motiv försvinner på vitt.

> **Problemet med den vita gloria** Om ett motiv en gång ritats på vitt kan dess mjuka kanter behålla en tunn blek kant som syns på mörka bakgrunder. Exportera från originalskikten utan bakgrund i stället för att radera vitt ur en sammanslagen bild.

## Export av genomskinlig PNG i Gradiently

I Gradiently ligger en design normalt på sin Mark, den levande bakgrunden bakom allt. Med Pro kan du exportera en genomskinlig PNG i stället: bara dina element, som text, former, ikoner och foton, på en klar bakgrund, utan Marken. Det är filen att skicka till en partner, släppa in i en videoredigerare eller placera på en webbplats. Pro exporterar också SVG för samma användningar, och båda kommer från samma design som du postar med dess fulla bakgrund. Som med varje Gradiently-export måste designens Mark vara din. [Exportera bilder och loopar](https://gradiently.design/sv/guide/export-images-and-loops) går igenom varje format, och för logotyper på färg, se [logotyp på gradientbakgrund](https://gradiently.design/sv/guide/logo-on-gradient-background).

## FAQ

### Kan en JPG ha genomskinlig bakgrund?

Nej. JPG har ingen alfakanal, så varje tom yta fylls med en massiv färg, oftast vit. Använd PNG, WebP eller SVG i stället.

### Varför har min genomskinliga PNG vit bakgrund?

Antingen aktiverades inte transparens vid exporten, eller så visar appen du öppnade den i tomma ytor som vita. Lägg den på en mörk bakgrund för att kontrollera.

### Ska jag ladda upp genomskinliga PNG:er till Instagram?

Nej. Exportera inlägg och stories med sin fulla bakgrund, eftersom plattformen inte behåller transparens och kan fylla tomma ytor med sin egen färg.

### Vad är bäst för en logotyp, genomskinlig PNG eller SVG?

SVG för webbplatser och allt som skalar, eftersom den förblir skarp i varje storlek. Genomskinlig PNG för appar, videoredigerare och personer som inte kan öppna SVG.

### Vilken storlek ska en genomskinlig logotyp-PNG ha?

Större än du tror att du behöver, minst 2 000 pixlar i bredd för en ordbild, så att andra kan skala ner den utan att den blir mjuk.