Animáció Photoshopban

Szerző:   |   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.

1 hozzászólás

  1. 2012. december 25. kedd - 14:26

    Nagyon érdekes volt, köszi

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A Bootstrap 4 grid használata

    Azt használsz ami tetszik. A CSS reset cuccok többsége lassan 10 éves, ma már nem nagyon van rájuk szükség. Bootstrap akkor kell, ha az adott projekth...

  • A Bootstrap 4 grid használata

    Szia! Nem rég kezdtem tanulni, kis segítséggel õssze tudok rakni egy oldalt Html+css a többivel még most ismerkednek. Nem nagyon vagyok vele tisztába ...

  • A villanyszerelés örömei panelben

    Nem, én B-t raktam mindenhova és most már ötödik éve nincs vele gondom....

  • A villanyszerelés örömei panelben

    Szia Jövő héten kezdek bele, egy ugyan ilyen projectbe. Még mindig tartod azt az állítást, hogy jó a C karakterisztikájú kismegszakító? És mé...

  • ActionScript 3 eseménykezelés

    Sima CSS animációt....

  • ActionScript 3 eseménykezelés

    Helló! Kiváló a "Banner mutációk" -ról szóló videód. A legnagyobb erénye számomra, hogy a hatékony munkavégzést is bemutattad. Amiért a flash témakor...

  • Egyszerű tükröződés készítése Photoshopban

    Koszi:)...

  • Bootstrap carousel

    Nem találkoztam még ilyennel, ezt a két linket találtam hozzá: https://stackoverflow.com/questions/16244306/single-picture-displaying-upside-down-in-b...

  • Adobe XD VS. Lunacy

    Igen....

  • Adobe XD VS. Lunacy

    Hali. Az adobe XD akkor is ingyenes, hogyha üzleti felhasználásra használom? Tehát eladom a munkám, amit vele csinálok?...

  • A Bootstrap 4 grid használata

    Hali. Ez attól függ, hogy mit írsz bele a szerződésbe. Általában amúgy 50% előleget szoktak kérni, én is ennyit kérek az ügyfeleimtől, és a szerződésb...

  • Bootstrap carousel

    Szia, Nem tudod miért fordít meg bizonyos képeket csak úgy a bootstrap ? Belinkelem a képet és gondol egyet és fejjel lefele illeszti be....