Logon valmistelu verkkosivuille, sähköpostiin ja asiakirjoihin

Suunnitteluohjelmassa hyvältä näyttävä logo voi muuttua palveluun lataamisen jälkeen pieneksi, sumeaksi tai näkymättömäksi. Syynä voi olla ylimääräinen tyhjä tila, liian pieni pikselikoko, puuttuva fontti tai väärä tausta. Selvitä ensin, missä logoa käytetään, ja valitse vientiasetukset sen mukaan.

Aloita parhaasta saatavilla olevasta alkuperäisestä

Käytä suunnittelijan muokattavaa tiedostoa tai aitoa vektoriversiota. Säilytä tämä alkuperäinen erillään julkaistavista kopioista. SVG voi sisältää vektoripolkuja mutta myös pienen bittikartan. Pelkkä .svg-pääte ei takaa, että jokainen osa pysyy tarkkana suurennettaessa.

Jos sinulla on vain pieni JPG, pyydä alkuperäinen ennen suuremman version tekemistä. Muuntaminen PNG:ksi tai SVG:ksi ei palauta kirjainten tai reunojen yksityiskohtia. SVG- ja PNG-opas auttaa tunnistamaan, millainen tiedosto sinulla on.

Valitse tiedostomuoto käyttökohteen mukaan

SVG säilyttää vektorimuodot, kun taas PNG tallentaa kuvan pikseleinä. PNG:n häviötön pakkaus sopii kirjaimille, tasaisille väripinnoille ja teräville reunoille: se ei lisää tallennettuun kuvaan JPG-pakkaukselle tyypillisiä virheitä. JPG voi sumentaa reunoja tai muodostaa kirjainten ympärille värillisiä reunuksia, eikä se säilytä läpinäkyvyyttä.

WebP voi käyttää häviöllistä tai häviötöntä pakkausta. Pixilon SVG–WebP-muuntimessa on laatuasetus mutta ei erillistä häviötöntä tilaa. Arvo 100 ei siis takaa alkuperäistä vastaavia pikseleitä. Käytä WebP:tä, kun palvelu hyväksyy sen ja varsinainen vientitulos näyttää hyvältä. Yksinkertaiselle logolle SVG tai sopivan kokoinen PNG voi olla parempi valinta.

Mitoita vienti näyttökoon mukaan

Erota tiedoston pikselimitat koosta, jossa kuva näytetään. Oletetaan, että viety kuva on neljä kertaa niin leveä kuin korkea ja logo halutaan näyttää 160 × 40 CSS-pikselin kokoisena. 320 × 80 pikselin PNG tarjoaa kumpaankin suuntaan kaksi kuvapikseliä yhtä CSS-pikseliä kohti. Se on käyttökelpoinen lähtökohta tarkalle näytölle, ei logon vakiokoko tai vaatimus kaikkien kuvien kaksinkertaisesta vientikoosta.

Pidä kuvasuhde lukittuna ja anna yleensä vain toinen mitta. Jos logo on kaksi kertaa niin leveä kuin korkea, 160 pikselin leveys tarkoittaa 80 pikselin korkeutta, ei 40:tä. Sovita logo käytettävissä olevaan leveyteen ja korkeuteen venyttämättä sitä. Käytä tarvittaessa brändille hyväksyttyä vaihtoehtoista asettelua.

Pikselimittoihin sisältyvät myös läpinäkyvät reunat. Jos näkyvä logo täyttää vain puolet 320 pikselin levyisestä kuvapohjasta, se näkyy noin 80 pikselin levyisenä, kun koko kuva näytetään 160 pikselin levyisenä. Poista tahaton tyhjä tila alkuperäisestä mutta säilytä logon suoja-alue. Määritä näyttöleveys myös sivuston tai allekirjoituksen editorissa ja tarkista, tekeekö palvelu kuvasta pienemmän version.

