Tanulni fogsz:

• Az animációs panel megnyitása és bezárása, valamint testreszabása.
• Kulcs- és animációs keretek hozzáadása, eltávolítása és szerkesztése.
• Mire való a Tween gomb?
• Hogyan készítsünk egyszerű csillagrajzos animációt.
• Időintervallumok beállítása az egyes animációs képkockákhoz.
• Az animáció optimalizálása a kicsinyítéshez Gif méret fájlt.
• GIF fájlok importálása a programba.
• A képkocka-animációról az idővonalra váltani.

A lecke a következő részekből áll:

1. Oktató videó.
2. Mi az animáció.
3. 1. rész. Képkockánkénti animáció.
4. Időközök beállítása.
5. Az ismétlések gyakoriságának beállítása.

7. Animáció optimalizálás.
8. Animáció mentése.

10. Nyissa meg a GIF-eket.
11. Az animációs rétegek egységesítésére szolgáló gombok.
12. Az animációs panel bezárása.
13. Kérdések.
14. Házi feladat.

Mi az animáció

Az animáció a képek szekvenciális változása, aminek következtében számunkra úgy tűnik, hogy a tárgy mozog, alakot vált, megjelenik és eltűnik, és más dinamikus cselekvések is megtörténhetnek vele.

Animációval Photoshop fényképekből vagy képekből diavetítéseket készíthet, avatarokat, bannereket, képernyővédőket weboldalakhoz, dinamikus képeslapokat és különféle prezentációkat készíthet. Nem szabad megfeledkezni arról, hogy a Photoshop továbbra is grafikus szerkesztő, és nem bonyolult animációs folyamatokhoz készült. Kétféleképpen hozhat létre animációt a programban - kockánkénti animációt és animációt idővonal módban. Mindkét típusú animációt sorra megvizsgáljuk. A teljes 36. leckét a képkockánkénti animáció tanulmányozásának szenteljük. A 37. leckében pedig az idővonallal fogunk foglalkozni. Néhány egyszerű feladatokat kényelmesebb kockánkénti animációs módban végrehajtani. Még ha tudja is, hogyan kell más programok idővonalával dolgozni, akkor is azt tanácsolom, hogy próbálja ki a leckében található feladatokat. A megszerzett ismeretek alapján el tudja majd dönteni, hogy melyik módszert alkalmazza minden esetben.

1. rész. Képkockánkénti animáció

Panel Keretek régen megjelent. Tekintsük a beállításait a csillag rajzolásának animációjának példáján.

Teremt új dokumentumot 800 x 800 pixel, felbontás 72, RGB színmód. Hozzon létre egy új réteget a Rétegek paletta alján található ikonra kattintva. Vagy nyomja meg a Shift+Ctrl+N billentyűkombinációt.

Az eszköztáron válassza ki az ecset eszközt fekete, 35 pixel átmérőjű elmosódott élek. Rajzolja meg az első ferde vonalat (tegyen egy pontot, nyomja meg a Shift billentyűt, és tegye a következő pontot - a vonal egyenes lesz).

Hozzon létre egy második réteget. Rajzolja meg a következő vonalat. Aztán a harmadik réteg
és egy másik sor, és így tovább. Hat rétegnek kell lennie, beleértve a háttérréteget is.

Az Animáció panel megnyitásához kattintson az Animáció elemre az Ablak menüben. Vagy az Ablak menüben (Window) telepítse a munkaterületet (Workspace) videóra és filmre/videóra (videó). Győződjön meg arról, hogy a panel kockánkénti animációs módban van.
Ellenkező esetben kattintson az ikonra az animációs panel jobb alsó sarkában.

Kapcsolja ki az összes réteg láthatóságát a háttérréteg kivételével a Layers (Layers) palettán a réteg miniatűrjének bal oldalán található ikonra kattintva. Ez lesz animációnk első képkockája.

Kattintson az Animáció panel alján található ikonra. Megjelenik a második képkocka (az első képkocka másolata). A módosításhoz kapcsolja be az első réteg láthatóságát a Layers (Rétegek) palettán. Kattintson ismét az ikonra, és kapcsolja be a második réteg láthatóságát.

Folytassa az új keretek létrehozását, és kapcsolja be a következő rétegek láthatóságát, amíg a teljes csillag meg nem jelenik az utolsó képkockában.

Az Animáció panel alján találhatók az animációk hozzáadására, eltávolítására és megtekintésére szolgáló eszközök.

- átalakítás animációvá az idővonalon.

- Tween(Köztes keretek készítése).

- Az aktuális képkocka másolása (másolat létrehozása a kiválasztott képkockákról).

- Lejátszás gombok (Mint minden magnó).

Kiválasztja az első keretet(Válassza kielsőkeret); Kiválasztja az előnézeti keretet (Válassza kielőzőkeret);

Játék(animáció indítása);

KiválasztjaKövetkezőkeret(Válassza ki a következő képkockát).

- A kijelölt keretek törlése. Felhívjuk figyelmét, hogy a kulcsDela billentyűzeten nem törli a kijelölt keretet, hanem a Layers (Layers) palettáról törli a kiválasztott réteget.

Időközök beállítása.

Most állítsuk be azokat az időintervallumokat, amelyek alatt az animációs képkockák láthatóak legyenek.

Minden keret alatt 0 s van írva alul. és van egy nyíl. Kattintson a nyílra, és válassza ki a képkockasebességet. Minden képkockához válasszon 0,5 értéket (ez azt jelenti, hogy fél másodperc múlva keretváltás történik).

Az ismétlési gyakoriság beállítása.

A következő lépés az animáció ismétlődési gyakoriságának beállítása. Kattintson a nyílra az animációs panel alján. Megjelenik a periodicitás kiválasztó menü.

Ha a Forever (Örökké / Véglegesen) lehetőséget választja, az animáció újra és újra megismétlődik. Ezt a folyamatot huroknak nevezik.

Ha az Egyszer lehetőséget választja, az animáció egyszer kerül lejátszásra, és az utolsó képkockánál áll meg.

Ha az Egyéb lehetőséget választja, a tartományon belül eltérő számú ismétlést állíthat be (1 és 999 között).

Most játsszuk le a létrehozott animációt. Ehhez kattintson a Lejátszás gombra (Animáció indítása). Ha minden tetszik, lépjen a következő lépésre, ha nem, akkor állítsa be az animációt tetszés szerint.

Lépjen az Animációs panelre. Kattintson az Aktuális keret megkettőzése ikonra. Jelölje ki az összes réteget, kivéve a háttérréteget.
Kapcsolja ki a háttérréteg láthatóságát. Nyomja meg a Ctrl+Shift+Alt+E billentyűkombinációt. Megjelenik egy új réteg, amelyen az összes kijelölt réteg bélyegzőre kerül.
A réteg miniatűrjén egy csillag látható átlátszó háttér. Nevezze el ezt a réteget csillagnak.

Kattintson duplán a rétegre a stílusbeállítások eléréséhez. Állítsa be az árnyékot és a színt. Válassza ki a választott színt.

Menjen vissza az animáció első képkockájához
és távolítsa el a réteg láthatóságát a csillaggal
palettán Rétegek (Rétegek).

Válassza ki az utolsó képkockát. A Rétegek palettán csak a Csillag réteg és a Háttér réteg maradjon látható.

Másolja ezt a réteget, és módosítsa a stílusbeállításokat: Szín módosítása, domborítás vagy körvonal beállítása. Lépjen az Animációs panelre. Kattintson az Aktuális keret megkettőzése ikonra. Az Animáció panelen térjen vissza az első képkockához, és törölje ennek a rétegnek a kijelölését a palettán.

Másolja újra a réteget, és változtassa meg a stílust. Válassza ki az Áthelyezés (Move) eszközt, vagy nyomja meg a Ctrl + T billentyűkombinációt a Szabad átalakítás eszközre lépéshez. Változtassa meg a léptéket. Lépjen az Animációs panelre. Kattintson az ikonra. Menjen vissza az első képkockához, és szüntesse meg a réteg kijelölését.

Másolja újra a réteget, és nagyítson még egy kicsit, és módosítsa a stílust. És adj hozzá egy animációs keretet. A végén egy ilyen storyboardot kell készítenie:

Nyomja meg a Lejátszás gombot (Animáció indítása), és nézze meg az elvégzett munka eredményét.

Animáció optimalizálás.

Kattintson az ikonra az animációs panel jobb felső sarkában. Egy további menü jelenik meg.

