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
  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...