Pelkkä DPI-arvon muuttaminen ei lisää kuvaan yksityiskohtia. Lue DPI-, PPI- ja pikseliopas. Ammattipainatusta varten pyydä painolta erilliset tiedosto-, väri- ja tarkkuusvaatimukset.

Tarkista rajaus ja kirjaimet ennen vientiä

Rajaa vientialue tarkoitetun logon ympärille mutta säilytä sen suoja-alue sekä viivojen ja varjojen tarvitsema tila. Suuri tyhjä piirtoalue saa logon näyttämään pieneltä, vaikka tiedostossa olisi runsaasti pikseleitä. Älä poista brändin tarkoituksellista väljyyttä vain tiukemman rajauksen vuoksi. Inkscapen vientiopas havainnollistaa sivun, piirroksen ja valinnan viennin eroa.

Tarkista fontit ja linkitetyt kuvat ennen vientiä. Tekstin muuttaminen poluiksi muuttaa kirjaimet vektorimuodoiksi, jolloin niiden ulkoasu ei enää riipu vastaanottajan fonteista. Kirjaimia ei tämän jälkeen voi muokata tavallisena tekstinä, joten tee muutos vientikopioon ja säilytä alkuperäinen. Tekstin muuttaminen poluiksi ei muuta SVG:n sisältämää pientä bittikarttaa vektorikuvaksi.

Tee SVG:stä itsenäinen tiedosto, joka sisältää tarvittavat kuvat ja tyylit. Yksinään avattuna oikealta näyttävä SVG voi toimia eri tavalla verkkosivun kuvana, sillä ulkoisten resurssien käyttöä rajoitetaan tässä yhteydessä. MDN:n ohje selittää rajoitukset. Vertaa vientitiedostoa suunnitelmaan ja tarkista sitten sivulle asetettu versio. Katso kirjaimia, välejä, leikkautuvia reunoja ja tehosteita, älä vain sitä, avautuuko tiedosto.

Valmistele näyttövärit erikseen painoaineistosta

Käytä näyttöversioissa brändin hyväksyttyjä RGB-värejä. Verkkoon vietäville PNG- ja JPG-kuville sRGB on käytännöllinen lähtökohta. Adoben ohje käsittelee siihen muuntamista. Jos lähde käyttää toista väriprofiilia, muunna värit suunnitteluohjelmassa sen sijaan, että vain määrittäisit tiedostolle uuden profiilin. Tarkista muunnoksen tulos.

Säilytä CMYK- tai spottivärejä käyttävä painoalkuperäinen erikseen. Näyttö- ja painoversioille voi olla omat hyväksytyt väriarvonsa, eikä tiedostomuunnin osaa valita niitä puolestasi. Vertaa tulosta hyväksyttyyn näyttöversioon; eri näyttöjen välillä voi silti olla eroja. Näkyvän poikkeaman selvittämiseen auttaa kuvien värieroja käsittelevä opas.

Tee versiot vaalealle ja tummalle taustalle

Läpinäkyvä tausta ei muuta logon värejä. Vie tarvittaessa hyväksytty tumma logo vaaleille pinnoille ja valkoinen tai vaalea logo tummille. Verkkosivun teeman tai sen kehittäjän pitää valita tilanteeseen oikea versio. Kahden tiedoston tekeminen ei järjestä niiden automaattista vaihtumista.

Sähköposti pitää testata erikseen. Sovellukset voivat muuttaa viestin taustoja tummassa tilassa, ja kuvien vaihtamisen tuki vaihtelee. Tarkista vastaanotetut viestit vaaleassa ja tummassa tilassa. Jos tumma logo katoaa, pyydä suunnittelijalta hyväksytty versio, jossa esimerkiksi erottuva ääriviiva tai sopiva taustapinta säilyttää näkyvyyden. Kumpikaan ratkaisu ei takaa samaa ulkoasua kaikissa sovelluksissa. Mailchimpin ohje selittää, miksi testaaminen on tärkeää.

