Lyhyesti
- Animoitu logo on brändin logo, johon on lisätty lyhyt liike, kuten paljastus, itsensä piirtävät viivat, kokoontuvat osat tai värin vaihtuminen.
- Useimmat introihin ja outroihin tehdyt logoanimaatiot toimivat parhaiten noin yhden ja kolmen sekunnin välisenä ja päättyvät täsmälleen staattiseen logoon.
- Yksi idea per animaatio riittää, ja liikkeen pitäisi sopia brändin persoonaan samalla tavalla kuin sen värit ja typografia.
- Verkkosivut voivat animoida logoja SVG:llä ja CSS:llä tai Lottie-tiedostoilla, kun taas video tarvitsee MP4:n, sähköposti GIF:n ja editointi läpinäkyvyyden sallivan muodon.
- Jokainen animoitu logo tarvitsee staattisen version pieniin kokoihin, painoon ja ihmisille, jotka suosivat vähennettyä liikettä.
Tällä sivulla
Animoitu logo on logosi yhdellä lyhyellä, tarkoituksellisella liikkeellä: se paljastuu, piirtää omat viivansa, kokoontuu osistaan, vaihtaa väriä tai hengittää lempeästi silmukassa. Parhaat ovat lyhyitä, introissa yleensä yhdestä kolmeen sekuntia, ja ne päättyvät aina täsmälleen logoon, jonka ihmiset jo tuntevat. Ajattele sitä logon saapumisena, ei esiintymisenä.
Viisi tapaa animoida logo
Lähes jokainen hyvä logoanimaatio on yksi viidestä tekniikasta, joskus kaksi yhdistettynä. Valitse se, joka sopii logosi muotoon ja brändin luonteeseen.
| Tekniikka | Mitä tapahtuu | Sopii |
|---|---|---|
| Paljastus | Logo häivytetään, pyyhkäistään tai paljastetaan maskilla näkyviin | Mille tahansa logolle, turvallisin valinta |
| Piirtyminen | Viivat piirtävät itsensä ja täyttyvät sitten | Viivapohjaiset tunnukset, monogrammit, allekirjoitukset |
| Kokoaminen | Osat liukuvat tai skaalautuvat paikalleen | Erillisistä muodoista tehdyt logot |
| Vaihtuminen | Väri tai liukuväri kulkee logon läpi | Liukuvärilogot ja rohkeat sanamerkit |
| Idle-silmukka | Hienovarainen, loputon hengitys tai kimallus | Latausnäkymät, esitysruudut, livelähetykset |
Säännöt, jotka pitävät logoanimaation hyvänmakuisena
Logoanimaatio toistuu monta kertaa: jokaisen videon alussa, jokaisella sivulatauksella, jokaisessa tapahtumassa. Kaikki fiksu kuluu nopeasti loppuun. Hillintä on se, minkä ansiosta siitä voi nauttia sadannellakin kerralla. Liikesuunnittelun periaatteet käsittelee perustelut tarkemmin.
Vältä
- Animaatioita, jotka ovat pidempiä kuin viesti, jota ne johdattavat
- Logon pyörittämistä, pomppimista tai räjäyttämistä
- Päättymistä asentoon, joka ei ole oikea logo
- Liikettä, joka on ristiriidassa brändin luonteen kanssa
- Vain yhtä versiota ilman staattista varaversiota
Tee näin
- Yhdestä kolmeen sekuntia introille ja outroille
- Yksi idea, tehtynä puhtaasti
- Päätä täsmälleen staattiseen logoon ja pidä sitä
- Rauhalliset brändit liikkuvat hitaasti, eloisat voivat liikkua reippaasti
- Pidä staattinen logo pieniin kokoihin ja painoon
Sovita liike brändiin samalla tavalla kuin sovitat värit ja typografian. Lakitoimiston logo voi häivyttyä esiin sekunnin aikana pehmeällä kiihdytyksellä. Musiikkifestivaalin logo voi napsahtaa paikalleen pienellä yliampumisella. Brändin persoonallisuus auttaa nimeämään luonteen ensin, ja easing muuttaa sen käyriksi.
Näin teet piirtyvän logoanimaation SVG:llä
Piirtyminen käyttää SVG:ssä nokkelaa kikkaa. Viiva voidaan piirtää katkoina, ja jos yksi katko on yhtä pitkä kuin koko polku, sen voi liu'uttaa näkyviin animoimalla sen siirtymää. Kun polulle asetetaan pathLength="1", laskutoimitus on yksinkertainen: polku lasketaan yhden yksikön pituiseksi, oli sen todellinen pituus mikä tahansa.
<svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="Northlight">
<path class="draw" d="M20 100 L20 20 L100 100 L100 20" pathLength="1"
fill="none" stroke="#1e1b4b" stroke-width="10"
stroke-linecap="round" stroke-linejoin="round" />
</svg>.draw {
stroke-dasharray: 1;
stroke-dashoffset: 1; /* hidden: the dash starts one full length away */
animation: draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; } /* drawn */
}
@media (prefers-reduced-motion: reduce) {
.draw { animation: none; stroke-dashoffset: 0; }
}Liukuvärilogon animointi
Liukuvärilogoissa on liike valmiina: anna värin kulkea. Liukuvärin hidas siirtyminen sanamerkin tai kuvakkeen läpi näyttää valolta, joka liikkuu pinnan yli, ja pitää muodon täysin paikallaan, mikä on ystävällistä luettavuudelle. Puhtaan silmukan kikka on liukuväri, joka päättyy väriin, josta se alkaa, jolloin toistossa ei ole saumaa.
linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%).wordmark {
background: linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
to { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.wordmark { animation: none; }
}Liukuväriteksteillä on omat luettavuussääntönsä, katso liukuväriteksti CSS:llä. Ja varmista, että logo on olemassa myös yhdellä tasaisella värillä, kuten liukuvärilogot selittää.
Kuinka pitkä animoidun logon pitäisi olla
- Videoiden introt ja outrot: noin yhdestä kolmeen sekuntia, ja sitten valmis logo pysyy hetken näkyvissä.
- Verkkosivun ylätunniste: toistetaan kerran, nopeasti, ensimmäisellä käynnillä, ei koskaan jokaisella sivunvaihdolla.
- Latausnäkymät: hidas idle-silmukka, joka ei näytä kärsimättömältä.
- Esitysruudut ja lähetykset: hyvin hidas silmukka, koska se voi olla ruudulla tuntikausia.
Intron viimeisen ruudun pitäisi olla logo täsmälleen sellaisena kuin se näkyy kaikkialla muualla, brändin tavallisella taustalla.
Missä muodossa animoitu logo viedään
| Missä toistetaan | Muoto | Huomiot |
|---|---|---|
| Verkkosivu tai sovellus | SVG ja CSS tai Lottie-tiedosto | Terävä missä koossa tahansa, pienet tiedostot, voi huomioida vähennetyn liikkeen |
| Somevideo | MP4 | Sijoitetaan taustalle, läpinäkyvyyttä ei tarvita |
| Videoeditointi | Läpinäkyvyyden salliva muoto, kuten ProRes 4444 | Jotta editoijat voivat laittaa sen minkä tahansa kuvamateriaalin päälle |
| Sähköpostin allekirjoitus tai uutiskirje | GIF | Pidä lyhyenä ja pienenä, ensimmäisen ruudun pitäisi olla koko logo |
| Esitykset | MP4 tai työkalun oma animaatio | Testaa koneella, jolla esität |
Silmukoista ja tiedostotyypeistä lisää artikkelissa GIF vs MP4. Ja minkä tahansa viennin kanssa yhdistä siihen taustaan, joka sopii sille: animoitu logo still-kuvan, rauhallisen alueen päällä toimii paremmin kuin vilkkaan kuvamateriaalin päällä. Logon asettaminen liukuvärille käsittelee kontrastin ja sijoittelun.
Usein kysyttyä
Kuinka pitkä animoidun logon pitäisi olla?
Videoiden introille ja outroille noin yhdestä kolmeen sekuntia, päättyen staattiseen logoon ja pitäen sitä hetken. Näyttöjen idle-silmukat voivat olla pidempiä ja hitaampia.
Mikä on helpoin tapa animoida logo?
Yksinkertainen paljastus: häivytys, pyyhkäisy tai maski, joka paljastaa logon noin sekunnissa. Se toimii kaikille logoille, ja sen tekee vaikea pilata.
Missä muodossa animoidun logon pitäisi olla?
SVG ja CSS tai Lottie verkkosivuille ja sovelluksiin, MP4 somevideoon, läpinäkyvyyden salliva muoto, kuten ProRes 4444, editointiin ja GIF sähköpostiin.
Miten saan logon piirtämään itsensä?
SVG:ssä aseta polulle pathLength arvoon 1, anna sille stroke-dasharray-arvo 1 ja animoi stroke-dashoffset arvosta 1 arvoon 0.
Tarvitsenko yhä staattisen logon?
Kyllä. Pienet koot, paino, favikonit ja ihmiset, jotka suosivat vähennettyä liikettä, tarvitsevat kaikki staattisen version, ja jokaisen animaation pitäisi päättyä siihen.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme
