Az évek során rengeteg kérdést kaptunk arról, hogyan készítünk GIF-eket. Szeretjük a GIF-eket, mert könnyen megoszthatók, minden böngészőben működnek, és hurkot is készíthetsz velük! Közkívánatra itt van egy áttekintés a két kedvenc GIF-készítő eszközünkről és a munkafolyamatainkról.

Képernyőfelvétel

Van néhány nagyszerű képernyőfelvevő eszköz. Ha Macet használsz, használhatod a Quicktime-ot, amely teljesen ingyenes. Ebben a cikkben a ScreenFlow-t fogjuk használni, amely a Telestream fizetős alkalmazása.

A ScreenFlow nagyszerű lehetőség a rögzítéshez, mert tartalmaz egy hatékony szerkesztőt, amely részletes ellenőrzést biztosít a GIF felett. Amikor megnyitod a ScreenFlow-t vagy megnyomod a felvétel konfigurálása gombot, ez a képernyő jelenik meg.

ScreenFlow felvétel konfigurálása.

Először győződj meg róla, hogy a prototípusod a képernyőn van. Ezután válassza ki a rögzítendő kijelzőt, és nyomja meg a piros gombot a teljes képernyő rögzítésének megkezdéséhez. Ebben a bemutatóban egy Framerrel készített interakciót fogok rögzíteni, ezért az előnézeti ablakom teljes képernyőre van állítva. A felvételt később a tökéletes méretre lehet vágni.

Tökéletes loop létrehozása

Az egyik dolog, amire mindig törekszünk, az a tökéletesen loopoló GIF, és ennek kivitelezéséhez jó módszer, ha biztosítjuk, hogy a GIF utolsó képkockája pontosan megegyezzen az első képkockával. Ez megakadályozza az ugrásszerűséget, ami aztán az ismétléses lejátszáskor megfelelően folyik a GIF.

Ha az animációd tartalmaz egy egérkurzort, és biztos kezed van, akkor az egérkurzor kézzel történő pozicionálásával könnyen létrehozhatsz egy tökéletes hurkot. Használj vizuális jeleket, hogy emlékeztesd magad, honnan indultál és hol kell befejezned.

A példámban egy animált érintőkurzort használtam a legjobb eredmény érdekében közvetlenül a tényleges prototípuson belül, amelyet rögzíteni fogok. Töltse le ezt a példát, hogy megtudja, hogyan adhat animált érintőkurzort saját prototípusaihoz a Framer segítségével.

Az érintőkurzor aktív és inaktív állapota.

Effektek hozzáadása a fűszerezéshez

Most, hogy elkészítette a felvételt a ScreenFlow-ban, érdemes beállítani, hogy arra összpontosítson, amit a GIF-ben szerepeltetni szeretne. Ehhez menjen a Fájl > Dokumentumbeállítások menüpontba. Ebben a bemutatóban a Dribbble on Webre fogjuk megosztani, így a 800×600 az optimális méret. Észre fogja venni, hogy a korábban készített felvétel méretei túl nagyok. A felvétel méretezésével való babráláshoz válassza ki a klipet, és kattintson a ScreenFlow jobb felső sarkára.

A méretezés csúszka segítségével méretezze a klipet a dokumentum méretéhez.

Amikor a felvétel a helyén van, a klip húzásával vágja le az elejét és a végét (ne feledje, tökéletes hurkot szeretnénk létrehozni!).

A videója ezen a ponton készen áll az exportálásra úgy, ahogy van, bár javasoljuk, hogy adjon hozzá néhány befejező simítást. A ScreenFlow lehetővé teszi, hogy sima zoomolási hatást adjon hozzá, hogy kiemeljen bizonyos részleteket a videóban. Ehhez pozícionálja a videó súrológépet arra a pontra, ahol zoomolási hatást szeretne hozzáadni. Ezután kattintson a Screenflow jobb felső sarkában található videó művelet gombra, majd kattintson a + Action gombra. Válasszon ki egy szép kezdő- és végállapotot az akcióhoz a korábban használt skálavezérlők segítségével. Győződjön meg róla, hogy megismétli ezeket a lépéseket a kicsinyítés effektushoz.

Videóakciók hozzáadásával olyan animációkat definiálhat, mint a zoomolás.

