Exportera en logotyp för webbplats, e-post och dokument

En logotyp som ser rätt ut i designprogrammet kan bli liten, suddig eller osynlig efter uppladdning. Orsaken kan vara tomma marginaler, för få pixlar, ett saknat typsnitt eller fel bakgrund. Börja med var logotypen ska visas och välj sedan exportinställningar.

Börja med det bästa originalet du har

Arbeta från formgivarens redigerbara fil eller en äkta vektorversion. Håll originalet åtskilt från de kopior som publiceras. SVG kan bevara vektorbanor, men också innehålla en lågupplöst pixelbild. Filändelsen .svg bevisar inte att varje del förblir skarp när den förstoras.

Om du bara har en liten JPG, be om originalet innan du gör en större export. Att konvertera till PNG eller SVG återskapar inte bokstävernas eller kanternas detaljer. Guiden om SVG och PNG hjälper dig att identifiera filen du har.

Välj format efter användningsområde

SVG bevarar vektorformer; PNG lagrar ett fast rutnät av pixlar. PNG:s förlustfria komprimering passar bokstäver, enfärgade ytor och skarpa kanter: sparandet tillför inte de komprimeringsfel som JPG kan ge. JPG kan göra kanter mjuka eller skapa färgade fransar runt bokstäver och bevarar inte genomskinlighet.

WebP kan komprimeras med eller utan förlust. Pixilos SVG-till-WebP-verktyg har en kvalitetsinställning men inget separat förlustfritt läge. Värdet 100 garanterar därför inte identiska pixlar. Använd WebP när formatet accepteras och den faktiska exporten ser bra ut. För en enkel logotyp kan SVG eller en lämplig PNG vara ett bättre val.

Anpassa exporten till visningsstorleken

Skilj filens pixelmått från storleken den ska visas i. Anta att den exporterade grafiken är fyra gånger så bred som hög och ska visas i 160 × 40 CSS-pixlar. En PNG på 320 × 80 pixlar ger två bildpixlar per CSS-pixel i båda riktningarna, en användbar start för en skärm med hög pixeltäthet. Det är ett exempel, inte en föreskriven logotypstorlek eller en regel om att alltid exportera dubbelt så stort.

Lås proportionerna och ange normalt bara ett mått. Om logotypen är dubbelt så bred som hög ger 160 pixlars visningsbredd en höjd på 80 pixlar, inte 40. Anpassa den till tillgänglig bredd och höjd utan att sträcka den. Använd en godkänd alternativ placering av delarna om hela logotypen inte får plats.

Måtten inkluderar genomskinliga marginaler. Om den synliga logotypen bara fyller halva en 320 pixlar bred bildyta visas den ungefär 80 pixlar bred när hela bilden visas i 160 pixlar. Ta bort oavsiktlig tom yta i originalet men bevara varumärkets frizon. Ange även visningsbredden i webbplatsens eller signaturens redigerare och kontrollera om tjänsten skapar en mindre kopia.

Att bara ändra DPI-värdet ger inte fler bilddetaljer. Läs guiden om DPI, PPI och pixlar. Be om separata krav på fil, färg och upplösning för professionellt tryck.

Kontrollera exportytan och texten före export

Anpassa exportytan till logotypen men behåll dess frizon och utrymme för linjer och skuggor. En stor tom rityta får den synliga logotypen att verka liten även om filen har många pixlar. Beskär inte bort varumärkets avsiktliga luft bara för att få en tätare bild. Inkscapes exportguide visar skillnaden mellan att exportera sida, teckning och markering.

Kontrollera typsnitt och länkad grafik före export. Att omvandla text till banor gör bokstäverna till vektorformer, så utseendet inte längre beror på mottagarens typsnitt. Bokstäverna går då inte att redigera som vanlig text. Gör därför detta i en exportkopia och behåll originalet. Omvandlingen gör inte en inbäddad lågupplöst pixelbild till vektorer.

Gör SVG-filen självständig med nödvändiga bilder och stilar inuti filen. En fil som ser rätt ut när den öppnas separat kan fungera annorlunda som webbild, eftersom externa resurser begränsas där. Det beskrivs i MDN:s dokumentation. Jämför exporten med originaldesignen och kontrollera sedan den placerade versionen. Granska bokstäver, mellanrum, avklippta delar och effekter, inte bara om filen öppnas.

Förbered skärmfärger separat från tryckfiler

Använd varumärkets godkända RGB-färger för skärmversionerna. För PNG och JPG på webben är sRGB en praktisk utgångspunkt. Adobes råd om färger för webben beskriver konverteringen. Om källan använder en annan färgprofil, konvertera färgerna i designprogrammet i stället för att bara tilldela en annan profil och granska resultatet.

Spara ett CMYK- eller dekorfärgsoriginal för tryck separat. Skärm- och tryckversioner kan ha olika godkända färgvärden; en formatkonverterare kan inte välja dem åt dig. Jämför med den godkända skärmversionen, men tänk på att olika skärmar ändå kan skilja sig. Vid synliga avvikelser hjälper guiden om färgskillnader i bilder.

Förbered versioner för ljusa och mörka bakgrunder

Genomskinlighet ändrar inte logotypens färger. Exportera vid behov en godkänd mörk logotyp för ljusa ytor och en vit eller ljus för mörka ytor. På en webbplats måste mallen eller dess utvecklare välja rätt version. Två filer växlar inte automatiskt bara för att de finns.

Kontrollera e-post separat. Appar kan ändra meddelandets bakgrund i mörkt läge, och stödet för att växla bilder varierar. Testa mottagna meddelanden i ljust och mörkt läge. Om den mörka logotypen försvinner, be formgivaren om en godkänd version som syns, exempelvis med en kontrasterande kontur eller lämplig bakgrundsyta. Ingen lösning garanterar samma utseende i alla appar. Mailchimps råd om mörkt läge förklarar varför testning behövs.

PNG kan bevara befintlig genomskinlighet; JPG behöver en täckande bakgrund. Välj den före JPG-exporten. En kryssruta för genomskinlighet tar inte bort en vit rektangel i motivet. Guiden om genomskinliga bakgrunder hjälper dig skilja en verklig bakgrund från förhandsvisningens yta.

Skapa PNG-, JPG- eller WebP-versionerna i Pixilo

1. Öppna den förberedda SVG-filen i SVG till PNG. Välj SVG till JPG om JPG krävs eller SVG till WebP när du har valt WebP för användningen.
2. Ange exportbredd eller -höjd med proportionerna låsta. Behåll genomskinligheten där det stöds eller välj den slutliga bakgrundsfärgen.
3. Konvertera och ladda ned. Kontrollera den nedladdade filen, inte bara källans förhandsvisning. PNG komprimeras förlustfritt och har inget kvalitetsreglage; granska bokstäver och tunna linjer i JPG och WebP när du ändrat kvaliteten.
4. Placera kopian, ange visningsstorleken och kontrollera den publicerade sidan, det mottagna meddelandet eller det exporterade dokumentet. Se till att du ser den nya filen och inte en äldre version från cacheminnet.

Pixilo skapar statiska bildkopior, inte en redigerbar logotyp eller en optimerad SVG. SVG-läsaren avvisar externa resurser och innehåll som inte stöds. Om filen avvisas, gå tillbaka till designprogrammet och exportera en självständig kopia med texten omvandlad till banor vid behov. Aktuella fil- och måttgränser finns på verktygssidan. Spara originalet för framtida exporter.

Namnge filerna så att syftet framgår

Beskriv grafikens färg separat från bakgrunden. dark-artwork betyder exempelvis mörka former, inte en fil avsedd för en mörk bakgrund:

