Animáció Photoshoppal

Az animálást Photoshoppal nem is olyan nehéz feladat megoldani. A következő tutorialban arról lesz szó, hogyan készíthetünk egy egyszerű, de látványos GIF animációt, akár pár lépésből is.

Általánosságban a bannerekről

A bannerekről elmondható, hogy a fájlméretnek a lehető legkisebbnek kell lennie, mivel nem lassíthatjuk az oldalak betöltését egy több megabájt nagyságú fájllal. Alakjuk lehet négyzet alapú, de lehet téglalap, vagy bármilyen, amit kigondolunk. Mielőtt nekifogunk az elkészítésnek, gondoljuk át a végleges képet, és az “akciókat”, amiket alkalmazni fogunk a későbbiekben, hogy ne dolgozzunk hiába. Ha a végleges kép GIF lesz, érdemes odafigyelni, hogy 256 színt használjunk a bannerben, különben a végeredmény elképzelhető, hogy ronda lesz, mivel a Photoshop leredukálja a felhasznált színek számát, mikor a PSD fájlt exportáljuk egy mozgó GIF-be.

1. Lépés – Bannerünk fejlécének elkészítése

Az első lépés természetesen a banner elkészítése, mely minden alkalommal különböző. Én egy 250×250 px-es bannert készítettem, a lehető legegyszerűbb módon. Bannerem több részből fog állni, egy fejlécből, egy szlogenből, egy figyelemfelkeltő logóból, és egy rövid tartalmi bemutatóból.

Készítettem egy lekerekített Shape-t, a “Rounded Rectangle Tool” segítségével, és csináltam egy belső árnyékolást a “Blending Options” menüben, az “Inner Shadow” pontban. A mellékelt képen látható, milyen beállításokat használtam.

Animalt_banner-lepes-1

Aztán hozzáadtam az oldalam nevét, természetesen egy kis stílussal, nehogy unalmas legyen a kép. Ehhez az “Outer Glow” volt a segítségemre, természetesen a “Blending Options“-ban.

2. Lépés – Bannerünk szlogenje, logója

Ezzel a lépéssel sem volt különösebb gond, hiszen a szlogen egyszerűen csak oda van írva, a logó pedig egy egyszerű, 3 rétegből álló szöveg-réteg, melyből a felső rétegre egy kis stílus “Outer Glow” van adva. Az eredmény eddig ilyen:

Animalt_banner-lepes-2

3. Lépés – Bannerünk tartalmi bemutatója

Minden valamire való bannerben van egy “bemutató” rész, melyből legalább kulcsszavanként megismerhető a tartalom. Ehhez csináltam egy sávot alulra, melyet egy Shape alkalmazásával, a “Gradient Overlay” menüben tökéletesítettem, az alábbi beállításokat használva:

Animalt_banner-lepes-3

Következő lépésként a létrejött sáv közepére több rétegnyi szöveget helyeztem el: Tutorialok, Photoshop, Pluginok stb…
(Fontos, hogy mindegyik szöveg középen legyen, és lehetőleg ugyanabban a síkban, hogy ne legyen zavaró az eltérés a későbbiekben)

Animalt_banner-lepes-3b

A láthatóság kedvéjért a többi szövegréteget ki is kapcsoltam. Nektek is ki lehet, nyugodtan, nem fog beleszólni az animációba.

4. Lépés – Az animáció

Csaljuk elő az alap beállításban nem megjelenített “Animáció” ablakot. Ehhez klikkeljünk a felső menüben található “Window” fülre.

Animalt_banner-lepes-4

Ha mindent jól csináltunk, akkor előjön egy alsó menü, méghozzá egy idővonallal, ami 10 mp-et jelent. Itt kell majd beállítani mindent aprólékosan, odafigyelve a sorrendiségre és az időre.

Animalt_banner-lepes-4b

Hogyan működik?

Megpróbálom leírni érthetően, hogyan is működik az animálás. Van egy kész képünk, mely rétegekből áll. A rétegeket az animációs panelon külön sávban láthatjuk. Itt tudjuk meghatározni, hogy a rétegek milyen sorrendben, hogyan jelenjenek meg. A zöld vonalak a sávoknál azt jelentik, hogy a réteg látható. Ha egérrel rákattintunk ezekre a zöld vonalakra, akkor el tudjuk őket tolni, tehát ahol nincs vonal, nem jelenik meg a réteg sem. A sávoknál látható egy lefelé mutató nyíl. Itt tudjuk beállítani a különböző effekteket, mint például a Pozíció (Position) módosítása, Áttetszőség (Opacity), Stílus (Style).

Ahhoz, hogy alkalmazzunk bizonyos effekteket, úgynevezett “keyframe”-eket kell használnunk. Ezek tulajdonképpen jelölések, melyeket a kis stopper-óra ikonnal lehet előhozni. attól függően, hol áll az idővonalon a kurzorunk, oda rak egy jelölést a program. Ha változtatunk az effekten, akkor oda is rak egy újabb jelölést. A változtatások közt eltelt időt a keyframe-ek tologatásával lehet növelni, csökkenteni. Ha például az Opacity (Áttetszőség) óraikonjára kattintunk, akkor a réteghez, ahol állunk rak egy jelölést, mely az opacity 100%-ot jelenti, tehát teljesen látszik. Aztán vigyük a kurzort az idővonalon előrébb, majd állítsunk a réteg áttetszőségén. Állítsuk 0%-ra. Ilyenkor az adott réteg szép lassan elő fog tűnni a semmiből.

Ezt az elvet alkalmazva simán létre lehet hozni szinte bármilyen mozgó, áttűnő, vagy stílusban változó animációt. Ha megfigyelitek az általam elkészített animációs idővonalat, kiderül az elrendezés.

Animalt_banner-lepes-4c

Ahogy látható, a szöveges részeknél oda kell figyelni a sorrendiségre. Én mindent áttűnéssel oldottam meg. A szövegeknél így néz ki az effektelés:

1. keyframe: Opacity 0%
2.keyframe: Opacity 100%
3. keyframe: Opacity 100%
4. keyframe: Opacity 0%

A két 100%os keyframe között tehát teljesen látszik a réteg, míg a többi pedig áttűnik, az idővonal szerint.

5. Lépés – Animáció Mentése GIF formátumban

Ehhez válasszuk a “Save for Web & Devices” pontot a “File” menüben, vagy noymjuk le a “Alt+Ctrl+Shift+S” gombokat.

A lényeg, hogy az alsó menün (Looping Options) a Forever legyen kijelölve.

Animalt_banner-lepes-5

A végeredmény

250x250_kepszerkesztes_banner

Ajánlott bejegyzéseink: