Jak vytvořit gif ve photoshopu cs6. Jak vytvořit animaci gif ve Photoshopu. Vylepšení animace přidáním mezilehlých snímků

Důležitá poznámka. Pokud potřebujete rychle vytvořit jednoduchá animace z několika snímků ve Photoshopu přejděte na lekci - .

O stop-motion animaci se zajímám poměrně dlouho, i když jsem studoval málo materiálu. Všechny knihy, které jsem začal číst, byly docela dlouhé, těžké a „suché“.

Proto poté, co jsem začal trochu rozumět technologii tvorby animací, začal jsem hledat způsoby, jak je přivést k životu pomocí Photoshopu.

Mnoho lidí mi radilo, abych přešel na jiné programy (např. TVP Animation Pro), ale já, protože jsem se nechtěl přizpůsobovat novým rozhraním jiných programů, jsem se rozhodl udělat vše ve Photoshopu.

A tuto lekci jsem napsal speciálně pro ty, kteří nechápali technologii vytváření animací snímek po snímku speciálně ve Photoshopu. Kdo nechtěl trochu kopat a pochopit, co je co?

Dotknu se dvou témat: krátkých animací a dlouhých. Neměli byste procházet typy animací, které pro vás nejsou zajímavé: mohou tam být informace, které se vám budou hodit pro animace typu, který potřebujete.

Krátké animace– jedná se o animované avatary, emotikony atd.

Dlouhé animace– jedná se o karikatury, videa atd.

Nejprve vám řeknu teorii a poté vytvoříme animaci v praxi.

Důležitý doplněk

Mnoho lidí se ptá: „Proč je moje animace tak trhaná, proč se moje postava/objekt pohybuje rychle/pomalu?“
Odpověď zní: vaše postava/předmět se pohybuje rychle protože jsi kreslil málo rámy.

Vaše postava/předmět se pohybuje pomalu protože jsi kreslil hodně rámy.

Vaše postava/předmět sebou škube, protože jste nedodrželi předchozí pohyb a nakreslili další, který není v souladu s předchozím.

Pamatujte: za jednu sekundu 24 rám!

Takže až se připravíte na vytvoření animace, pamatujte: 24 rám = 1 druhý, 24 rám = 1 druhý. Nikdy nezapomeňte na tento velmi důležitý detail.

Krátké animace

Myslím, že jste často naráželi na animace na avatarech, animované emotikony.
Některé emotikony jsou vyrobeny v Blikat, ale ten svůj kreslím ve Photoshopu. Nemyslete si, že takové krátké animace se dělají snadno. Na jednu stranu ano, jsou malé velikosti, ale na druhou stranu, když je kreslíte 15 -30 snímků, budete mít zabrat (představte si, že pokud chcete vytvořit tříminutový klip, budete muset udělat 4320 rámy!).

Co byste si měli zapamatovat a vědět?

Řekněme, že jste pro svého avatara chtěli nakreslit dívku s vlasy rozfoukanými větrem. Prostředek:

Za prvé, vlasy nejsou karton - pod vlivem mírného větru vytvoří příčné vlny.

Zhruba takto je to znázorněno na obrázku:

Pod vlivem silného větru budou vlasy téměř rovné, ale vaše postava bude muset pevně zavřít oči a chytit se něčeho, aby ji neodfouklo, protože takový vítr ve skutečnosti vydrží jen málokdo. ačkoli tento typ animace lze použít, když vaše postava jede například na kole.

A nakonec jemný vánek jemně nadzvedne a spustí vaše vlasy.

Slabý vítr:

střední vítr:

Silný vítr:

Totéž platí pro látku a oblečení – budou se chovat v podstatě stejně jako vlasy.

A teď jste například chtěli nakreslit animaci s pohybem vaší postavy a předmětu. Prostředek:

Za druhé, jakákoliv akce někde začíná. Všimli jste si někdy, že například abyste vstali ze židle, nejprve s ní trochu pohnete a trochu se předkloníte a teprve potom vstanete? nebo že když chceš udeřit raketou, tak ji nejdřív odsuneš a otočíš s ní tělem a teprve potom uděláš ránu?

Takových příkladů je spousta, ale je lepší se podívat:

Abychom se s nimi nedostali do problémů pohyby před akcemi(DPD), analyzovat a pozorovat pohyb lidí nebo zvířat častěji.

Malý dodatek

Obecně na fyziku nikdy nezapomínejte. Hmotnost předmětů, materiály, ze kterých jsou vyrobeny (elasticita, měkkost, tvrdost atd.), to vše je potřeba.

