Logon koot verkkosivuille, someen ja painoon

Yhtä kaikkialla toimivaa logon kokoa ei ole. Säilytä logo vektoripäätiedostona, SVG:nä tai PDF:nä, joka skaalautuu sumentumatta. Vie siitä versio joka käyttöön: korkeuden mukaan mitoitettu SVG sivuston otsakkeeseen, neliöversio profiilikuviin, vaakaversio bannereihin ja 300 dpi:n tiedosto painoon. Käyttöpaikasta toiseen muuttuvat pinta ja se, kuinka suuren osan logo siitä täyttää.

Aloita päätiedostosta, älä koosta

Vektoritiedosto kuvaa muotoja pikselien sijaan, joten sama tiedosto on terävä puhelimessa ja näyteikkunassa. Vie kaikki muut tiedostot tästä päätiedostosta, älä kuvakaappauksesta tai vanhasta PNG:stä. Jos sinulla on vain pieni rasterilogo, piirrä se ensin uudelleen vektorina. Se säästää vaivaa joka myöhemmässä työssä.

Verkkosivun logon koko

Mitoita verkkosivun logo korkeuden mukaan, jotta leveä nimilogo ja tiivis symboli istuvat samalla peruslinjalla otsakkeessa. Käytä SVG:tä terävyyden säilyttämiseen tiheillä näytöillä ja anna sille järkevä enimmäisleveys pienille puhelimille.

<a class="logo" href="/">
  <img src="/logo.svg" alt="Fern Studio" width="120" height="32">
</a>

<style>
  .logo img {
    height: 32px;   /* set by height */
    width: auto;
    max-width: 40vw; /* never crowds a small phone */
  }
  @media (min-width: 768px) {
    .logo img { height: 40px; }
  }
</style>

Favicon on erillinen, neliömuotoinen ja pelkistetty tiedosto. Selaimet näyttävät sen hyvin pienenä, joten siitä tulee yleensä yksi kirjain tai symboli. Faviconin suunnittelu luettelee tarkat tiedostot, ja Googlen favicon-ohjeet pyytävät neliökuvaketta, jonka koko on 48 pikselin monikerta.

Logon koko sosiaaliseen mediaan

Somealustat käyttävät logoa kahdessa hyvin erilaisessa paikassa: pienessä profiilikuvassa ja leveässä kannessa tai bannerissa. Ne tarvitsevat eri logoversiot.

Profiilikuvat

• Lataa neliökuva. Useimmat alustat rajaavat profiilikuvat ympyräksi, jolloin nurkat katoavat.
• Käytä kuvake- tai pystyversiota, älä pitkää vaakayhdistelmää. Leveä nimilogo muuttuu pienessä ympyrässä lukukelvottomaksi.
• Pidä logo suunnilleen neliön keskimmäisten kahden kolmanneksen sisällä, tasainen tila ympärillä.
• Aseta se yksiväriselle tai rauhalliselle taustalle, joka täyttää neliön, jotta ympyrä näyttää harkitulta.
• Tarkista todellisessa koossa omalla puhelimellasi ennen kaikkialle vaihtamista.

Kannet ja bannerit

Kansikuvat ovat leveitä ja rajautuvat puhelimilla sekä tietokoneilla eri tavoin. Profiilikuva peittää usein yhtä nurkkaa. Pidä logo ja sanat lähellä keskustaa ja jatka tausta reunoille.

Julkaisuissa logo on allekirjoitus. Hyvä lähtökohta on pitää se pienenä samassa nurkassa ja samankokoisena joka julkaisussa. Näin se rakentaa tunnistamista kilpailematta viestin kanssa. Sosiaalisen median kuvakoot sisältää kaikki julkaisukoot.

Logon koot sähköpostiin ja painoon

Sähköposti on hankala: moni sähköpostisovellus ei näytä SVG-kuvia, joten käytä läpinäkyvää PNG:tä. Vie se kaksi kertaa tavoitellun näyttöleveyden kokoisena ja määritä näyttöleveys HTML:ssä. Näin se pysyy terävänä tiheillä puhelinnäytöillä. Lue painoa varten kuvan tarkkuus painoon ennen tiedoston lähettämistä painoon ja sähköpostiallekirjoituksen suunnittelu itse allekirjoituksesta.

Jokainen koko yhdestä suunnitelmasta

Logon kokojen työläs osa on kannen, julkaisun, tarinan ja kortin rakentaminen sen ympärille yhä uudelleen. Gradientlyssä voit pyytää Designerilta muita kokoja tai muuttaa Prolla suunnitelman kaikkiin kokoihin yhdellä kertaa. Tausta piirtyy uudelleen joka muotoon. Mukautetut koot ovat 200:sta 8 000 pikseliin, jos toimittaja pyytää poikkeavaa kokoa. Logoversiot kertoo, minkä version laitat mihinkin.