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
![OBLIBENE_TITLE2](/templates/102/gr/print-logo.gif)
Photoshop
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:
![](/old-idif/grafika/images4/pattern_54.gif)
A začněte kreslit vzorky. První bude standardní, jednopixelový.
![](/old-idif/grafika/images4/pattern_55.gif)
Druhý o pixel širší.
![](/old-idif/grafika/images4/pattern_56.gif)
Třetí o dva.
![](/old-idif/grafika/images4/pattern_57.gif)
Č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.
![](/old-idif/grafika/images4/pattern_58.gif)
Takže zvolte nástroj pro obdélníkový výběr, a postupně jeden vzorek po druhém označte ...
![](/old-idif/grafika/images4/pattern_59.gif)
... a z menu Úpravy (Edit) zvolte Definovat Vzorek (Define Pattern).
![](/old-idif/grafika/images4/pattern_60.gif)
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ů.
![](/old-idif/grafika/images4/pattern_61.gif)
![](/old-idif/grafika/images4/pattern_62.gif)
Dokument by mohl vypadat nějak takto:
![](/old-idif/grafika/images4/pattern_63.gif)
Postupně přidáme jeden vzorek za druhým. V paletce vrstev klikněte na ikonku černobílého kruhu, a zvolte Vzorek (Pattern).
![](/old-idif/grafika/images4/pattern_64.gif)
V dialogu vyberte první ze vzorků a potvrďte OK.
![](/old-idif/grafika/images4/pattern_65.gif)
Aby byla vidět pouze černá barva, nastavíme vrstvě interakci na Násobení (Multiply).
![](/old-idif/grafika/images4/pattern_66.gif)
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.
![](/old-idif/grafika/images4/pattern_67.gif)
Následně stačí pouze dvakrát kliknout na náhled vzorku, a zvolit další - o pixel tlustší.
![](/old-idif/grafika/images4/pattern_68.gif)
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ě.
![](/old-idif/grafika/images4/pattern_69.gif)
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).
![](/old-idif/grafika/images4/pattern_70.gif)
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.
![](/old-idif/grafika/images4/pattern_71.gif)
K tomu slouží následující ikonka, nebo zkratka Ctrl + Shift + M. Tu si ale pamatovat opravdu nemusíte.
![](/old-idif/grafika/images4/pattern_72.gif)
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.
![](/old-idif/grafika/images4/pattern_73.gif)
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:
![](/old-idif/grafika/images4/pattern_74.gif)
V paletce animace najdeme tlačítko pro nový snímek a ten vytvoříme.
![](/old-idif/grafika/images4/pattern_75.gif)
V tomto snímku chceme mít zobrazený první vzorek, takže jej zviditelníme kliknutím na oko vedle vrstvy.
![](/old-idif/grafika/images4/pattern_76.gif)
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:
![](/old-idif/grafika/images4/pattern_77.gif)
V tomto snímku také obměníme obrázky - jeden skryjeme a druhý zobrazíme.
![](/old-idif/grafika/images4/pattern_78.gif)
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:
![](/old-idif/grafika/images4/pattern_79.gif)
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.
![](/old-idif/grafika/images4/pattern_80.gif)
První a poslední snímek ale chceme mít zobrazený déle. U nich tedy zvlášť nastavíme čas na cca 2 sekundy.
![](/old-idif/grafika/images4/pattern_81.gif)
![](/old-idif/grafika/images4/pattern_82.gif)
Animace zkontrolujeme - klikem na tlačítka Přehrát (Play).
![](/old-idif/grafika/images4/pattern_83.gif)
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).
![](/old-idif/grafika/images4/pattern_84.gif)
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á):
![](/old-idif/grafika/images4/dog_anim.gif)
Proto můžete malinko experimentovat a přidat i přechod z druhého obrázku do prvního.
![](/old-idif/grafika/images4/dog_anim2.gif)
![](/old-idif/grafika/images4/pattern_85.jpg)
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