Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
-
14. listopadu 2024

Software
Photoshop tutoriál: Diagonální vzorky - pixelová animace
5. října 2007, 00.00 | V pokračování seriálu o vzorcích v Photoshopu si ukážeme využití pixelových vzorků při
jednoduché animaci. Tu pak můžete použít na WWW stránkách nebo jen poslat všem
známým a kamarádům ...
V dnešním článku si ukážeme, jak udělat animaci střídání (přechodu) dvou obrázků. Princip bude jednoduchý - vytvoříme několik pixelových diagonálních vzorků, od nejtenčího po nejtlustší. S nimi vytvoříme X vrstev, přičemž v animaci se budou zobrazovat postupně. Jakmile dojdeme do fáze nejtlustšího vzorku, přehodíme obrázky a celý proces zopakujeme, nicméně naopak. Pokud nechápete, nevadí, hned se všechno dozvíte na konkrétních příkladech.
Začneme - jak už jistě tušíte - pixelovými vzorky. Pokud jste pozorně sledovali minulý výklad, jistě víte, co vás čeká. Vytvořte nový dokument a pozadí vyplňte světle šedou barvou (ať pak dobře vidíte na vzorky). Vytvořte novou vrstvu a v ní vyplňte několik čtverců velikosti 5 x 5 pixelů bílou barvou. Asi tak, jak ukazuje obrázek:

A začněte kreslit vzorky. První bude standardní, jednopixelový.

Druhý o pixel širší.

Třetí o dva.

Čtvrtý o tři. A to je konec. Přidáním další řady už by vzniknul černý čtverec - a to není žádný vzorek, ale prostá jednobarevná plocha.

Takže zvolte nástroj pro obdélníkový výběr, a postupně jeden vzorek po druhém označte ...

... a z menu Úpravy (Edit) zvolte Definovat Vzorek (Define Pattern).

Tím máme vzorky připraveny a obstaráme si nějaké obrázky. Třeba tyto dva. Uložte si je a zkopírujte do nového dokumentu, který bude stejně velký, jako obrázky. Tj. 150 x 200 pixelů.


Dokument by mohl vypadat nějak takto:

Postupně přidáme jeden vzorek za druhým. V paletce vrstev klikněte na ikonku černobílého kruhu, a zvolte Vzorek (Pattern).

V dialogu vyberte první ze vzorků a potvrďte OK.

Aby byla vidět pouze černá barva, nastavíme vrstvě interakci na Násobení (Multiply).

A abychom nemuseli nastavovat tuto interakci každé další vrstvě zvlášť, nebudeme další vrstvu vytvářet přes tlačítko na paletce, ale tuto vrstvu zkopírujeme zkratkou Ctrl + J.

Následně stačí pouze dvakrát kliknout na náhled vzorku, a zvolit další - o pixel tlustší.

A úplně stejně ještě dvakrát. V náhledu vrstvy krásně vidíme, že všechny čtyři vzorky jsou správně po sobě.

Zbývá podklad pro poslední fázi animace - černou plochu, na které se přehodí obrázky. Buď vytvoříme novou vrstvu, kterou vyplníme černou barvou, nebo opět zvolíme vrstvu úprav, tentokrát Barva (Solid Color).

Tu nastavte na černou a potvrďte OK. Všechny vrstvy jsou na svém místě, takže nezbývá nic jiného, než se přepnout do programu ve kterém bude možné obrázek animovat - ImageReady.

K tomu slouží následující ikonka, nebo zkratka Ctrl + Shift + M. Tu si ale pamatovat opravdu nemusíte.

Od Photoshopu se prostředí programu liší jen minimálně. Pro nás je nedůležitější
paletka Animace (Animation), takže pokud ji nemáte zobrazenou,
udělejte to - v menu Okna (Window).
Poznámka: Od Photoshopu verze CS2 je tato paletka součástí Photoshopu, a
tak není nutné do programu ImageReady přepínat.

V paletce animace je vybrán první snímek, a tak nastavíme, co bude na tomto snímku viditelné. Moc toho nebude - vlastně jenom jedna fotka psa. Takže paletka vrstvy bude vypadat takto:

V paletce animace najdeme tlačítko pro nový snímek a ten vytvoříme.

V tomto snímku chceme mít zobrazený první vzorek, takže jej zviditelníme kliknutím na oko vedle vrstvy.

A stejným způsobem vytvoříme i další čtyři snímky. Tři budou obsahovat pixelový vzorek, na posledním bude zobrazená už jen černá vrstva:

V tomto snímku také obměníme obrázky - jeden skryjeme a druhý zobrazíme.

A stejným způsobem vytvoříme zbývající snímky. Postupujeme pouze naopak - jednotlivé vrstvy zneviditelňujeme, až nakonec zbude pouze samotná fotka psa. Zde je zmenšený náhled na všechny snímky:

Zbývá nastavit správné časování. Zatím mají všechny snímky 0 sec., což znamená, že by animace běžela rychlostí, ze které bychom neměli žádný požitek. Proto všechny snímky označíme, klikneme na malou šipečku vedle času a nastavíme čas na 0,1 sekundy, což je optimální pro animaci.

První a poslední snímek ale chceme mít zobrazený déle. U nich tedy zvlášť nastavíme čas na cca 2 sekundy.


Animace zkontrolujeme - klikem na tlačítka Přehrát (Play).

Pokud je vše v pořádku, nastavíme uložení do GIFu (v jiném formátu se animace neuloží) a obrázek uložíme v menu Soubor - Uložit optimalizovaný (File - Save Optimized).

Pokud jste vše dělali podle návodu, měli byste dostat přibližně takovouto animaci. Díky použité technice není soubor nijak závratně velký a je přidána pouze jedna barva navíc (černá):

Proto můžete malinko experimentovat a přidat i přechod z druhého obrázku do prvního.


To je pro dnešek vše. I v dalším díle tohoto seriálu vám přineseme zajímavé ukázky využití diagonálních vzorků.
Autor článku Václav Krejčí se zabývá grafikou a GUI designem, své zkušenosti nejnověji zúročil v knize "Adobe Photoshop: design grafiky GUI", věnované tvorbě grafických uživatelských rozhraní.
Obsah seriálu (více o seriálu):
- Photoshop tutoriál: Diagonální vzorky - základy
- Photoshop tutoriál: Diagonální vzorky - pixelová animace
Tématické zařazení:
-
14. května 2014
Jak vkládat snímky do galerií a soutěží? Stručný obrazový průvodce
-
23. dubna 2014
Konica Minolta přenesla výhody velkých zařízení do kompaktních modelů
-
12. června 2012
-
9. dubna 2014
-
5. ledna 2017
-
6. září 2004
OKI snižuje ceny barevných laserových tiskáren C3100 a C5200n
-
13. května 2004
-
19. ledna 2004
QuarkXPress Passport 6: předvedení nové verze na konferenci Apple Forum 27.1.2004
-
6. února 2001
-
30. listopadu 2014
Nový fotoaparát α7 II: první plnoformát s pětiosou optickou stabilizací obrazu na světě
-
14. října 2024
-
9. ledna 2025
Bubnový scanner na 4000dpi optické rozlišení + PC + software
-
9. ledna 2025
Profesionální scaner Scanner Heidelberg TOPAZ I. optické rozlišení bez interpolace 3800DPI
-
17. ledna 2025
-
21. ledna 2025