Animáció Photoshopban

2010-02-14

A fent látható egyszerű frame by frame animáció elkészítése lépésről lépésre.

Hozzunk létre egy új dokumentumot az alábbi paraméterekkel:

A hátteret konvertáljuk réteggé dupla kattintással és nevezzük el bg-nek.

A bg rétegen alkalmazzunk Gradient Overlay-t:

Hozzunk létre egy új réteget, a neve legyen 1. Rajzoljunk rá egy 30x30 képpont méretű kört az Ellipse Tool-al a Shift gombot lenyomva tartva, hogy az arányokat tartsuk:

A körön Inner Shadow, Gradient Overlay és Stroke stílusokat állítsunk be az alábbiak szerint:

A kör most már így néz ki:

Hozzunk létre három másolatot a körből, helyezzük el egyenlő távolságra egymástól és nevezzük el szám szerint emelkedő sorrendben:

Nyissuk meg a Window -> Layer Comps panelt. Hozzunk létre egy új állapotot, és nevezzük el alapnak. A láthatóság, pozíció és stílusok is kerüljenek rögzítésre.

A Layer Comps panelben elmentettük a rétegeink jelenlegi beállításait:

Az 1 nevű rétegen módosítsuk a Gradient Overlay-t az alábbiak szerint:

Ekkor az első kör zöld színűre változik. Mentsük most el ezt az állapotot is, adjunk hozzá egy új állapotot a Layer Comps panelen, nevezzük el 1-nek, mert ez lesz az animáció első képkockája. Elég, ha a stílust elmentjük, a pozíció és láthatóság nem változott az alaphoz képest.

Másoljuk le a réteg stílusát, jobb egérgomb, majd a helyi menüből válasszuk a Copy Layer Style opciót.

Töltsük vissza a Layer Comps panelen az alapállapotot, majd a 2 nevű rétegen illesszük be a stílust (jobb gomb -> Paste Layer Style). Mentsük el az állapotot a Layer Comps panelen 2 néven. A műveletet ismételjük meg a maradék két körön is. A végeredmény az animáció négy állapota + az alapállapot kell legyen elmentve a Layer Comps panelen.

Nyissuk meg a Window -> Animation panelt. Ha Timeline van kiválasztva, akkor váltsunk át Frame animation-re. A panel jobb felső sarkában lévő menüből válasszuk a Convert to Frame Animation opciót.

Az ismétlések számát állítsuk Forever-re. A megjelenítés idejét 0,5 sec-re. Hozzunk létre 4 képkockát, és mindegyiken állítsuk be a megfelelő állapotot a Layer Comps panelen:

A play gombbal tesztelhetjük az animációt. Ha elkészültünk, exportáljuk GIF formátumban. Válasszuk a File -> Save for Web & Devices... opciót.

Használjuk ki a 256 színes maximum korlátot, a fájl mérete így is csak 10Kbyte lesz. Az átlátszóságot kapcsoljuk ki.

A végeredmény:

A forrás PSD innen tölthető le.