Vuosien mittaan olemme saaneet paljon kysymyksiä siitä, miten luomme GIF-kuvia. Rakastamme GIF:iä, koska niitä on helppo jakaa, ne toimivat kaikissa selaimissa ja niistä voi tehdä silmukoita! Yleisön pyynnöstä tässä on yleiskatsaus kahteen suosikkityökaluumme GIF:ien luomiseksi ja työnkulkuumme kummassakin.

Ruudun nauhoittaminen

On olemassa muutamia loistavia näytön nauhoitustyökaluja. Jos käytät Macia, voit käyttää Quicktimea, joka on täysin ilmainen. Tässä artikkelissa käytämme ScreenFlow’ta, joka on Telestreamin maksullinen sovellus.

ScreenFlow on loistava vaihtoehto tallentamiseen, koska se sisältää tehokkaan editorin, joka antaa sinulle yksityiskohtaisen hallinnan GIF:iin. Kun avaat ScreenFlow’n tai painat configure recording, näet tämän näytön.

ScreenFlow-tallennuskonfiguraatio.

Varmista ensin, että prototyyppisi on ruudulla. Valitse sitten tallennettava näyttö ja paina punaista painiketta aloittaaksesi koko näytön tallentamisen. Tässä opetusohjelmassa tallennan Framerilla tehdyn vuorovaikutuksen, joten esikatseluikkunani on asetettu koko näytön kokoiseksi. Tallennusta on mahdollista rajata täydelliseen kokoon myöhemmin.

Täydellisen silmukan luominen

Yksi asia, johon aina pyrimme, on täydellisesti silmukoituva GIF, ja hyvä tapa toteuttaa tämä on varmistaa, että GIF:n viimeinen ruutu on täsmälleen sama kuin ensimmäinen ruutu. Näin estetään hyppely, jolloin GIF sujuu oikein toistettaessa.

Jos animaatiosi sisältää hiiren kursorin ja sinulla on vakaa käsi, voit helposti luoda täydellisen silmukan sijoittamalla hiiren kursorin käsin. Käytä visuaalisia vihjeitä muistuttaaksesi itseäsi siitä, mistä aloitit ja mihin sinun täytyy päätyä.

Esimerkissäni olen käyttänyt animoitua kosketuskursoria parhaan lopputuloksen aikaansaamiseksi suoraan varsinaisessa prototyypissä, jonka tallennan. Lataa tämä esimerkki nähdäksesi, miten voit lisätä animoidun kosketuskursorin omiin prototyyppeihisi Framerin avulla.

Kosketuskursorin aktiivinen ja inaktiivinen tila.

Efektien lisääminen mausteeksi

Nyt kun olet tehnyt tallennuksen ScreenFlow’ssa, haluat ehkä säätää sitä keskittymään siihen, mitä haluat GIF:ssä olevan. Voit tehdä tämän menemällä kohtaan Tiedosto > Asiakirjan asetukset. Tässä opetusohjelmassa jaamme kuvan Dribbble on Webiin, joten 800×600 on optimaalinen koko. Huomaat, että aiemmin tehdyn tallenteen mitat ovat liian suuret. Voit näpelöidä tallenteen mittakaavaa valitsemalla leikkeen ja napsauttamalla ScreenFlow’n oikeaa yläreunaa.

Skaalaa leikkeesi mittakaavan liukusäätimellä niin, että se sopii asiakirjan kokoon.

Kun nauhoituksesi on paikallaan, varmista, että leikkaat alun ja lopun vetämällä klippiä (muistathan, että haluamme luoda täydellisen silmukan!).

Tässä vaiheessa videosi on valmis vietäväksi sellaisenaan, vaikka suosittelemme vielä viimeistelyä. ScreenFlow’n avulla voit lisätä tasaisen zoomaustehosteen korostaaksesi tiettyjä yksityiskohtia videossasi. Siirrä videopyyhkäisy sen kohdan päälle, johon haluat lisätä zoomaustehosteen. Napsauta seuraavaksi Screenflow’n oikeassa yläkulmassa olevaa videotoimintopainiketta ja valitse + Action. Valitse toiminnolle mukava alku- ja lopputila käyttämällä aiemmin käyttämiämme skaalaohjaimia. Muista toistaa nämä vaiheet zoomaustehostetta varten.

Määritä animaatioita, kuten zoomaus, lisäämällä videotoimintoja.