A munka befejezése után optimalizálni kell az animációt, hogy csökkentse a Gif fájl méretét és jobb letöltés böngésző. A csökkentés azon területek kizárása miatt következik be, amelyek nem változnak a keretről a keretre való átmenet során.

Kérlek, válassz Animáció optimalizálása… (Animáció optimalizálása). Jelölje be mindkét négyzetet.
HatározásDoboz(határoló doboz)- a képkockákat a megváltozott terület szerint vágja le az előző képkockához képest.

Redundáns képpontok eltávolítása (fölösleges képpontok eltávolítása). Ha egy pixel nem változott az előző képkockához képest, átlátszóvá válik.

Ha azt szeretné, hogy a PhotoShop átlátszóságot tartalmazó kereteket mentsen, válassza ki a lehetőséget "Automatikusan". Ehhez válasszon ki egy vagy több keretet. Kattintson jobb gombbal a keret bélyegképére. Válasszon három lehetőség közül:

Automatikus(Automatikusan)— az aktuális keretet el kell vetni, ha a következő képkocka réteg átlátszóságot tartalmaz.,

Teddnemeldob(Ne dobja ki)-Az aktuális keret a következő képkocka átlátszó területein keresztül látható.,

Eldob(Pozíció)- az aktuális keret nem látható a következő képkocka átlátszó területein keresztül.

Animáció mentése.

Itt az ideje, hogy mentse az animációt. Természetesen a munka során szükséges volt a fájl mentése PSD formátum, hogy ne kerüljön olyan helyzetbe, amikor hirtelen áramszünet vagy a számítógép váratlan újraindítása következik be. De most egy újabb mentésre gondolok. Az animáció a paranccsal animált GIF-ként menthető Kivéve Web (Mentés webhez és eszközökhöz).

Válassza a Mentés webre lehetőséget a Fájl menüben. Állítsa be a Gif formátumot a beállításokban. Ügyeljen a jövőbeli fájl méretére. Lehetőleg csökkentse a méretét. Ennek mikéntjét a Képméret (Képméret) leckében részletesen tárgyaltuk. Optimalizáláskor használja az Adaptive, Perceptual vagy Selective színredukciós modellt, hogy biztosítsa a színek konzisztenciáját az összes képkockán. Kattintson a Mentés gombra, írjon be egy nevet, elérési utat, majd kattintson ismét a Mentés gombra.

Korábban az animáció rögzítéséhez az ImageReady alkalmazáshoz mentünk.

A Photoshop CS2 bemutatja az Animáció panelt. De az animált fájl mentéséhez továbbra is át kellett váltania az ImageReady-re. Az átmenethez az eszköztár alján található gomb vagy a Fájl (Fájl) - Szerkesztés az ImageReadyben (Ugrás az ImageReady-hez) menü szolgált.

A Photoshop CS3 és újabb verzióktól kezdve nincs szükség animációkra az animációk rögzítéséhez. további programokat. A szerkesztéshez most az Animáció panelt használjuk, a rögzítéshez pedig a Fájl menü (Fájl) menüpontot adaptáltuk. Megmentszámáraweb(Kivéveweb) .

Tekintsünk egy másik kis példát egy képkockánkénti animáció létrehozására, amelyben elemezzük, mire való a gomb. Tween(Tweening létrehozása).

Hozzon létre egy új, 500 x 250 pixeles dokumentumot. Szerszám kiválasztása Típus (szöveg), betűtípus Hatás, méret 150 pt. és írjon bármilyen szót. Állítsa az átlátszatlanságot 100%-ra. Rétegstílusok hozzáadása: árnyék, színátmenet és domborítás. Választhatsz más stílust is, nem kell úgy csinálnod, mint az enyém. A szöveg deformációja animálható is. Az animációs panelen állítsa be az intervallumot 0,2 másodpercre. Nyomja meg a gombot az első képkocka másolásához. Lépjen a Rétegek (Rétegek) palettára, és csökkentse az átlátszatlanságot 0-ra. Módosítsa a rétegstílust (például színátmenetes fedvény helyett színfedőt adjon hozzá). A képkockák között váltogatva megnézheti, hogyan változik a kép.

Adjunk hozzá mozgást. Válassza ki az Áthelyezés (Move) eszközt, és mozgassa lefelé a szöveget a lapról. Lépjen az animációs panelre, és kattintson a gombra