Uvědomte si, že bez toho bude vaše animace mrtvá, hrozná a ošklivá!

Raději na tom pracujte a nikdy nespěchejte.

Dlouhé animace

Oooh, tady začíná zábava!

Často jste při sledování kreslených filmů nebo anime obdivovali animaci a záviděli těm, kteří je umí? Všechny tyto nádherné scény, plastické pohyby a mnoho dalšího. atd.? Upřímně přiznávám – ano. Pokaždé, když se na něco dívám, snažím se pochopit, jak s tím animátoři pracovali? Jak to všechno stvořili?

Ale vzhledem k tomu, že nevím, v jakých programech pracují, snažím se celý proces pochopit pomocí mechanismů Photoshopu.

A víte, já nacházím odpovědi na všechny své otázky!

Ale vezměme vše popořadě.

Proces vytváření dlouhé animace

1. Zpočátku potřebujeme NÁPAD

Například jste se rozhodli natočit krátké video, ve kterém bude tančit několik dívek.

Pokud jste ostřílený animátor, můžete ve svém videu někoho „roztančit“. 3 a další dívky.

Ale na začátku cesty vašeho animátora je lepší omezit se na jednoho nebo dva.

2. Nyní musíte vytvořit scénář scéna po scéně (RPS)

Co to je a s čím se to jí?

Představte si film. Nyní si představte číslo různé typy z různé kamery. Detailní záběr, krajina, kamera sledující postavu...

Je to v pořádku, když jich není tolik. Ale když uděláme celý klip, může jich být víc 30 věci!
Chytří animátoři proto používají tak úžasnou věc, která vypadá jako linkovaná kniha.

V něm zobrazují výjevy.

Pouze někteří kreslí jednu scénu v každé části tabulky, pak další, třetí atd., zatímco jiní kreslí obrázky v každé části tabulky po několika sekundách (omlouvám se, pokud jsem to jasně nevysvětlil).

Je také velmi výhodné, že to můžete udělat na straně popisu, jinak to někdy nakreslíte, pak se na to po chvíli podíváte a nerozumíte - co jsem zde zobrazil?

Takže bereme na vědomí tento scénář pro scény a používáme tyto knihy.
Nemusíte ani dělat knihu, ale prostě tvořit velký soubor ve Photoshopu a nakreslete tam všechny scény.

3. Nyní musíte vymyslet pozadí, koncept postavy a pohyb

Pohyby kreslíme do knihy RPS.

Pokud máte ve videu více než jednu scénu, budete muset nakreslit několik různých pozadí. Nakreslete je do samostatných souborů.
A pamatujte si jednu věc – pozadí se neobjeví jen tak ze vzduchu. Pokud tedy chcete, aby se kamera posunula do strany, mělo by tam být i pozadí. těch. budete muset nakreslit pozadí na délku (nebo šířku, nebo možná oboje) více.

Pak se zamyslete vzhled svou postavu a začněte vytvářet animaci.

Přechod od teorie k praxi

Od této chvíle přemýšlejme trochu o myšlence a obecně o bodu „Proces tvorby animace“. o čem to mluvím? Navíc nyní budete potřebovat morče, kterého donutíte k pohybu. Nebudeme dělat video, ve kterém 4320 rámy. Nejlepší a nejjednodušší způsob, jak pochopit, je vytvořit animaci snímek po snímku pomocí 24 -72 - rámová animace.

No, začněme!

1. tvoříme nový dokument. Pro svou animaci jsem si vzal malá velikost – 400 X 500 px.

2. Nyní, pokud nemáte okno vlevo dole " Animace", podívejte se nahoru, otevřete kartu " Okno» - « Animace».*

* - Příklady používají rusifikovanou verzi Photoshop CS2.

Na snímku nahoře vidíme animační okno, ve kterém je první snímek, pod ním je malý panel, na kterém jsou umístěna tlačítka:

Vždy/jednou- výběrem „Vždy“ spustíte animaci ve smyčce. Pokud zvolíte Once, animace se přehraje pouze jednou. (V mé lekci jsou obě verze animací: smyčková - kde je zobrazen princip DPD, reprodukovaná jednou - kde je zobrazena změna scény).

Vyberte první snímek- nás vrátí na úplný začátek.

