Követve az előző hetek sorát, amelyben egyrészt elmondtam, hogy a böngészők már nem támogatják a Flash fájlokat, másrészt megtanítottam, hogyan készítsen HTML5 animációkat alternatívaként. Ma szeretnék elmagyarázni önnek egy másik lehetőséget, amelyhez hozzáférhet, ha akar szalaghirdetések készítése vagy webhelye bármilyen cselekvésre ösztönzése mozgásban.
Ez a Animált GIF-ek. Már utaltam rájuk abban a cikkben, amelyben arról beszéltem, hogyan lehet optimalizálni a képeket a webhelyén, de ez a bejegyzés sokkal kimerítőbb lesz, nem csak elmondom mik ezek és milyen előnyeik vannak, de szintén milyen eszközökkel és hogyan hozhatja létre őket.
Tartalomjegyzék
Mi az animált GIF?
Mint mindig, hagyom önnek azt a meghatározást, amelyet a Wikipédia ad nekünk: „ez egy grafikus formátum, amelyet széles körben használnak a világhálón, képek és animációk számára egyaránt”. Saját szavaimmal elmondom, hogy ez egyfajta fájl, amely lehetővé teszi számodra több képből hozzon létre egyetlen mozgóképet.
Mire használhatom az animált GIF-et?
- Könnyebben felhívni a felhasználók/ügyfelek figyelmét
- A termék működésének elmagyarázása
- Cselekvésre ösztönzés létrehozása
- Promóciós kampányokhoz (például egy kedvezmény kiemelése)
- Oktatóanyagok készítéséhez
- Megmutatni ugyanazon termék különböző színeit
- E-mail marketing kampányokhoz (például értesítés egy közelgő eseményről)
- Kapcsolatba lépni a közösségével a közösségi médiában
- És hosszú stb.
Mondd, mire használtad?
Ne felejtsd el ...
- Nem szabad visszaélni velük, mert telítődhetnek
- Figyelnie kell a súlyára, ha túl nagy, akkor lelassítja webhelyét
- Vigyázni kell a sebességgel (sem túl gyors, sem túl lassú)
- Nem lehetnek túl hosszúak
Hogyan készíthetek animált GIF-et a Photoshop alkalmazásban?
Ezután lépésről lépésre elmagyarázom hogyan hozhat létre filmklipet a Photoshopból (Én a CS4 verziót használom, de az utasítások megegyeznek, ha CS5-et vagy CC-t használ). Az utasításokkal együtt talál egy infografikát, amelyet ajánlom átnézni, mivel ez megkönnyíti az Ön megértését.
Ha nem Photoshop-felhasználó, ne aggódjon, ha a következő szakaszra lép, látni fogja, hogy felsorolok más eszközöket, amelyekből elkészítheti animált GIF-jét is.
1. Először meg kell hozzon létre egy új fájlt, ehhez be kell lépnie a Photoshop programba, a felső menüben kattintson a Fájl, majd az Új gombra.
2. Ezután megjelenik egy képernyő, ahol ki kell töltenie a következő mezőket:
- Név: Az, amely azonosítja a dokumentumot
- Szélesség magasság: Adja meg a fájl méretét (legyen óvatos a mértékegységgel, a legjobb, ha pixeleket használ)
- Felbontás: 72 képpont/hüvelyk
- Szín mód: RGB (ne feledje, hogy a CMYK nyomtatott dokumentumokra vonatkozik)
- Háttér tartalom: Átlátszó (lesz időd a háttér későbbi színezésére a rétegekből)
3. Miután elkészítette a dokumentumot, először meg kell tennie (ha még nem aktiválta) lépjen a felső menübe, kattintson az Ablak elemre, aktiválja az Animáció panelt (be kell látnia egy pipát a bal oldalán).
4. Látni fogja, hogy a munkaasztal alján a Idővonal. A jobb alsó részen egy téglalap alakú szimbólum látható, és ha ráállsz, akkor a következőt látod:Konvertálás keretanimációvá”, Kattintson rá, és látni fogja, hogy a vizualizáció hogyan változik, négyzetekként keretként jelenik meg vízszintes vonalak helyett.
5. Ne feledje! Mentse a fájlt .psd fájlként. Így a fájl mindig szerkeszthető lesz, arra az esetre, ha jövőbeli módosítások történnek.
Nos, miután mentették, megérkezik a kreatív rész. Muszáj lesz hozzon létre különböző rétegeket (Ezt a panelt megnyithatja az Ablak → Rétegek menüből), és mindegyikbe belefoglalhatja azokat az elemeket, amelyeknek az animáció részeként szeretne részt venni (például az én esetemben világos türkiz háttér és GIF ikon).
6. Most vissza kell térnie animációs panel mert teremt ebben az különböző keretek ez az animált kép része lesz. Kattintson a négyzet szimbólumra (lásd a mellékelt infografikán), és annyi keretet kell létrehoznia, amennyit csak akar.
7. Ahhoz, hogy elmondja, mi jelenik meg és mi nem jelenik meg mindegyikben, el kell játszania a szem ikonra hogy minden réteg mellett van a bal oldalon. Így eldöntheti, hogy milyen képet, szöveget, hátteret stb. mindegyikben megjelennek. Például az én esetemben létrehoztam egy első keretet a háttér + ikonnal és egy utolsó keretet csak a háttérrel, a cél az, hogy a logó eltűnjön.
8. Ennek elérése érdekében kétféleképpen teheti meg. Ha az egyes kockák jobb alsó sarkára kattint, a menü másodpercekkel szeretné, ha mindegyik megjelenne. Ha az alapértelmezés szerint megjelenő adatok egyike sem győz meg, akkor átadhatja "más" -nak, és kiválaszthatja a kívántat. Ezzel a funkcióval adhat az egyes képkockákhoz különböző időpontok vonatkoznak így az animált GIF átmenete többé-kevésbé gyors.
9. Az előző opció miatt a keret és a keret közötti vágások nagyon durvák lesznek, ha sikeresebb átállást szeretne elérni, használhatja az eszközt "Interleave animációs kereteket”(Lásd infografika). Ehhez kattintson az első képkockára, kattintson az eszközre, amelyet kommentálok, és a megjelenő képernyőn válaszd ki, melyik keretben, mely rétegeken és milyen effektusokat szeretnél. Ez próba és hiba kérdése, babrálni kell, és meg kell nézni, melyik eredmény győz meg a legjobban azáltal, hogy rákattint vagy eltávolítja az általa kínált különböző lehetőségeket. De biztosíthatlak arról, hogy nagyon jó dolgai lehetnek 😉 Természetesen vigyázzon a súlyával, mivel ez az opció új kereteket generál, amelyek növelik.
10. A következő pont segít meghatározni hányszor fog ismétlődni a mozgóképed. A következő lehetőségek állnak rendelkezésre:
- Egyszer
- Háromszor
- Végtelen: általában a szokásos
- Egyéb: megadhatja, hogy hányszor
11. Már készen van az animált GIF-fájlja, de azt képzelem, hogy exportálása előtt szükség lesz rá nézze meg, hogy alakult, nem? Nos, nagyon egyszerű, a keretek alatti menüben látni fogja, hogy van egy játék ikonra, egyszerűen kattintson rá, és ugyanazon a Photoshop munkaasztalon láthatja, hogy milyen volt az animáció.
12. Csak GIF-ként kell mentenie, bár először ne felejtse el újra menteni .psd fájlként, hogy a szerkeszthetőség friss legyen a legújabb változtatásokkal. Ha ez megtörtént, lépjen a felső menübe, kattintson a gombra Fájl → Mentés webre és eszközökre, és egy új képernyő nyílik meg, amelyben:
- Választ GIF
- Színek 256, csökkentheti, ha a súly nagyon magas, amennyiben ez nem befolyásolja túlzottan a fájl minőségét
- A fenekén jelölje be hogy ismétlés az, amelyet korábban választottál (végtelen, egyszer ...)
- A bal oldalon cfene a súlyát fájljából
Itt az eredmény:
Milyen egyéb eszközökkel hozhatok létre animált GIF-et?
Szinte az összes lehetőség, amelyet bemutatok önnek, ingyenes, ajánlom, hogy mindig próbálja ki őket, amíg meg nem találja az Ön igényeinek leginkább megfelelőt:
Telepítés a számítógépre:
GIMP: Itt van egy video bemutató, amelyben elmagyarázzák, hogyan lehet animált GIF-et létrehozni a Gimp-ben.
GifCam: Nem igényel telepítést, mivel futtatható. Lehetővé teszi képernyőképek készítését, és nincs időkorlátja.
MakeGIF: Ez egy Chrome kiterjesztés, amely lehetővé teszi bármilyen videó rögzítését HTML5 formátumban.
Giffin eszköz: Csak Windows rendszerre érvényes. Előnyként különféle effektusokat is felvehet.
Töltse le a mobiljára:
- Azért Android:
Gif Creator: Lehetővé teszi GIF készítését a mobilodon található képek felhasználásával.
Gifinator: Használata nagyon egyszerű, lehetővé teszi a GIF-ek gyors létrehozását.
-Mert IOS:
Giffer: Fizetett, de könnyebben használható és több funkcióval rendelkezik, mint a többi APP.
GifMill: Ingyenes, és lehetővé teszi különböző szűrők és szövegek felvételét.
Az az igazság, hogy tartalmazhat egy hosszú stbecera-t, így ha van olyan, amelyet rendszeresen használ, és úgy gondolja, hogy helyesen működik, ne habozzon megosztani velünk a megjegyzéseket 😉
Hogyan konvertálhatom az animált GIF-et HTML5 videofájlokká?
Tudom, hogy sokat ragaszkodom a fájlméretek kérdéséhez, de elengedhetetlen a webhely sebességének optimalizálása. Bár a mozgóképeknek - amint azt korábban láttuk - megvannak a maguk előnyei, hátránya az súlyuk általában túlzott. Megoldás annak elkerülésére konvertálja az animált GIF-et GFY-fájlba, mint? Javaslom a Gfycat alkalmazást, amely konvertálja a fájlt, majd megoszthatja vagy beágyazhatja, ahogy a GFY példámban is:
Ez mind barát. Tudom, hogy intenzív cikk volt, de az volt a szándékom, hogy egyetlen bejegyzésben összefogjam mindazt, ami egy animált GIF elkészítéséhez szükséges, és azt hiszem, hogy elértem. Már tudja, hogy ha bármilyen kérdése van, vagy javaslata van, észrevételeit szívesen fogadjuk 😉
Kép forrása: 1
Grafikus és webdesigner nagy tapasztalattal rendelkezik az online kommunikáció területén. Célom, hogy segítsem a szakembereket és a kisvállalkozásokat digitális identitásuk megalkotásában.
Az időm offline Hegyi úton töltem, egy pillanatot megörökítek a fényképezőgépemmel, meglátogatom a világ egy távoli helyét, vagy csak jól érzem magam a barátaimmal