A megjelenő ablakban beállíthatja a hozzáadott képkockák számát. Minél több van belőlük, annál simább lesz az átmenet. A grafikonon TweenVal vel(kockák közötti) a listából kiválaszthatja, hova kerüljön a keret:

Utolsó (Utolsó képkocka); Kiválasztás (Selection); Previous Frame (Előző képkocka); First Frame (First frame); Következő keret A lista a kiválasztott kerettől függően változik.

Hagyja meg az összes alapértelmezett beállítást. Kattintson az OK gombra.

Kattintson a Lejátszás (Animáció indítása) gombra. Ha minden megfelel Önnek, folytassa az animáció mentésével.

GIF-ek megnyitása.

A Photoshop CS3 és CS44 esetén a video- és GIF-animációs fájlok nem nyílnak meg a Fájl (Fájl) – Megnyitás (Megnyitás) menüben. Amikor megpróbálom megnyitni, megjelenik egy ablak:

Feltétlenül telepítse a QuickTime Pro 7.1 vagy újabb verzióját.

A Photoshop CS5-ben nincs ilyen probléma. A fájlok könnyen megnyithatók a szokásos módon.

Válassza a menüből a Fájl (Fájl) –Importálás (Importálás) – Videókockák rétegekbe (videókockák) menüpontot.
rétegekbe...). A fájltípus mezőben nem választhat GIF-fájlokat. Ez a hiányosság azonban könnyen megkerülhető, ha először másolja a .gif fájl nevét, és illessze be a fájlnév mezőbe, vagy kézzel írja be a nevet ebbe a mezőbe. Vagy írja be a *-ot a Fájlnév mezőbe, majd kattintson a Betöltés gombra
láthatóvá válik a gif fájl neve és megnyitható (Más fájlok is láthatóvá válnak, azok is, amelyeket nem lehet megnyitni a programban).

Hagyja a beállításokat az alapértelmezettként megjelenő ablakban. Az elejétől a végéig és a Make Frame Animációt be kell jelölni. Sajnos az így megnyitott fájlok háttere nem lesz átlátszó, hanem fehér lesz. Amikor megnyit egy ilyen fájlt CS5-ben, az átlátszó háttér megmarad.

Gombok az animációs rétegek egységesítéséhez.

Nézze meg alaposan, hogyan változott a paletta Rétegek(Rétegek) amikor kockánkénti animációval dolgozik. Megjelentek a gombok, amelyek lehetővé teszik az aktuális keret módosításainak alkalmazását az összes többi képkockára. Jelölje be az 1. keret terjesztése jelölőnégyzetet.

Lássuk, hogyan működnek... Nyissa meg a csillagrajz animációs fájlját. Válasszon ki egy keretet, és kapcsolja ki a háttérréteg láthatóságát. Kattintson a Lejátszás (Animáció indítása) gombra. Csak a kiválasztott keret vált átlátszóvá. Kattintson a Réteg láthatóságának egyesítése gombra. Megjelenik egy ablak: .

Kattintson mérkőzés(Szinkronizálás)és futtassa újra az animációt. A sztár rajzolása átlátszó háttéren történik az animáció során. Az első képkocka átlátszósága mostantól az összes animációs képkockához hozzá van rendelve. Hasonlóképpen szabályozhatja a réteg helyzetét és stílusát.

A paletta Rétegek (Rétegek) alatt válassza ki az Animációs beállítások (Animációs beállítások) elemet. Alapértelmezés szerint a rétegegyesítés gombjai Automatikusan jelennek meg, amikor bekapcsolja a kockánkénti animációs sávot. Ezt a szabályt a Mindig mutat vagy Mindig elrejtés kiválasztásával módosíthatja.

Zárja be az animációs panelt.

Többféleképpen is bezárhatja az animációs panelt:

Minimalizálhatja vagy bezárhatja az animációs panelt, és a Felhasználói felület beállításai (Interfész beállításai) elemre kattintva a Beállítások (Beállítások) menübe léphet.

Kérdések:

1. Mi történik, ha kiválaszt egy képkockát egy képkockánkénti animációban, és megnyomja a Del gombot a billentyűzeten?

A kiválasztott keret törlődik.

A Rétegek palettán kiválasztott réteg el lesz távolítva az összes animációs képkockából.

A Layers (Rétegek) palettán kiválasztott réteg csak a kiválasztott animációs keretnél törlődik.

A Rétegek palettán kiválasztott réteg a háttérréteg kivételével minden animációs keretből eltávolításra kerül.

1. Három kereted van. Az animáció folyamatos lesz. Mit kell tenni a hozzáadáshoz
   5 köztes képkocka az utolsó és az első képkocka között?

Válassza ki az első képkockát. nyomja meg a gombot
A beállításoknál a Tween With (Intermediate frames) oszlopban válassza a Következő képkocka (Next frame) lehetőséget.

Válassza ki az utolsó képkockát. nyomja meg a gombot
A beállításoknál a Tween With (Intermediate frames) oszlopban válassza az Előző képkocka (Előző képkocka) lehetőséget.

Válassza ki az utolsó képkockát. Kattintson a Tween gombra.
A beállításokban a Tween With (Intermediate frames) oszlopban válassza az Első képkocka (Első képkocka) lehetőséget.

1. Mire való az animáció optimalizálás?

Átalakítás idővonal-animációvá.

A Gif-fájlok méretének csökkentése azáltal, hogy kizárja azokat a területeket, amelyek képkockánként nem változnak.

Az animáció ismétlődési gyakoriságának beállítása.

Házi feladat:

1) Készítsen kockánkénti animációt egy csillag rajzolásáról (a lecke szerint).

2) Végezze el a szöveg kockánkénti animációját.

Jó estét, kedves feliratkozók és blogom olvasói! Készen állsz arra, hogy megtanuld, hogyan keltheted életre a képedet? És nem varázslat segítségével, hanem kedvenc photoshopunk segítségével! Mióta halogatom ezt a leckét anélkül, hogy tudnám, miért. Végül is ezek a Photoshop alapjai! De most úgy döntöttem, változok.

És fejlődj annyit, hogy a videó végén a tiéd is lesz egy videólecke a hogyanról animációt készíteni Photoshopban.

Régóta nem írtam Photoshop oktatóanyagokat, és megvoltak az okaim. Végül is befejeztem a történetemet „”. Szívesen olvassa el, és kommentben mondja el véleményét!

És most menjünk közvetlenül a leckére. Az alábbi videóban megmutatom, hogyan lehet fokozatosan hozzáadott szöveget készíteni, de a szövegleckében kicsit bonyolultabb lesz a feladat.

Megvan Cipollino, és rá kell kényszerítenünk, hogy intsen nekünk.

1. lépés. Először „engedélyeznie kell” az animációt a Photoshopban. Erre megyünk "Ablak"->"Animáció". Még írható „Időskála”.

2. lépés. Ahhoz, hogy a kar mozogjon, ki kell vágnunk, és különböző pozíciókba kell helyeznünk. Kézi vágáshoz személyesen használom "Mágneses lasszó". A fő másolatának készítése Ctrl+J), és dolgozzon a másolattal. Az eredetihez nem nyúlunk.

Gondosan válassza ki a kezet és vágja ki!

3. lépésÉs most behelyezzük a kezünket, bármilyen szörnyen is hangzik, és különböző pozíciókba tesszük. A kéz új rétegekbe kerül, még nekünk is megfelel.

4. lépés. Ez a lépés nem kötelező, de jobb, ha a Radír eszközzel megérinti a kezet, hogy természetesebb legyen. Nehéz persze szavakkal elmagyarázni. Ha érti, miért használjuk a radírt, akkor kövesse ezt a lépést, ha még mindig nem érti, kihagyhatja. Ez nem fontos, hiszen számunkra az a legfontosabb, hogy megtanuljunk egyszerű animációt készíteni!

5. lépés. Most a személyzettel dolgozunk. Minden keretben csak azokat a rétegeket helyezzük el, amelyekre szükségünk van. Például az 1. keretben szükségünk van az eredetire, és a mi esetünkben "0. réteg".

Most létrehozunk egy új keretet:

És már az új keretben bekapcsolunk más rétegeket. Vagyis a miénk „0. réteg másolata”és "1. réteg", vagyis a kéz eltérő pozíciója. Remélem, az algoritmus világos számotokra, kedves olvasók.

6. lépés. Képkocka késleltetés beállítása. Ez azt jelenti, hogy mennyi idő után jelenik meg a következő képkocka.

7. lépés. Megtartjuk a miénket. Nem véletlenül vettem bele ezt a lépést az oktatóanyagomba, mivel a GIF-animáció mentése kicsit más, mint egy kép.

Válassza ki a formátumot (alapértelmezett a GIF), és mentse.

02.08.2016 27.01.2018

Ebben az oktatóanyagban megtanuljuk, hogyan készítsünk animációt. Az animáció olyan kép, amely mozgást kapott, ellentétben a statikus képekkel (például fényképekkel), képes megváltoztatni a kereteket vagy a keret részeit.

A latinból az Anima szót "léleknek" fordítják. Elmondhatjuk, hogy animáció létrehozásával "animáljuk" a képet, életet adunk neki.

Animációs panel megjelent Adobe photoshop CS3, ezt megelőzően, a CS verzióban az animáció létrehozásának lehetőségét keresztül hajtották végre külön program, Image Ready CS2, amely az Adobe Photoshophoz érkezett. Most újban Adobe verziók A Photoshop animációs eszköz benne van a programban, és ennek neve Időskála. A lecke megtörtént v Adobe Photoshop 2015.5, ha több van korai változat program, bizonyos beállítások eltérhetnek, de az alapkoncepciók azonosak.

Kezdjük el megtanulni, hogyan készítsünk animációt. Nyissa meg az "animálni" kívánt képet Fájl-Megnyitás (Fájl megnyitása). Van egy aranyos képem egy lánnyal és egy macskával, akik a csillagos égboltban gyönyörködnek.

Hozzon létre három új üres réteget, Rétegek-Új-Réteg (Réteg-Új-réteg) vagy kattintson a miniatűrre egy új réteg létrehozásához réteg panelek.

Nevezze el őket rendre "1", "2", "3". Ez segít elkerülni a későbbi félreértéseket.

Választ kefe szerszám (kefe):

Először kattintson az ecsetméret melletti háromszögre, majd a bal oldali fogaskerékre:

Megnyílik az ecsetletöltés menü:

Töltse le a csillagkeféket (https://cloud.mail.ru/public/G2co/RTne1N3f9):

Válasszon ki egyetlen ecsetet, és a méret megváltoztatásával fesse fel arra a három rétegre, amelyet korábban készítettünk. Az ecset színe fehér vagy közel fehér. A lényeg az, hogy ne helyezzük őket ugyanarra a területre minden rétegen, próbáljuk véletlenszerűen szórni a csillagokat az égbolton.

Nos, most a legfontosabb: térjünk át a kép animálásának varázslatára. Menjen a menübe Window-Timeline (Ablak-Idővonal), a következő ablak jelenik meg:

Animációs panel két típusa van: Idővonalés keret animáció. Az első típust ritkán használják, mert főleg videóval való munkára szánják, váltsunk rá képkockánként, ehhez kattintson a " gombra Videó idővonalának létrehozása", majd erre az ikonra:

Megnyílik a következő ablak:

Új keret létrehozásához kattintson erre az ikonra:

Animációnk egyszerű, három képkocka elegendő. A meglévőhöz alapból hozzáadunk még két képkockát, majd rákerülünk a lánnyal és a macskával lévő rétegre, és láthatóvá tesszük azt és az első réteget csillagokkal (ehhez egyszerűen kattintson a réteg szemére réteg panelek):

Ugyanezt tesszük a második és a harmadik képkocka esetében is, csak a második és harmadik réteg láthatóságát a csillagokkal. Mindig látható a réteg a lánnyal és a macskával. Az egyértelműség kedvéért képernyőképek a második és harmadik képkockához:

Egy szorítóval kulcsVáltás jelölje ki az összes réteget az animációs panelen, kattintson a jobb gombbal, és módosítsa a keret időtartamát 5 másodperc, alapértelmezés szerint beállítva, pl. 0,2 másodperc. A gombra kattintunk "Ciklus opciók kiválasztása"és módosítsa az értéket erre "Állandóan":

Ha a paraméter be van állítva "Egyszer", akkor az animáció egyszer lejátszik és leáll, a paraméterrel "Állandóan" folyamatosan villogni fog.

Ha látni szeretné, hogyan néz ki az animáció, kattintson erre a gombra:

Többért sima átmenet köztes képkockákat adhat hozzá a képkockák közé - aktiválja a keretet animációs panelekés kattintson erre az ikonra:

Megjelenik egy ablak, amelyben kiválaszthatja a közti keretek számát, helyét és stílusát. Az első két képkockához hozzáadtam 3 köztes képkockát a következő beállításokkal:

És az utolsó, harmadik képkocka is 3, de különböző beállításokkal, hogy az animációt hurkolják, és a csillagok zökkenőmentesen jelenjenek meg és tűnjenek el, rándulások és hirtelen átmenetek nélkül:

Nos, az animációt Photoshopban készítettük, csak el kell menteni. Menj Fájl-Exportálás-Mentés webre ( régi verzió) (Fájl— Export— Megment számára web (régi változat)):

A formátum kiválasztása gif, kiválaszthatja a színek számát is (minél több szín, annál nagyobb súlyú lesz a fájl, de minél kevesebb szín, annál rosszabb a minőség), méretet. A többi paraméter alapértelmezettként hagyható.

Ez minden! Megtanultuk animációt készíteni a Photoshopban!

Hozzon létre egy új méretű fájlt 700 x 300 px.

Nyissa ki az ablakot Idővonal( (Ablak – Idővonal)).

Kattintson a " gombra Keretanimáció létrehozása» (Keretanimáció létrehozása).

Az eszköz () segítségével hozzon létre 3 réteg szöveggel ("Animáció", "Ez", "csak").

Az eszköz (Move Tool / V Key) segítségével helyezze el a szöveget az alábbi képen látható módon.

Az ablakban Idővonal(Idővonal) válassza ki az első képkockát, és kattintson a « gombra Megkettőzi a kiválasztott képkockákat» (Hozzon másolatot a kiválasztott képkockákról).

Mi alkotunk 4 kiválasztott képkockák másolatai.

Válassza ki az ablakban Idővonal(Idővonal) második képkockaés csak a rétegek maradjanak láthatóak" Élénkség"és" Háttér».

Választ negyedik képkockaés hagyja láthatóvá minden rétegek.

Állítsuk be animációnk ismétlési paraméterét. Az ablak menüjében Idővonal(Idővonal), módosítsa az ismétlési paramétert a következőről: " Egyszer"a" Állandóan” (kép lent).

Most már használhatjuk az animációt a játék elindításához.

Animációs beállítások a „Fájl – Mentés webre” (Fájl – Mentés webre) alkalmazásban Photoshop CC. Végeredmény

Gondolkozott már azon, hogyan készülnek animált GIF-ek? Az oktatóanyag szerzője arra kéri Önt, hogy egy éjszaka alatt sajátítsa el az animáció néhány titkát ezzel az oktatóanyaggal. Azt is megtanulja, hogyan kell használni a Photoshop CS6-ban elérhető idővonalat. Most pedig kezdjük el!

Az óra eredménye.

1. lépés

Hozzon létre egy új dokumentumot ( Ctrl + N) 800 x 500 pixel fájlmérettel. Töltse ki a hátteret tetszőleges színnel. Most lépjen a menübe Rétegek- Stílusréteg- Overlaygradiens(Réteg> Rétegstílusok> Színátmenet fedvény). Alkalmazza a következő beállításokat: Stílus Sugárirányú(Radiális), a feketétől (# 000000) a kékig (# 54799b) a színek, amelyeket a központban használunk.

2. lépés

Hozzon létre egy új réteget, és nevezze el Zajréteg. Válasszon ki egy eszközt Tölt(Paint Bucket Tool), és töltse ki a létrehozott réteget sötét színnel (# 231f20). Hagyja aktívan a réteget Zajrétegés lépjen a menübe Szűrő - Zaj - Zaj hozzáadása(Szűrő> Zaj> Zaj hozzáadása). A szűrőbeállítások párbeszédpanelen állítsa be a következő értékeket: a hatás(Összeg) 3%, eloszlás Egyenruha(Uniform) és kattintson az OK gombra.

3. lépés

Nyomja meg a billentyűkombinációt (Ctrl +U)és a megjelenő korrekciós beállítások párbeszédpanelen adja meg az értékeket Telítettség(telítettség) 100%: Módosítsa a réteg keverési módját erre Lágy fény(Lágy fény).

A fordító megjegyzése: annak érdekében, hogy az árnyalat/telítettség érték korrigálásakor a képernyőképen a szerző színével megegyező színt érjünk el színtónus(Hue) fel - 140.

4. lépés

Adjon hozzá bármilyen kívánt szöveget. Itt a 123RF weboldal logójának szövegét használjuk. Rétegstílusokban használja Vázlat(stroke). Válassza ki a löketméret értékeit ízlése szerint.

A fordító megjegyzése: A szerző képernyőjén már raszteres szöveg található a Stroke stílussal együtt. Ugyanezen eredmény eléréséhez a körvonal alkalmazása után távolítsa el a Fill (Tölt) a szövegréteg 0%-ára, alakítsa át ezt a réteget intelligens objektummá, majd raszterizálja.

5. lépés

Ebben a lépésben rétegstílusokat használva ragyogó hatást fogunk létrehozni a szöveghez. Kattintson duplán a rétegre a stílusbeállítások ablakának megjelenítéséhez. Használja az alábbi képernyőképeket a rétegstílusok testreszabásához.

Domborítás(ferde és dombornyomás)

Belső árnyék(Belső árnyék)

Belső ragyogás(Belső ragyogás)

Színes átfedés(Színes fedvény)

Külső ragyogás(Külső ragyogás)

Árnyék(Árnyék)

6. lépés

Ha végzett a fényhatások létrehozásával a rétegstílusok használatával, lépjen a rétegek palettára, és csökkentse ennek a rétegnek az értékét. kitölti(Kitöltés) 0%-kal.

7. lépés

Másolja le az 5. lépésben létrehozott fóliát, és kapcsolja ki az összes rétegstílust ezen a másolaton. Most állítsa be a stílusokat a következőképpen:

Belső árnyék(Belső árnyék)

Belső ragyogás(Belső ragyogás)

8. lépés

Az alábbiakban látható az eredmény a rétegstílusok alkalmazása után.

9. lépés

Most mozgó fényfoltokat fogunk létrehozni. Hozzon létre 5 réteget a meglévők fölé, és nevezze át őket 1, 2, 3, R és F névre. Ha saját szövege van, hozzon létre rétegeket a betűinek megfelelően. Csoportosítsa ezeket a rétegeket egy mappába, és adjon neki nevet. Világos foltokés módosítsa a keverési módot erre Az alap világosítása(Színes Dodge).

Aktiválja az eszközt Kefe(Brush Tool), válasszon puha kefét, állítsa be Átlátszatlanság(Átlátszatlanság) 95% és fehér festéssel néhány folt a szöveg felett. Minden betűhöz külön fényfolt a saját rétegén. Az alábbi képernyőképen láthatja, hogyan néznek ki a rétegek a szerzőre a rétegek palettán.

10. lépés

Most lépjen a menübe Ablak – Idővonal(Ablak> Idővonal). Észre fogja venni, hogy a rétegei már be vannak építve ezen a palettán, annak bal oldalán. Válassza ki mind az öt reflektorfény-réteget a csoportban. Világos foltokés győződjön meg arról, hogy az aktuális idő jelzője (kék csúszka) a képkocka nullán van. Most a csoport minden rétegén, ha az aktív, kattintson az opcióra Pozíció(Pozíció) kulcskép létrehozásához.

A fordító megjegyzése: Az idővonal aktiválásához nyomja meg a gombot Hozzon létre idővonalat a videóhoz(Videó idővonalának létrehozása), és minden rétege betöltődik az idővonalra. A kiválasztott réteg ugyanaz lesz, mint a rétegpalettán.

11. lépés

Állítsa az aktuális idő jelzőjét (kék csúszka) állásba 01:00 Fés mozgassa a rétegeket világos foltokkal a mozgásuk útján a betű körvonalához képest.

12. lépés

Így fog kinézni a fényfolt kezdeti helyzete a betűkön. Mozgassa az aktuális idő jelzőjét az idővonalon, és mozgassa a rétegeket világos foltokkal, kulcskockákat hozva létre. Addig mozgassa őket, amíg be nem fejezi a folt mozgatását az egyes szövegrétegek teljes betűjén. Az utasításokért tekintse meg az alábbi néhány képernyőképet.