Animált gif file alatt olyan képeket értünk, melyek egyszerűbb, kevés fázisból álló mozgás kifejezésére alkalmasak. Legfőbb felhasználási területük a 3D-s forgó termék képek, a call to action gombok és a mozgó banner-ek.
Készülhetnek fotókból és képszerkesztő programmal előállított file-okból egyaránt, ebben a cikkben utóbbi lehetőséget mutatom be a Gimp képszerkesztő program segítségével.
A program egy előző bejegyzés alapján installálható és az alapműveletek is áttekinthetőek.
Az animált gif file mindössze annyit tesz, hogy több különböző képet integrál egy kép file-ba oly módon, hogy minden egyes képet egy adott, viszonylag rövid ideig mutat be, így kelti a mozgás illúzióját. Nézzük meg, hogy fest ez a gyakorlatban. Két különböző típusú nyilat fogok elkészíteni, ezeknek a technikáknak az alapján csak a képzelet szabhat határt a lehetőségeknek.
Nyissunk meg egy file-t a képszerkesztő programban.
A kép méretéül válasszunk 300 X 300 pixelt. Nézzük meg az egyéb beállítási lehetőségeket is, látni fogjuk, hogy már a file megnyitásakor kiválaszthatjuk a háttér színét is vagy beállíthatunk átlátszó hátteret. Animált gif esetében ne használjuk ezt az utóbbi opciót, háttérszínnek azt a színt válasszuk, amilyen környezetben majd az animált gif file megjelenik.
Ez azért fontos, mert átlátszó háttér esetén a fázisok és így a mozgás látszata nem tud érvényesülni.
Ezt követően a rajzolás egyszerűsítésére a nézet menüben beállíthatjuk a rács megjelenítése és a rácshoz igazítás funkciót is. Ez nagy segítség abban az esetben, ha geometriai mintázatot kívánunk rajzolni az animált gif file alapjául.
A nyíl megrajzolásához, de bármilyen szabadkézi vagy egyenes vonal megrajzolásához használhatjuk a ceruza eszközt.
A kényelmesebb munka érdekében állítsuk be a nézet menüben azt az arányt, ami számunkra kellemes, ekkor file esetében nálam a 200% ideálisnak tűnik. A képernyő kitöltést itt nem javaslom, mert ez a megoldás a képernyő szélső befoglaló méretéhez igazítja a képet, fekvő téglalap tájoláshoz ideális, de a négyzet tetejét és alját levágná.
Most kezdjünk el rajzolni a ceruza eszközzel. Kézi rajzoláson túlmenően egyenes vonalakat is tudunk rajzolni oly módon, hogy a shift gombot lenyomva tartjuk, ez esetben az eszköz az utolsó lerajzolt ponthoz képest ajánl fel egy egyenest, ha a képernyőre klikkelünk az egérrel, a vonal aktívvá is válik. Így visszatérve a kiindulóponthoz hozhatunk létre egy nyíl alakú és egyéb zárt elemeket is.
A görbe kitöltéséhez válasszuk a kitöltés eszközt és egyszerűek klikkeljünk vele a görbe közepébe, az eszköz a szín jelölő négyzet első, ún. előtér színével fogja kitölteni az alakzatot. A színes négyzetre klikkelve ezekhez a műveletekhez bármilyen színt kiválaszthatunk az ott megjelenő színskálára klikkelve, de konkrét hexadecimális színkód megadására is lehetőség van.
Ezzel kész egy réteg, válasszuk a réteg menüben a réteg kétszerezése opciót.
A képernyő jobb oldalán látni fogjuk az új, duplikálással létrehozott réteget. Álljunk rá az egérrel a rétegre, válasszuk a már ismert kitöltés eszközt és fessük át egy más színre ezt az idomot, a színt a színválasztó négyzeten tudjuk módosítani.
Nincs más dolgunk, mint a két rétegből álló kép file-t animált gif-ként elmenteni.
A Gimp képszerkesztő programban ebben a fázisban a file menü „export as” menüpontját kell kiválasztanunk és a gif kiterjesztést kell választanunk (itt még nem szerepel animált gif). Keressük meg a lenti – igen hosszú – file típus választóban és fent, a file név mögött is írjuk át gif-re a file kiterjesztést.
Ezt követően az export gomb megnyomására jelenik meg az animáció beállítását segítő ablak, válasszuk a képen szereplő beállításokat, időeltolásnak nagyjából 300-1000 ezredmásodperc között érdemes kísérletezni, jelen estben 500 ezredmásodperc volt a beállított érték.
Másik jellemző lehetőség, hogy a rétegek kétszerezésével több réteget állítunk elő és az objektum méretét (is) változtatjuk az egyes rétegeken, majd az így kapott rétegeket olvasszuk össze animált gif képpé. Utóbbi esetre már egy összegzést mutatok és a kész mozgóképet.
Íme a két végeredmény
WordPress tipp
Ha az animált gif file-t médiatáron keresztül töltjük fel a weboldalunkra, nagy esély van rá, sablontól függően, hogy nem fog elő körben működni. Ha ezt tapasztaljuk, váltsunk kód nézetre a wordpress feltöltési felületen, azt fogjuk látni, hogy a wordpress vagy átméretezte az eredeti file-t, de legalábbis thumnail-ként töltötte fel.
Megoldás
- Törekedjünk arra, hogy az animált gif file-t lehetőleg olyam méretben állítsuk elő, amilyenben a weboldalon fel kívánjuk használni
- A file nevét a kódban írjuk át az eredeti, feltöltött file nevére, egy hasonló kódrészletünk marad az eredetihez képest
<img class=”alignleft” src=”http://domainnev.hu/wp-content/uploads/2014/08/filenev.gif” alt=”alternatív filenév” width=”150″ height=”150″ />
A WordPress keretrendszert, valamint az elkészült weblapok kezelését is oktatja, igény esetén a rendszeres weboldal frissítést és karbantartás feladatait is elvégzi.
Akár a hírlevél rendszer kialakítását és weblapra integrálását vagy a weboldalra szükséges fényképek elkészítését is vállalja, képzett fotográfusként.
Emellett online-marketing és SEO / keresőoptimalizálás szakértő, teljes körű tanácsokkal látja el ügyfeleit, így az elkészült gyors és mobil barát weboldal valódi eszköze lesz az értékesítésnek.