Vybere předchozí snímek- Nevolejme Capovi. (=

Přehraje animaci/Zastaví animaci- Přehrát/Zastavit.

Vybere další snímky- další snímek. Vaše čepice!

Snímky animace doplnění- pomocí tohoto tlačítka můžeme přidat plynulé přechody mezi dvěma snímky přidáním nových.

Duplikuje vybrané snímky- ne úplně správný název... Bylo by lepší říct „Přidání nového rámečku“.

Odstraní vybrané snímky- košík.

3. Nyní můžeme začít kreslit. Chcete-li to provést, umístěte pozadí, které jste vytvořili dříve Pozadí(Pozadí/Pozadí).

4. Poté vytvořte nová vrstva(Ctrl+Shift+Alt+N) a nakreslete na něj svou postavu.

4. Nyní přichází ta nejtěžší část: potřebujeme nakreslit stejnou postavu mnohokrát za sebou v různých pózách.

Vytvoříme nový rámec a... Existují dvě možnosti:

A) Buď začnete svou postavu kreslit pokaždé znovu, nebo...

b) Zkopírujte předchozí vrstvu a změňte ji (dokončíte kreslení a mazání, místo použití transformace! Takový nástroj budete potřebovat jen zřídka, napíšu později).

Jakmile získáte nějaké školení v animaci, můžete bezbolestně používat obě možnosti. (Každý z nich si můžete vyzkoušet v samostatném dokumentu).

Možnost A:

1. Nakreslili jsme náš první snímek.

2. Abychom viděli, jak změnit další, snížíme krytí vrstvy na přibližně 30% a vytvoříme novou vrstvu, na kterou nakreslíme králíka pro druhý rámeček.

3. Dokončíme kreslení druhého rámečku a vypneme viditelnost předchozí, první vrstvy.

Možnost B:

1. Vytvořte rámeček s postavou a udělejte tuto vrstvu neviditelnou.

2. Poté ji duplikujte (Ctrl+J) přetažením vrstvy na tlačítko „Vytvořit novou vrstvu“ nalevo od koše.

3. Nyní zviditelníme druhou vrstvu a začneme ji měnit.

Duplikováním předchozí vrstvy tedy vytvoříte nové snímky a změníte je, a ne stejný.

5. Sedíme a kreslíme rámečky 10 -15 ...

6. A podívejme se, co se stalo.

Ukázalo se, že je to běžící králík.

Navíc se nezkopíruje ani jedna jeho část: každý snímek se nakreslí znovu.

Podívej se sám:

Při vytváření animace byste měli pamatovat na to, že je poměrně obtížné přepínat mezi stovkami vrstev, a proto byste neměli malování ani nic měnit na později. Udělejte to hned.

Téměř konec

Výše jsem udělal výhradu k nástroji ().
Vyplatí se jej použít, když například chcete fotoaparát oddálit, přiblížit, otočit atd. (Pokud potřebujete pouze přesunout pozadí, použijte video editory, bude to pro vás jednodušší). Zbytečně nepoužívejte nástroje pro zkreslení, naklonění nebo jiné transformační nástroje.

A poté, co jsme zachránili naše gif-animace jako formát video souboru .avi, můžete například bezpečně přejít na Windows Film StudioŽít.
Odtud dělejte se svým klipem, co si vaše srdce přeje.

A pak můžete nahrát svůj klip na youtube.com a užívat si práci, kterou jste udělali.

VELICE DĚKUJI za pozornost, Lero-art byl s vámi. Omlouvám se za jazykolam, podivnou prezentaci a další nedostatky v lekci, pokud nějaké jsou. Všechny jsou způsobeny tím, že myšlenky jsou zmatené a slova netvoří věty...

Ale doufám, že jste se dozvěděli něco nového a zajímavého pro sebe!

3. Vyhledáme naši složku s připravenými fotografiemi a klikneme levým tlačítkem myši na první fotografii, podržíme klávesu Shift a klikneme na poslední, poté se všechny vyberou. Klepněte na OPEN.

4. Všechny fotografie se otevřou ve Photoshopu. Začneme vytvářet vrstvy, které budeme potřebovat pro animaci resp vytváření gifů obrázky. Otevřel jsem speciálně širokou fotku. A bude to 1. vrstva.

Chcete-li převést fotografii na vrstvu, dvakrát na ni klikněte levým tlačítkem myši.

5. Pro vytvoření druhé vrstvy musíme kliknout na ikonu, na kterou ukazuje šipka. Na druhou vrstvu položíme další fotografii.

6. Šlapeme do našich fotografií, které jsou otevřené vedle první, a vybereme úzkou fotografii. Dovolte mi, abych vám připomněl, že to není nutné... C identické fotografie snadněji pracovat. Takže najdeme požadovanou fotografii, přejděte do nabídky - výběr - vyberte VŠE.

7. Poté začnou kolem obrázku pobíhat malé čárky, toto je výběr. Nyní přejděte do nabídky - úpravy - kopírování.