Protipp: Ha GIF-et osztasz meg olyan oldalakon, mint a Dribbble, tartsd szem előtt, hogy a GIF első képkockája fog megjelenni a poszt miniatűrjeként, ezért mindenképpen a vizuálisan legérdekesebb képkockát használd.

Exportálás a ScreenFlow-ból

Most, hogy klipünk csiszolva és tökéletesítve van, itt az ideje exportálni. A Screenflow kínál egy előbeállítást a klip közvetlen GIF-ként történő exportálására, bár javasoljuk, hogy kerüljük ezt az utat, mert a GIF egy erősen tömörített nagy fájl lesz a végén.

Ehelyett egy veszteségmentes .mov fájlt fogunk exportálni. Navigáljunk a Fájl > Exportálás > Előbeállítás > Veszteségmentes – ProRes alfával.

A mozgási elmosódás engedélyezése gyakran még simábbá teheti a GIF-et, különösen az általunk alkalmazott zoomolási effektus esetén.

Blur vs. Elmosódás nélkül

Optimalizálás a Claquette-tel

A Screenflowhoz hasonlóan a Claquette is lehetőséget nyújt az asztal teljes vagy bármely részének rögzítésére, valamint e felvételek vágására, kivágására és exportálására GIF vagy videó formátumba. A Claquette megvásárolható a Mac App Store-ban $9,99

A Claquette legnagyobb előnye a Screenflow-val szemben, hogy granulárisan szabályozhatja a GIF minőségét, és így jobb fájlméretet biztosít elképesztő tömörítéssel. Ez lehetővé teszi, hogy kiváló minőségű GIF-eket hozzon létre, amelyek optimális fájlmérettel rendelkeznek.

Mint ahogy a Screenflow-ban is tettük, válassza ki a rögzítendő kijelzőt, és nyomja meg a Claquette-ben a felvétel gombot. Játssza le az imént exportált videót a QuickTime-ban, és nyomja le a CMD + 1 billentyűt a videó tényleges méretben történő lejátszásához.

Claquette felvételi konfiguráció.

Amikor a klip lejátszása befejeződött, állítsa le a felvételt, hogy elkezdhesse a vágást és a vágást. Mozgassa a klip bal és jobb oldalán lévő csúszkát a klip elejére és végére. Ami a vágási méretet illeti, használja azt a méretet, amelyet a Screenflow-ban is kiválasztott a kliphez: 800 x 600. Mozgassa a vágási területet középre x:0 y:0 és nyomja meg a vágás gombot.

Klipek vágása és kivágása a Claquette-ben.

A megfelelő egyensúly megtalálása

Itt van három GIF-minőség, amely nagyban befolyásolja a fájlméretet:

• A színek mennyisége
• A mozgás mennyisége
• Duration

A legtöbb esetben, ha a GIF csak az említett tulajdonságok egyikét tartalmazza, akkor a minőséget fel lehet tekerni. Ügyeljen arra, hogy a szélességet és a magasságot 100%-ra állítsa be, és a ciklus örökké tartson. Ha a GIF sok színt tartalmaz, erősen ajánlom, hogy a színeket 256-on tartsd, és csökkentsd más szempontok, például az FPS vagy a kvantálás minőségét.

Claquette exportálási beállításai.

Nincs igazi Szent Grál ezekre a beállításokra, ezért a Dribbble-re való megosztáskor (max. 8mb) mindig megpróbáljuk a lehető legmagasabbra tekerni a beállításokat, majd exportáljuk, és megnézzük, mivel kell dolgoznunk. Addig ismételjük ezt az exportálási folyamatot, amíg meg nem találjuk az igényeinknek megfelelő méret/minőség egyensúlyt.

Protipp: Bár a Dribbble szerint a méretkorlátozás 8 MB, valójában 8,3 MB. Amikor nagy, színes gifekkel dolgozol, gyorsan rá fogsz jönni, miért számít a 0,3mb.

Most, hogy végigolvastad az útmutatót, reméljük, segít neked abban, hogy a Framer-animációidat a lehető legjobb GIF-ekké alakítsd át, amelyekkel bemutathatod munkádat a portfóliódban, a Dribbble-en és máshol. Alig várjuk, hogy lássuk, mit alkotsz, ezért ne felejtsd el #MadeWithFramer megjelöléssel ellátni a posztodat, hogy esélyed legyen bekerülni a heti hírlevelünkbe. Boldog alkotást!

Nézd meg a végeredményt a Dribbble-en