Animált GIF vagy filmklip készítése

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.

vagy

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).