PNG voi säilyttää olemassa olevan läpinäkyvyyden, mutta JPG tarvitsee peittävän taustan. Valitse tausta ennen JPG-vientiä. Läpinäkyvyysvalinta ei poista kuvaan piirrettyä valkoista suorakulmiota. Läpinäkyvien taustojen opas auttaa erottamaan kuvaan kuuluvan taustan esikatselun taustasta.

Tee PNG-, JPG- tai WebP-versiot Pixilossa

1. Avaa valmisteltu SVG SVG–PNG-muuntimessa. Valitse SVG–JPG-muunnin, jos käyttökohde vaatii JPG:n, tai SVG–WebP-muunnin, jos olet valinnut kyseiseen käyttöön WebP:n.
2. Anna vientileveys tai -korkeus ja pidä kuvasuhde lukittuna. Säilytä läpinäkyvyys, kun muoto tukee sitä, tai valitse lopullinen taustaväri.
3. Muunna ja lataa tiedosto. Tarkista ladattu kuva, älä pelkästään lähdekuvan esikatselua. PNG pakataan häviöttömästi, joten sille ei valita laatutasoa. Tarkista JPG:n ja WebP:n kirjaimet ja ohuet viivat laadun muuttamisen jälkeen.
4. Aseta kopio paikalleen, määritä näyttökoko ja tarkista julkaistu sivu, vastaanotettu viesti tai viety asiakirja. Varmista, että näkyvissä on uusi tiedosto eikä välimuistiin jäänyt vanha versio.

Pixilo tekee staattisia kuvakopioita, ei muokattavaa logoa tai optimoitua SVG:tä. SVG-lukija hylkää ulkoisia resursseja ja sisältöä, jota se ei tue. Jos tiedosto ei kelpaa, palaa suunnitteluohjelmaan ja vie itsenäinen kopio, jossa teksti on tarvittaessa muutettu poluiksi. Ajantasaiset tiedosto- ja kokorajat löytyvät työkalusivulta. Säilytä alkuperäinen tulevia vientikertoja varten.

Nimeä tiedostot niin, että niiden tarkoitus selviää

Kerro logon väri erillään taustasta. Esimerkiksi dark-artwork tarkoittaa tummia kuvioita, ei tummalle taustalle tarkoitettua tiedostoa:

• Muokattava alkuperäinen: säilytä suunnittelijan lähdetiedosto omassa muodossaan ja oikealla tiedostopäätteellään erillään julkaistavista kopioista.
• brand-logo-dark-artwork.svg ja brand-logo-white-artwork.svg: tumma logo vaaleille taustoille ja valkoinen tummille.
• brand-logo-dark-artwork-320x80.png: läpinäkyvä PNG esimerkin 160 × 40 pikselin näyttökokoon. Tiedostonimessä ovat tiedoston omat pikselimitat.
• brand-logo-white-background.jpg: valinnainen JPG peittävällä valkoisella taustalla käyttökohteeseen, joka vaatii sitä.

Liitä mukaan lyhyt ohje näyttökoosta ja taustasta. Tee vain käyttöön tulevat versiot. Faviconia varten tarvitaan usein erikseen yksinkertaistettu merkki, sillä koko sanalogo voi olla selainvälilehdellä lukukelvoton. Lue favicon-opas.

Tarkista logo lopullisessa käyttökohteessa

Tarkista ensin pienin todellinen käyttökoko. Ovatko kirjaimet luettavia, ohuet viivat näkyvissä ja suoja-alue ennallaan? Testaa sitten vaalea ja tumma tausta. Lähetä sähköpostista oikea testiviesti ja tarkista vastaanotettu kopio. Avaa asiakirjan viety PDF ja tarkista myös tuloste, jos lopputulos on tarkoitettu paperille.

