Sisältö
- 01. Luo uusi järjestys
- 02. Lajittele työtilat
- 03. Tee joitain muotoja
- 04. Lisää väri
- 05. Kopioi kerrokset
- 06. Käytä kiinnityspisteitä
- 07. Porrasta ajoitus
- 08. Lisää lisää värejä
- 09. Tee ensimmäinen esikatselu
- 10. Luo avainkehys
- 11. Tee toinen avainkehys
- 12. Tee lisää avainkehyksiä
- 13. Esikatselu uudelleen
- 14. Säädä kevennys
- 15. Lisää logo
- 16. Esikatselu ja vienti
- 17. Siirry Photoshopiin
- 18. Tarkista, että kaikki on hyvää
- 19. Vie GIF
- 20. Olet kaikki valmis!
Hyvä visuaalinen suunnittelu on tulossa yhä helpommaksi. On yhä vaikeampaa kertoa, kenellä on todelliset muotoilupalat ja kenellä on vain pääsy todella mukaviin verkkosivustomalleihin tai käyttöliittymäsarjoihin. Tämä tarkoittaa, että vaikuttavan käyttökokemuksen luomiseksi sinun on ylitettävä ihmisten odotukset.
Jotkut mieleenpainuvimmista kosketuksista ovat pienet. Ajattele MailChimpin kuuluisaa apinan kättä viisi, joka näkyy, kun napsautat Lähetä-painiketta kampanjassa. Kuten voit odottaa, yleisen menestysviestin sijaan he kaivoivat hieman syvemmälle ja työskentelivät tuotemerkkinsä mukaan kokemukseen. Emme animoi apinan tassuja täällä, mutta teemme värikkään latausanimaation, joka on helppo muokata omien tuotemerkkien väreillä ja logolla. Näet InVisionin esimerkin alla:
Käytämme After Effects -ohjelmaa animaatiosekvenssin lataamiseen ja tuomme sitten viedyn videotiedoston Photoshopiin ja muunnamme sen kevyeksi GIF-tiedostoksi, joka voidaan käynnistää missä tahansa, missä tarvitset animoidun latauselementin.
Ennen sukellusta sinun on valittava neljä tuotemerkkiä ja sinulla on kätevä pieni, yksivärinen, läpinäkyvä versio logostasi. Jos olet halunnut oppia After Effects, tämä on täydellinen tilaisuus hypätä sisään, luoda jotain ainutlaatuista omaa ja oppia hienoja perustekniikoita prosessin aikana.
Katso tätä eksklusiivista kuvaruutua tai luo latausanimaatio noudattamalla seuraavia ohjeita.
01. Luo uusi järjestys
Avaa After Effects ja paina cmd + N luoda uuden sekvenssin. Koska videostamme tulee olemaan neliö, muuta tavallisen kuvasuhteen 16: 9 sijaan leveys ja korkeus 120 kuvapisteeksi sävellysasetuksissa ja napsauta OK. GIF: n suositeltu lopputulos on 60 kuvapistettä, mutta haluamme pystyä myös ottamaan huomioon Retina-näytöt.
02. Lajittele työtilat
Ennen kuin jatkamme, varmista, että After Effects -työtilat ovat samat. Siirry ylävalikossa kohtaan Ikkuna> Työtila> Vakio. Tällä tavalla, kun sanon "Napsauta sitä asiaa ruudun oikeassa alakulmassa", se on oikeastaan ruudun oikeassa alakulmassa.
03. Tee joitain muotoja
Luodaan nyt kourallinen neliömäisiä muotoja, joista tulee animoituja värejä. Napsauta järjestystäsi (musta neliö näytön keskellä) ja paina Qsitten Vaihto + napsauta ja vedä neliö näytöllä, jotta reunat ulottuvat juuri sävellyksen reunojen ulkopuolelle.
On hyvä käytäntö keskittää muoto täydellisesti näytölle. Napsauta oikeassa alakulmassa olevassa Tasaus-paneelissa Vaakasuuntainen keskitasaus ja Pystysuuntainen keskitasaus.
04. Lisää väri
Kun muotosi on edelleen valittuna, napsauta ruudun yläosassa olevaa Täytä väri -vaihtoehtoa ja kirjoita yksi pääbrändeistäsi heksa- tai RGB-arvona. Voit myös käyttää pipettityökalua ottaaksesi värejä missä tahansa muualla näytöllä, mukaan lukien After Effects -ikkunan ulkopuolella olevat värit, mikä on hyödyllistä.
05. Kopioi kerrokset
Ruudun alaosassa näet aikajanan, jossa on yksi kerros nimeltä Shape Layer 1. Valitse se napsauttamalla nimeä tai sinistä palkkia aikajanalla ja paina ctrl / cmd + D neljä kertaa sen kopioimiseksi. Sinun pitäisi päätyä viiteen identtiseen kerrokseen aikajanallasi. Näiden otsikot ovat muotokerros 1, 2, 3, 4 ja 5.
06. Käytä kiinnityspisteitä
Jokainen muoto tulee animoimaan näytön eri puolilta. Tämän helpottamiseksi muutamme ankkuripisteidemme sijaintia etukäteen. Valitse Shape Layer 2 ja paina Y Anchor Point -työkalun esiin tuominen. Napsauta sitten ankkuripistettäsi (se näyttää olevan hiusristikko jonnekin muodosi sisällä) ja vedä se neliön alareunaan. Toista kerroksilla 3-5 asettamalla kukin ankkuripiste eri reunalle kuin viimeinen. Shape Layer 1: lle ei tarvitse tehdä mitään.
07. Porrasta ajoitus
Nyt on aika porrastaa muotojemme ajoitus aikajanalla. Lehdistö V vaihtaaksesi valintatyökaluun ja aikajanallasi shift + napsauta siniset palkit kerroksille 3-5 ja vedä ne oikealle, välimatka toisistaan sekunnilla. Niiden tulisi alkaa aikajanallasi 1, 2 ja 3 sekunnin kohdalla. Jos aikajanasi on liian loitonnettu, pidä alhaalla alt ja vieritä alas - tämä toiminto zoomaa sinut aikajanallesi.
08. Lisää lisää värejä
Valitse muodot 2–4 erikseen ja muuta niiden täyttöväri samalla tavalla kuin teit takaisin vaiheessa 4. Voit vetää toistopään (pystysuora punainen etenemisviiva) muokkaamasi muodon päälle nähdäksesi muutosten tapahtuvan. Jätämme muotokerrokset 1 ja 5 samanvärisiksi, koska luomme silmukan, joka alkaa ja päättyy samalla värillä. Jos sillä ei ole järkeä juuri nyt, älä huoli - se tulee.
09. Tee ensimmäinen esikatselu
On aika esikatsella tähänastista käsityötäsi. paina välilyönti ja katsele värien muutosta näytöllä. Osuma välilyönti uudelleen pysäyttääksesi sen (tai poistu jos tämä ei toimi).
10. Luo avainkehys
Napsauta ja vedä toistopääsi takaisin aikajanan alkuun. Valitse Shape Layer 2 ja paina sitten S näppäimistöllä tuoda esiin kyseisen muodon skaalausvaihtoehdot. Napsauta nyt mittakaavan vieressä olevaa sekuntikellokuvaketta, sammuta linkkikuvake asteikkoprosenttien vieressä ja vedä toinen arvo alas 0 prosenttiin. Pieni timantti näkyy aikajanallasi soittopään nykyisessä paikassa. Onnittelut, olet juuri luonut avainkehyksen!
11. Tee toinen avainkehys
Vedä toistopäätä 1 sekuntiin ja aseta muodon arvoksi 100 prosenttia. Toisen avainkehyksen pitäisi näkyä aikajanallasi toistopäässä. Vedä toistopää takaisin aikajanan alkuun ja esikatsele animaatiota painamalla välilyöntiä. Sinun pitäisi nähdä, että muoto kasvaa ja peittää muodon kerroksen 1.
12. Tee lisää avainkehyksiä
Toista nämä vaiheet uudelleen Shape Layers 3-5: ssä, joka kerta, kun aloitat animaation kerroksen sinisen palkin alusta, jonka porrastimme sekunnin ajan aiemmin. Kun olet valmis, kunkin tason ensimmäisen avainkehyksen tulee olla linjassa sen alla olevan tason viimeisen avainkehyksen kanssa.
13. Esikatselu uudelleen
Kun olet lisännyt avainkehykset, esikatsele työtäsi. Sinun pitäisi nähdä eri muodot liukumassa päällekkäin eri kulmista. Jos näin on, siirrä toistopää 4 sekuntiin ja osuma N. Tämä merkitsee animaation loppua ja silmukkaa esikatselua, kun osut välilyöntiä uudelleen. Jos muotokerros 1 ja muotokerros 5 ovat samanvärisiä, sen tulisi muodostaa saumaton silmukka.
14. Säädä kevennys
On melkein aika lisätä logo, mutta ei aivan. Animaatio näyttää tällä hetkellä todennäköisesti olevan hieman lineaarinen (lue: tylsää) - elävöitämme sitä muuttamalla kevennystä. Pidä kiinni siirtää -näppäintä, valitse jokaisen tason viimeinen avainkehys ja napsauta sitä hiiren kakkospainikkeella. Valitse Avainkehyksen nopeus, aseta sitten saapuva nopeus 100 prosenttiin ja jätä ulottuvuudet X ja Y yksin. Napsauta OK ja esikatsele uudelleen. Huomaat, että animaatiot hidastuvat lopussa ja luovat dynaamisemman tunnelman.
15. Lisää logo
Nyt olemme valmiita lisäämään logosi animaation päälle. Kaksoisnapsauta ruudun vasemmalla puolella olevaa projektipaneelia Comp 1: n alapuolella olevaa tyhjää aluetta ja tuo kuvatiedosto (parasta, jos se on läpinäkyvä kuvamuoto, kuten PNG tai EPS.) Vedä se sitten aikajanalla, mikä tekee siitä ylimmän kerroksen. Voit lyödä S skaalaa logosi uudelleen ylös tai alas ja aseta se uudelleen kuolleen keskipisteen kohdalle Tasaa-paneelilla.
16. Esikatselu ja vienti
Kun olet tyytyväinen logosi kokoon ja sijaintiin, napsauta Toista uudelleen ja varmista, että kaikki näyttää silti hyvältä. Jos näin tapahtuu, on aika viedä videosi. Mene Tiedosto> Vie> Lisää renderointijonoon, aseta sitten renderöintiasetukseksi Paras, tulostusmoduuliksi Häviötön ja valitse videotiedoston paikka, johon haluat sijoittaa napsauttamalla tiedostonimeä Lähtöalueella.
17. Siirry Photoshopiin
Nyt on aika käynnistää Photoshop ja muuntaa videomme animoituun GIF-muotoon. Siirry Photoshopissa osoitteeseen Tiedosto> Tuo> Videokehykset tasoihin ja valitse videotiedosto. Seuraavassa kehotteessa sinulla on mahdollisuus säätää useita tuontiasetuksia videollesi. Koska tämä animaatio on kuitenkin niin lyhyt, napsautamme vain OK.
18. Tarkista, että kaikki on hyvää
Varmista, että mikään ei näytä funkyilta GIF: n kanssa Photoshopissa, siirry osoitteeseen Ikkuna> Aikajana tuo aikajana esiin ja napsauta toistopainiketta vasemmassa alakulmassa. Toisto ei välttämättä ole 100%: n nopeudella, joten älä huoli liikaa, jos se vaikuttaa hitaalta. Haluat vain varmistaa, että kaikki on mennyt kunnolla ja että kaikki näyttää tasaiselta ja saumattomalta silmukoitaessa.
19. Vie GIF
Tallenna GIF painamalla ctrl / cmd + alt + shift + S tuo esiin Tallenna verkkoon -ikkuna. Valitse yläreunassa tiedostotyypiksi GIF ja valitse sen yläpuolella olevasta esiasetusvalikosta GIF 128 Ei Dither. Ikkunan alaosassa voit säätää kuvakokoa 60 kuvapisteeseen lopullista tulostusta varten. Varmista, että animaation silmukointiasetuksiksi on asetettu Ikuisesti, koska aivan kuten timantit, GIF on ikuisesti (tai ainakin sen pitäisi olla joka tapauksessa).
20. Olet kaikki valmis!
Onnittelut! Sinulla on nyt käsintehty, tuotemerkillä varustettu GIF-tiedosto, jonka voit toteuttaa verkkosivustollasi tai sovelluksessasi, lisätä prototyyppeihisi realistisia lataustiloja tai laittaa Dribble- tai Behance-muotoon kaikkien nähtäväksi.
Tämä artikkeli ilmestyi alun perin netto, maailman johtava verkkosuunnittelijoiden ja -kehittäjien aikakauslehti. Tilaa tässä.