8. Vrátíme se k naší první fotce, která již má vrstvy, přejdeme do nabídky – úprava – vložení. A naše úzká fotografie se vloží do nové vrstvy. Ale nemůže zůstat tak úzký. Musíme pod něj přidat pozadí. Chcete-li to provést, klikněte na ikonu (1) a přetáhněte vrstvu pod úzká fotka, poté pomocí kapátka (2) vyberte libovolnou barvu kliknutím na fotografii. Vybrala jsem si světle zelenou. A vyplňte novou vrstvu, u které aktivujeme nástroj výplň (3) a poté klikneme levým tlačítkem myši na pracovní pole fotografie. Upozorňujeme, že v tuto chvíli musí být nový aktivní průhledné pozadí. Aktivní vrstvy jsou zvýrazněny modře. Po svých činech průhledná vrstva bude barevný.

9. Nyní potřebujeme sloučit dvě vrstvy (úzká fotografie a pozadí). Krokujeme levým tlačítkem myši na první vrstvu. Podržte klávesu Shift a klikněte na druhou vrstvu. Jsou zvýrazněny modře. Přejděte do nabídky - vrstvy - sloučit vrstvy.

10. Dostáváme tento obrázek.

11. Opakujte kroky 6 - 10 mého tutoriálu a vytvořte vrstvu s další úzkou fotografií. Mám to na vrstvě 2. A vytvořte další novou průhlednou vrstvu, abyste tam umístili poslední širokou fotku (vrstva 3).

12. Postupujte podle bodů 6, 7, 8 lekce. To je vše. Připraveno. Vrstvy pro naše obrázky gif jsme vytvořili.

13. Můžete začít animovat se svými vrstvami, ale rozhodl jsem se vytvořit pozadí pro náš obrázek. Chcete-li to provést, přejděte do nabídky - obrázek - velikost plátna. Naše plátno zvětšujeme o 50 ks na šířku a výšku. Klepněte na tlačítko OK.

14. Máme to takhle.

15. Vytvořte novou vrstvu (já mám vrstvu 4), přetáhněte ji úplně dolů pod všechny fotky, můžete si udělat pozadí stejné barvy jako pozadí na vašich úzkých fotkách. Základní barvu jsem zvolila o něco tmavší.

Svůj substrát můžete ozdobit jakýmkoli způsobem. Doufám, že víte, jak nastavit parametry vrstvy, ale pokud ne, je to jednoduché. Šlápnout dál požadovanou vrstvu a dvakrát na něj klikněte levým tlačítkem myši a otevře se okno s parametry vaší vrstvy a tam si otevřete každý jednotlivý parametr zvlášť a použijete nebo změníte jeho nastavení. Efekt jsem aplikoval v možnostech vrstvy Vnitřní stín a Vnitřní záře s možností vrstvy Násobit... Barva stínu je o něco tmavší než tón pozadí. Ale zde se nezavazuji vnucovat vám svůj názor. Máte svou vlastní vizi. Zkuste to, změňte nastavení. Není to děsivé. Vždy se můžete vrátit k původnímu výsledku, pro který přejdete do nabídky – editace – návrat zpět.

Mimochodem, na mém poslední fotka keř vistárie, je ho ve Francii hodně a doba jeho květu je koncem dubna - začátkem května. Tento keř jsem vyfotil na zahradě u rodičů mého přítele. Na mém bulharském dvoře jsou také keře vistárie a myslím, že nás brzy potěší svými květy, které vypadají jako šeříkové mraky.

16. Nyní je čas umístit své logo, to je zvláště důležité, pokud bude váš obrázek umístěn na vašich webových stránkách. Pro běžní uživatelé to nemusí platit. Dovolte mi, abych vám připomněl, že jsem dělal lekci o photoshopu. Krátce to přejdu: přejděte do nabídky - soubor - místo. Vyhledáme náš soubor PSD s předem připraveným logem, stoupneme na něj a klikneme na tlačítko Umístit.

17. Přetáhněte vrstvu s logem úplně nahoru, jako já. V případě potřeby zvětšete logo na správnou velikost, u kterého přejdeme do menu - editace - měřítko. S upnutým Klávesa Shift roztáhnout nebo zmenšit logo. Aktivujte nástroj „přesunout“ (nejvyšší nástroj se šipkou a + na panelu nástrojů) a přesuňte logo na požadované místo.

Vše je připraveno s tvorbou animace.