Anna verkkosivun logolle sopiva tekstivastine. Kun logo on etusivulinkin ainoa sisältö, kerro linkin kohde, esimerkiksi ”Brändin etusivu”. Jos saman linkin näkyvä teksti kertoo jo nimen ja tarkoituksen, vältä toistoa. W3C:n toiminnallisten kuvien ohje näyttää molemmat tavat.

Usein kysytyt kysymykset

Miksi palveluun ladattu logo on sumea, vaikka omalle laitteelle ladattu tiedosto on tarkka?

Vertaa palvelussa olevan tiedoston pikselimittoja näyttökokoon. Palvelu on voinut tehdä pienemmän kopion tai sivun asettelu voi suurentaa sitä. Tarkista, mitä tiedostoa julkaistu sivu käyttää ja pienentävätkö turhat läpinäkyvät reunat näkyvää logoa. Entistä suurempi vientitiedosto ei korjaa sivua, joka valitsee edelleen väärän version.

Miksi PNG:n ympärillä on valkoinen laatikko?

Katso ladattua tiedostoa sekä läpinäkyvyysruudukolla että värillisellä taustalla. Jos valkoinen laatikko on osa pikseleitä, tarkista lähteen taustaobjektit ja se, onko läpinäkyvyys yhdistetty taustaan viennissä. Jos tiedosto on läpinäkyvä mutta laatikko ilmestyy vasta käyttökohteessa, tarkista sen kuvan tausta-asetukset tai muunnos. Poista piirretty tausta vain, jos logon suunnittelu sallii sen.

Voinko käyttää samaa tiedostoa kaikissa sähköpostin allekirjoituksissa?

Aloita PNG:stä ja testaa allekirjoituseditori, vastaanotetut viestit sekä vaalea ja tumma tila. Verkossa olevan kuvan pitää pysyä saatavilla julkaistussa osoitteessaan, ja viestiin upotetun kuvan on säilyttävä sähköpostijärjestelmän käsittelyssä. Säilytä yhteystiedot oikeana tekstinä, jotta ne ovat käytettävissä myös kuvien latauksen ollessa estettynä. Pelkkä lähettäjän editorin esikatselu ei riitä.

Tekeekö PNG:n muuntaminen SVG:ksi logosta skaalautuvan?

PNG:n upottaminen SVG:hen säilyttää alkuperäiset pikselit. Jäljittäminen tai uudelleen piirtäminen voi luoda vektoripolkuja, mutta käyrät, välit tai kirjaimet voivat muuttua. Pyydä ensin vektorialkuperäinen ja tarkistuta mahdollinen uudelleen rakennettu versio hyväksyttyä logoa vasten.

Mitä teen, jos logo ylittää palvelun kokorajan?

Tarkista ensin, koskeeko raja kilotavuja vai pikselimittoja. Vie tarvittavat mitat, poista tahaton tyhjä tila ja vältä tarpeetonta suurentamista. Kokeile PNG:lle häviötöntä pakkausta ennen reunojen laadusta tinkimistä. Jos tarvitaan häviöllinen muoto, vertaa oikeaa ladattua tiedostoa laskiessasi laatua. Tiedostokoon pienentämisen opas selittää valintojen vaikutukset. Yhtä kaikille logoille ja palveluille sopivaa kilotavutavoitetta ei ole.

Miksi kirjaimet tai värit muuttuvat muunnoksessa?

Vertaa muokattavaa suunnitelmaa, vietyä SVG:tä, ladattua kuvaa ja paikalleen asetettua tulosta. Etsi ensimmäinen vaihe, jossa ero syntyy. Puuttuvat tai vaihtuneet fontit viittaavat tekstin vientiin, kun taas puuttuvat kuvat tai tehosteet voivat kertoa SVG-sisällöstä, jota ei tueta. Värimuutos edellyttää lähdeprofiilin ja näyttöversion tarkistamista. Korjaa kyseinen vaihe ja vie kuva uudelleen sen sijaan, että muuntaisit valmiiksi virheellistä kopiota monta kertaa.