• Redigerbart original: behåll formgivarens ursprungliga fil med dess riktiga filändelse separat från publicerade kopior.
• brand-logo-dark-artwork.svg och brand-logo-white-artwork.svg: mörk grafik för ljusa bakgrunder och vit grafik för mörka.
• brand-logo-dark-artwork-320x80.png: en genomskinlig PNG för exemplets visningsstorlek på 160 × 40 pixlar. Namnet anger filens egna pixelmått.
• brand-logo-white-background.jpg: en valfri JPG med täckande vit bakgrund för en användning som kräver det.

Bifoga en kort anteckning om visningsstorlek och bakgrund. Skapa bara versioner som ska användas. En favicon behöver ofta en egen förenklad symbol eftersom en full ordlogotyp kan vara oläslig i en webbläsarflik. Läs favicon-guiden.

Kontrollera logotypen där den ska användas

Kontrollera den minsta verkliga användningen först. Går bokstäverna att läsa, syns tunna linjer och finns frizonen kvar? Testa sedan ljusa och mörka ytor. Skicka ett riktigt testmeddelande för e-post och kontrollera den mottagna kopian. Öppna dokumentets exporterade PDF och granska en utskrift om pappersresultatet är viktigt.

Ge webbplatsens logotyp ett passande textalternativ. Om den är det enda innehållet i en länk till startsidan, ange målet, till exempel ”Varumärkets startsida”. Om synlig text i samma länk redan anger namn och funktion, undvik att upprepa det. W3C:s guide om funktionella bilder visar båda fallen.

Vanliga frågor

Varför är den uppladdade logotypen suddig när den nedladdade filen är skarp?

Jämför den uppladdade filens faktiska pixelmått med visningsstorleken. Plattformen kan ha skapat en mindre kopia eller layouten kan förstora den. Kontrollera vilken fil den publicerade sidan använder och om stora genomskinliga marginaler gör grafiken liten. En ännu större export löser inte en sida som fortsätter välja fel version.

Varför har PNG-filen en vit ruta?

Visa den nedladdade filen på både ett schackrutemönster och en färgad yta. Om rutan ingår i pixlarna, leta efter ett bakgrundsobjekt i originalet eller en export där genomskinligheten slagits ihop med bakgrunden. Är filen genomskinlig men rutan syns först efter placering, kontrollera bildens bakgrund eller konvertering där den används. Ta bara bort en inritad bakgrund om logotypens design tillåter det.

Kan jag använda samma fil i alla e-postsignaturer?

Börja med PNG och testa signaturredigeraren, mottagna meddelanden och ljust och mörkt läge. En webbpublicerad bild måste finnas kvar på sin adress; en inbäddad bild måste klara e-postsystemets hantering. Behåll kontaktuppgifterna som riktig text så att de finns kvar när bilder blockeras. En lyckad förhandsvisning i avsändarens redigerare räcker inte.

Blir logotypen skalbar om jag konverterar PNG till SVG?

En PNG inuti SVG behåller sina ursprungliga pixlar. Att spåra eller rita om kan ge vektorbanor men också ändra kurvor, avstånd eller bokstäver. Be om vektororiginalet först och låt en återskapad version jämföras med den godkända logotypen.

Vad gör jag om logotypen överskrider en uppladdningsgräns?

Kontrollera först om gränsen gäller filstorlek i KB eller pixelmått. Exportera nödvändiga mått, ta bort oavsiktlig tom yta och undvik onödig uppskalning. Prova förlustfri PNG-komprimering innan du försämrar kanterna. Krävs ett förlustformat, jämför den faktiska nedladdningen medan du sänker kvaliteten. Guiden om mindre bildfiler förklarar avvägningarna. Det finns inget enda KB-mål som passar alla logotyper och användningar.

Varför ändras bokstäver eller färger efter konvertering?

Jämför den redigerbara designen, exporterad SVG, nedladdad bild och placerat resultat för att hitta den första avvikelsen. Saknade eller ersatta typsnitt pekar mot textexporten; saknade effekter eller bilder kan bero på SVG-innehåll som inte stöds. Vid färgförändringar behöver källprofilen och skärmexporten granskas. Rätta den delen och exportera igen i stället för att upprepat konvertera en redan felaktig kopia.