17. Hned v prvním snímku animace byste měli mít viditelnou vrstvu pozadí, první vrstvu s vaší fotografií (v mém případě vrstva 0) a logo (pozice 1). Pro přeji příjemné sledování nastavte dobu zpoždění pro vaši fotografii 5 sec(pozice 2). Po určení doby zpoždění a jeho nastavení v prvním snímku budou všechny následující snímky s daný čas 1 rám, tzn. 5 sekund v mém případě. Chcete-li vytvořit druhý rámeček, klikněte na ikonu zobrazenou na pozici 3.

18. Ve druhém snímku změňte viditelnost vrstvy z prvního obrázku na druhý, stejně jako na mém snímku obrazovky.

GIFy jsou všude. Kdysi skromné ​​animované obrázky jsou nyní neoficiálním jazykem internetu. GIF animace je nejvíce rychlý způsob vyjadřovat emoce na Twitteru a můžeme také strávit hodiny jeho sledováním, procházením zpráv na VK, Facebooku nebo Odnoklassniki.

Je toho dost velký počet stránky, kde můžete najít hotové gify na různá témata. Nic však nepřekoná animaci GIF vytvořenou vlastními silami vlastníma rukama. Myslíte si, že je to obtížný proces? Mýlíte se, je to celkem jednoduché. Můžete rychle vytvořit animaci GIF v grafické podobě Photoshop editor, již probíhá konverze existující video nebo pomocí série statických obrázků. Podívejme se blíže na to, jak se to dělá.

Poznámka: Ve všech příkladech v tomto článku používám Photoshop CC 2017.

Jak vytvořit animaci GIF z videa

Nejprve musíte spustit Photoshop, přejděte na „Soubor“ > „Importovat“ > „Video snímky do vrstev“ a vyberte požadovaný záznam videa.

V dialogovém okně, které se otevře, můžete importovat celý záznam videa nebo vybrat pouze jeho určitou část. Pokud zvolíte druhou možnost, přetáhněte úchyty pod oknem náhled pro nastavení počátečního a koncového bodu. Část videa mezi těmito úchyty bude importována.

Poznámka: Mějte na paměti, že co více videí, který importujete, tím větší bude váš GIF. Také pokud importujete video, které je příliš dlouhé, volba Zachovat každé 2 snímky (nebo více) je snadný způsob, jak zmenšit velikost, aniž by to příliš ovlivnilo kvalitu.

Ujistěte se, že je zaškrtnuto políčko Vytvořit animaci snímek po snímku a poté klikněte na OK. Začne proces importu videa. To může nějakou dobu trvat v závislosti na velikosti klipu. Po dokončení importu se otevře pracovní oblast, ve které bude každý snímek videa umístěn do své vlastní vrstvy.

Ve spodní části obrazovky je paleta časových měřítek. Zobrazuje všechny snímky, které budou tvořit vaši animaci GIF.

Můžete přidávat a odstraňovat snímky, jak chcete, nebo upravovat kteroukoli ze stávajících vrstev stejně, jako byste upravovali vrstvy v jakémkoli jiném obrázku. Chcete-li zobrazit náhled animace GIF, jednoduše klikněte na tlačítko Přehrát ve spodní části časové osy.

Konečný výsledek by měl být něco takového:

Vytváření animací GIF ze série statických obrázků

Pokud nemáte videozáznam, který byste mohli použít jako základ pro animaci GIF, můžete jej vytvořit ručně ze série statických obrázků. Je to trochu složitější, zvláště pokud chcete udělat něco cool, ale základní postup je jednoduchý.

GIF vytvoříte z jednoho souboru obrázku obsahujícího více vrstev. Každá vrstva je samostatný snímek vaší budoucí animace. Existují dva způsoby, jak začít:

1. Pokud jste již vytvořili obrázky pro svou animaci, importujte je výběrem Soubor > Skripty > Načíst soubory do zásobníku.... Klikněte na Procházet a vyberte své obrázky a poté klikněte na OK. Každý obrázek bude umístěn na samostatná vrstva uvnitř stejného souboru.
2. Pokud jste obrázky ještě nevytvořili, udělejte to nyní. Pamatujte, že každý samostatný obrázek- to je součást budoucí animace.

Nyní jste připraveni začít vytvářet animaci.

Animace statických obrázků

Zde je návod, jak to funguje. Když ručně vytvoříte snímek animace, bude do něj zahrnuta každá viditelná vrstva. Vrstvy, které jsou zakázány, nebudou zahrnuty do generovaného rámce.

Chcete-li vytvořit první snímek, zviditelněte úplně první vrstvu a vypněte všechny ostatní. Poté při vytváření druhého snímku zviditelněte druhou vrstvu a poté třetí vrstvu na třetím snímku a tak dále. Jakmile začnete, vše bude jasnější.