Pro-vinkki: Kun jaat GIF:ää sivustoilla, kuten Dribbblessä, muista, että GIF:n ensimmäinen ruutu näytetään postauksen pikkukuvana, joten muista käyttää visuaalisesti kiinnostavinta ruutua.

Vienti ScreenFlow’sta

Nyt kun klippimme on hiottu ja viimeistelty, on aika viedä. Screenflow tarjoaa esiasetuksen, jolla voit viedä klipin suoraan GIF-muodossa, mutta suosittelemme välttämään tätä reittiä, koska GIF:stä tulee lopulta raskaasti pakattu suuri tiedosto.

Sen sijaan viemme häviöttömän .mov-tiedoston. Siirry kohtaan File > Export > Preset > Lossless – ProRes with Alpha.

Liikesumennuksen ottaminen käyttöön voi usein saada GIF:n tuntumaan vieläkin sulavammalta, erityisesti soveltamamme zoomaustehosteen kanssa.

Blur vs. Ei epätarkkuutta

Optimointi Claquettella

Claquette tarjoaa Screenflow’n tavoin mahdollisuuden nauhoittaa koko työpöytäsi tai minkä tahansa sen osan ja leikata, leikata ja viedä nämä nauhoitukset GIF- tai videoformaattiin. Voit ostaa Claquetten Mac App Storesta hintaan $9.99

Claquetten suurin etu Screenflow’hun verrattuna on se, että se antaa sinulle rakeisen hallinnan GIF-laadulle ja siten paremman tiedostokoon hämmästyttävällä pakkauksella. Näin voit luoda laadukkaita GIF-kuvia, joiden tiedostokoko on optimaalinen.

Aivan kuten teimme Screenflow’ssa, valitse näyttö, jonka nauhoitat, ja paina Claquettessa tallenna. Toista juuri viemääsi videota QuickTime-ohjelmassa ja paina CMD + 1 toistaaksesi videon sen todellisessa koossa.

Tallennuskonfiguraatio Claquette-ohjelmassa.

Kun videoleikkeen toisto on päättynyt, pysäytä nauhoitus aloittaaksesi videon rajaamisen ja leikkaamisen. Siirrä leikkeen vasemmalla ja oikealla puolella olevaa liukusäädintä leikkeen alkuun ja loppuun. Mitä tulee rajauskokoon, käytä sitä kokoa, jonka valitsit klipille myös Screenflow’ssa: 800 x 600. Siirrä rajausalue keskelle x:0 y:0 ja paina crop.

Oikean tasapainon löytäminen

Tässä on kolme GIF:n ominaisuutta, joilla on suuri vaikutus tiedostokokoon:

• Värien määrä
• Liikkeen määrä
• Kesto

Useimmiten, jos GIF:ssäsi on vain yksi näistä ominaisuuksista, voit nostaa laatua. Muista asettaa leveys ja korkeus 100 %:iin ja loopata ikuisesti. Kun GIF:ssäsi on paljon värejä, suosittelen vahvasti pitämään värit 256:ssa ja leikkaamaan muista seikoista, kuten FPS:stä tai kvantisointilaadusta.

Claquetten vientiasetukset.

Ei näille asetuksille ole mitään varsinaista Graalin maljaa, joten Dribbbleen jaettaessa (max 8mb) yritämme aina vääntää ne korkeimmille mahdollisille asetuksille, sitten viemme ja katsomme, millä saamme työskennellä. Toista tätä vientiprosessia, kunnes löydät tarpeisiisi sopivan koon ja laadun tasapainon.

Pro-vinkki: Vaikka Dribbble sanoo, että kokorajoitus on 8mb, se on itse asiassa 8,3mb. Kun työskentelet suurten värikkäiden gifien kanssa, huomaat nopeasti, miksi 0,3mb:llä on merkitystä.

Nyt kun olet lukenut oppaan läpi, toivomme, että se auttaa sinua tekemään Framer-animaatioistasi parhaita mahdollisia GIF-kuvia, joilla voit esitellä työsi portfoliossasi, Dribbblessä ja muualla. Emme malta odottaa, että näemme, mitä olet luonut, joten muista merkitä postauksesi tunnisteella #MadeWithFramer, jotta sinulla on mahdollisuus tulla esitellyksi viikoittaisessa uutiskirjeessämme. Hyvää luomista!

Katso lopputulos Dribbblesta

.