Chcete-li začít vytvářet animaci, otevřete časovou osu, pokud se vám neotevře automaticky. Chcete-li to provést v horní panel Klikněte na "Okno" a z nabídky, která se otevře, vyberte "Časová osa". Ve středu panelu, který se otevře, klikněte na „Vytvořit animaci snímku“. Tato akce vytvoří první snímek vaší animace. V paletě Vrstvy skryjte vrstvy, které nechcete, aby byly součástí rámečku.

Nyní klikněte na tlačítko Nový rám“, který bude duplikovat předchozí snímek. Znovu skryjte nadbytečné vrstvy a zviditelněte ty, které by měly být zahrnuty do rámečku.

Tento postup opakujte, dokud nepřidáte všechny snímky potřebné pro animaci.

Dokončení

Nakonec nastavte čas zobrazení pro každý snímek. Vyberte první snímek a poté se stisknutou klávesou Shift klikněte na poslední, abyste je vybrali všechny. Nyní klikněte na šipku dolů pod jedním z rámečků a vyberte zpoždění. Žádné zpoždění znamená, že animace poběží rychle, zatímco nastavený počet sekund způsobí, že snímky zůstanou na obrazovce po nastavenou dobu.

Nakonec nastavte možnosti smyčky, které najdete ve spodní části panelu Časová osa. Tento parametr určuje, kolikrát se vaše animace přehraje. Ve většině případů zvolíte možnost „Vždy“.

Nyní klikněte na tlačítko Přehrát ve spodní části obrazovky a zobrazí se výsledná animace. Měli byste vidět něco takového:

Rámečky můžete upravovat tak, že je jednoduše vyberete a změníte viditelnost vrstev (můžete také změnit krytí nebo upravit jiné komplexní nastavení). Přidejte další vrstvy, pokud je potřebujete, nebo je odstraňte kliknutím na ikonu koše.

Až budete s výsledkem spokojeni, můžete přejít do sekce "Ukládání animace" nebo číst dále a výslednou animaci vylepšit.

Vylepšení animace přidáním mezilehlých snímků

Photoshop podporuje výkonnou funkci doplnění animace. To vám umožní vytvořit více plynulé animace, automaticky generuje přechodové snímky mezi dvěma existujícími snímky. V tomto příkladu projdu všechny snímky, abych dodal hvězdné obloze třpytivý efekt.

Chcete-li začít, vyberte první snímek a klikněte na tlačítko Vytvořit vylepšení na panelu nástrojů ve spodní části časové osy.

V dialogovém okně, které se otevře, nastavte položku „Mezilehlé snímky“ na hodnotu „Další snímek“ a pro položku „Přidat snímky“ zadejte hodnotu podle svého uvážení. Více vysoká cena znamená plynulejší, ale pomalejší přechod. Kliknutím na "OK" vytvoříte mezirámce.

Nyní zopakujte tento proces pro další zdrojové snímky, které jste přidali. Až se dostanete k poslednímu, nastavte „Mezi snímky“ na „První snímek“. To pomůže vytvořit hladký přechod na začátek vaší animační smyčky.

Klepnutím na tlačítko přehrávání zobrazíte náhled efektu.

Ukládání animace

Až budete hotovi, nejprve soubor uložte jako soubor „.PSD“. Tím se uloží všechny informace o vrstvě a animaci, takže v případě potřeby můžete animaci později upravit. Poté můžete přejít přímo k ukládání.

Chcete-li vytvořenou animaci uložit, přejděte na Soubor > Export > Uložit pro web ( stará verze)...". V okně, které se otevře, vyberte formát GIF a do pole „Barvy“ zadejte 256. Chcete-li snížit Celková velikost soubor, zmenšete velikost v poli „Velikost obrázku“.

Velikost animace můžete vidět v levém dolním rohu okna náhledu. Pokud je příliš velký, přetáhněte posuvník Odpad doprava. To ovlivní kvalitu, ale výrazně sníží velikost souboru.

Udělejte to animované obrázek gif Photoshop je docela možný i pro začátečníky. Photoshop vám umožňuje vytvářet animaci snímek po snímku změnou snímků a poté dílo uložit jako obrázek gif.

To znamená, že Photoshop nevytváří animaci sám, ale pouze organizuje snímek po snímku prezentaci předem připravených obrázků a vydává je do finálního formátu. Počet snímků v dokončená animace gif může být cokoliv, ale čím větší číslo, tím větší bude velikost souboru. Proto byste se měli vždy snažit snížit počet snímků na minimum. Čím více snímků se však odrazí ve vteřině animace, tím bude plynulejší. Obecně není dobrý nápad zvyšovat počet snímků za sekundu nad 30, protože lidské oko nedokáže rozlišit více snímků za sekundu. Dokonce i ve filmech a videích používají 24 snímků za sekundu.

Při vytváření animace ve Photoshopu byste to měli vzít v úvahu různá zařízení a prohlížeče to umí při různých rychlostech hrát animaci s velké množství snímků za sekundu, v závislosti na vašem technické možnosti. Tak, mobilní telefon, například dokáže přehrávat pouze 10 snímků za sekundu. To znamená, že sekunda animace s 30 snímky bude trvat 3 sekundy, takže se animace zpomalí.

Při výběru počtu snímků za sekundu animace vše závisí na tom, co bude v animaci zobrazeno a na jejím účelu.

Je třeba poznamenat, že počet snímků za sekundu animace gif není konstantní a při vytváření animace se snadno mění. Jednoduše řečeno, je možné určit dobu zobrazení každého jednotlivého snímku. Můžete například nastavit, aby první snímek animace trval jednu sekundu a druhý snímek trval pět sekund.

To je velmi užitečné, když potřebujete podržet určitý rámeček déle, například s textem, aniž byste zvýšili váhu gif soubor. Typicky může mít jednoduchý animovaný obrázek celkem až 10 snímků, obvykle asi 4-6.

Nastavením časování různých snímků může 4snímková animace trvat kdekoli od zlomku sekundy až po minutu nebo déle. Ale i to je třeba mít na paměti dlouhé animace měli byste se také vyhnout - animace není videoklip, některé prohlížeče nečekají na konec animace a začnou ji přehrávat od začátku s okamžitou ztrátou obrázky gif z obrazovky.

Je třeba také věnovat pozornost skutečnosti, že kvalita a barevné podání kresby ve formátu animace gif je obvykle znatelně nižší než v formátu jpg nebo podobné, toto
zvláštnost.

Animace by se také neměla provádět v vysoké rozlišení, způsobí to další zatížení prohlížečů nebo telefonů a s největší pravděpodobností to jednoduše zpomalí rychlost přehrávání. V závislosti na účelu animace může být doporučené rozlišení až 100 - 150 pixelů na šířku nebo výšku. Navíc, čím menší je výška animace, tím větší může být její šířka a naopak. Například rozlišení snímku 400X50 pixelů je přijatelné rozlišení, ale 400X150 je již příliš a hodí se pouze pro speciální účely.

Nejdůležitější věc, kterou musíte věnovat při vytváření animace gif, je její váha. Pro obecné použití na internetových stránkách nebo na zařízeních by velikost animace neměla přesáhnout 400KB. To je maximum.

Obecná doporučení v parametrech animace gif pro obecné účely (avataři, uživatelské panely, podpisy atd.)

Hmotnost- ne více než 400 kB, lepší než 150 kB - 200 kB.
Povolení- celkem ne více než 30 000 pixelů (množství se vynásobí výškou a šířkou, například 400X50 = 20 000).
Plná doba přehrávání- ne více než 15 sekund.
Počet snímků může být cokoliv, pokud váha souboru gif nebo doba animace nepřekročí výše uvedená doporučení, obvykle čím menší, tím lepší.
Počet snímků za sekundu- ne více než 30, v závislosti na potřebě.

Vytvořte animaci Photoshopu.

Photoshop může vytvářet pouze animace počínaje verzí CS3. Chcete-li vytvořit animovaný soubor, musíte si předem připravit potřebné obrázky nebo vytvořit obrázky přímo pomocí Photoshopu.

V našem příkladu použijeme všechny možnosti najednou. Uděláme animaci pro podpis „Avatar“.

Připravená možnost:

Stvoření:

Za prvé, pojďme najít originální obrázky vytvořit animaci:

Nyní pojďme tvořit nový soubor ve Photoshopu. Zadejte šířku 400, výšku 50. Barevný režim- 8 bitů.

Nyní aktivujme okno „Animace“. Okno > Animace. Ve spodní části se objeví speciální oblast pro práci s animací.

Zobrazuje postupně všechny snímky, které jsou v animaci. Zatím existuje pouze jeden snímek, délka 0 sekund, ale vždy můžeme přidat nové. Rámečky lze vždy přeskupit, dokud není obrázek uložen ve formátu gif.

Každý snímek zobrazuje vrstvy, které jsou pro něj viditelné. V animačním režimu pro každý snímek samostatné podmínky viditelnost vrstvy nebo jejích dalších charakteristik, průhlednost, obrys, barva atd.

Pamatujte, že charakteristiky vrstvy pro první snímek platí pro všechny snímky animace. To znamená, že pokud například změníte barvu textu u desátého snímku animace, změní se pouze na desátém snímku, a pokud na prvním, pak na všech snímcích animace najednou.

Naplňte plátno barvou. Vyberte nástroj Výplň (výchozí, písmeno G) a barvu #3a55a4 a vyplňte plátno.

Přidejte původní obrázky na plátno (Soubor > Umístit, nebo je můžete jednoduše přetáhnout ze složky) a změňte jejich velikost.

Když na plátno přidáte nové obrázky, vytvoří novou vrstvu. Právě s těmito vrstvami budeme pracovat v procesu vytváření animace.

Nezapomeňte pravidelně ukládat svou práci, abyste nepřišli o provedené změny. Pokračuj v práci Soubor Photoshopu možné v formát PSD. (výchozí).

Nejprve musíte vytvořit rozložení obrázku a prvního rámečku. Je důležité si uvědomit, že prohlížeče nebo zařízení, která nebudou moci animaci přehrát, ano
zobrazit pouze první snímek. První snímek animace by proto měl odrážet celou její podstatu.

Zobrazte a přesuňte vrstvu animatsiya1 k levému okraji plátna. Chcete-li to provést, vyberte požadovanou vrstvu (animatsiya1) a poté: Upravit > transformovat > převrátit vodorovně. Poté vrstvu pouze přesuneme.

Na prvním snímku nepotřebujeme vrstvu animatsiya2, takže ji musíme skrýt. Pokud vrstvu skryjete, nezobrazí se ve vybraném rámci. Přidejme nějaký text (písmeno T). Také je potřeba změnit barvu textu například na bílou, jinak zcela splyne s pozadím.

Samostatnou vrstvou je také text. První snímek animace je připraven. Vytvoříme druhý rámeček. Přesněji, vytvoříme kopii prvního snímku. Chcete-li to provést, klikněte na znak listu v oblasti animace.

Druhý snímek se vybere automaticky, ale můžeme vybrat libovolný snímek, se kterým chceme pracovat.

Pro druhý snímek skryjeme první vrstvu animatsiya1 a uděláme viditelná vrstva animace2. Také použijte efekt na textovou vrstvu a překreslete ji jinou barvou. Dvakrát klikněte na vrstvu „AVATAR“, Styly > Překrytí barev a klikněte na malé barevné pole. Nastavíme barvu #8fbeff.

Ve výsledku tak nyní vypadá druhý snímek.

Ačkoli Photoshop nevytváří animaci sám, může vytvářet snímky mezi snímky. Mezi naše dva přidáme 5 mezirámců. Chcete-li to provést, musíte vybrat „Vytvořit mezilehlé snímky“ nalevo od tlačítka „Duplikovat snímek“ v oblasti animace. Nejprve je ale potřeba vybrat dva rámečky, mezi kterými se vytvoří mezirámečky. Podržením klávesy Shift můžete vybrat několik snímků najednou.

Přidáme 5 snímků.

Pás animačních snímků se nyní skládá ze 7 snímků. Mezilehlé snímky poskytují plynulý přechod z jednoho snímku do druhého.

Musíte nastavit dobu zobrazení snímku. Nyní všechny snímky nemají čas zobrazení - 0 sekund.

Čas zobrazení snímků lze nastavit hromadně - při výběru více snímků, nebo samostatně pro každý. Nastavíme dobu zobrazení od 1 do 6 až 0,1 sekundy a 7 až 1 sekundu. Chcete-li to provést, klikněte na šipku vedle doby zobrazení snímku.

Připraveno! Pás s rámečky animace je připraven. Lze jej zobrazit přímo ve Photoshopu kliknutím na šipku Přehrát v oblasti animace.

Formát je třeba nastavit na Gif. Všechna ostatní nastavení ovlivňují gif kvalitě animace a její původní váha. Pokud se animace ukáže jako příliš těžká, můžete snížit počet barev například na 128 nebo rovnou optimalizovat animaci na požadovanou velikost souboru. Chcete-li to provést, klikněte na ikonu se třemi pruhy vpravo nahoře, vyberte „optimalizovat podle velikosti souboru“ a zadejte počáteční hmotnost. Samotná animace se optimalizuje na požadovanou hmotnost s minimem možné ztráty kvalitní.

Toto je samozřejmě velmi základní příklad vytvoření animace gif ve Photoshopu, ale ukazuje základy toho, jak se animace vytváří. S experimentováním můžete udělat lepší, podrobnější a krásné animace, ale princip jejich tvorby je stejný.