Photoshop tutoriál: Nekonečná animace načítání - Grafika.cz - vše o počítačové grafice

19. října 2007, 00.00 | Internet sebou přinesl krom nepřeberného množství dat a informací také
věčné čekání. Čekáme než se načte stránka, odešle soubor,
nahraje video. Aby při tom všem čekání uživatel neodešel jinam, je potřeba jej
na chvíli zabavit a přitom ho šetrně informovat, že opět bude muset čekat. Jak
jinak než nějakou pěknou animací.

Tento článek vznikl především jako reakce na již dříve publikovaný článek Photoshop tutoriál: Please Wait animace.

Zmiňovaný článek objasňuje princip tvorby daného typu animace, ovšem poněkud zdlouhavým způsobem. Existuje i cesta rychlejší a já jsem zde, abych vám ji prozradil.

Výsledkem dnešní tvorby by měla být animace točícího se tvaru podobná té ze systému Mac OS X. Před započetím práce si rekapitulujme, jaké jsou možnosti animace. Photoshop (resp. ImageReady) umožňuje dopočítávat snímky, přičemž dokáže upravit Polohu (Position), Krytí (Opacity) a Efekty vrstvy (Effects). V naší animace se tedy budeme soustředit na to, aby se animace dala měnit pouze změnou těchto proměnných. Nejprve si ale požadovaný tvar nakreslíme.

Abychom nepracovali na nudném bílém pozadí, umístíme do dokumentu připravenou podkladovou vrstvu. Například tuto:

Dokument zvětšíme na maximum, a v nastavení programu (Ctrl + K) zapneme mřížku na každý pixel. Tj. nastavíme Čáry mřížky po (Gridline every) a Dělení (Subdivisions) na stejou hodnotu. Barvu mřížky nastavíme na nějakou, aby nás nerušila. Např. #3E3748.

Díky předchozímu kroku se nám teď budou tvary zarovnávat přesně na pixel. Zvolíme nástroj Zaoblený obdélník (Rounded Rectangle Tool), nastavíme velký Poloměr (Radius) a nakreslíme první tvar. Takovou čárku:

Nástrojem pro výběr cesty (černá šipka) tento tvar vybereme, zkopírujeme Ctrl + C, vložíme Ctrl + V ...

... a otočíme (Ctrl + T) o 90°.

Na ukázce nám vše krásně vyšlo. Vám se ale může stát, že první tvar nakreslíte o pixel nižší a po transformaci už druhý tvar není přesně zarovnaný (viz následující obrázek vpravo). V tom případě vám nezbývá nic jiného, než tvar nakreslit znovu.

Opět černou šipkou označíme oba dva tvary, zkopírujeme, vložíme, a otočíme o 30°.

Poté ještě jednou vložíme, otočíme o -30° a základ tvaru je hotov.

Potřebujeme pouze krajní část tvaru, takže od tvaru odečteme kruh. Nejprve zvolíme Elipsu (Ellipse Tool), nastavíme styl kreslení na odečítání (viz ikonka na obrázku).

A kruh nakreslíme.

Tvar pro animaci je kompletně hotový, a tak se podíváme, jak tu animaci vlastně vyřešíme. Skrývat vrstvu nebo ji posouvat by nám nijak nepomohlo, proto se pokusíme udělat animaci za pomocí efektů vrstvy.

Vyvoláme požadovaný dialog (kliknutím dvakrát na vrstvu) a stáhneme krytí výplně na 0 %. Nebude vidět nic.

Přidáme efekt vrstvy Překrytí přechodem (Gradient Overlay), nastavený na přechod z růžové do průhledné, a Styl: Úhlový (Style: Angle). Úhel (Angle) nastavte tak, aby byl vidět na 100 % jeden celý dílek.

A jsme připraveni na animaci. Takto jednoduchým způsobem máme vytvořený tvar s efektem, který půjde velice jednoduše animovat. Samozřejmě použitý způsob má své mouchy, např. nemožnost přidání záře. Ta by se totiž vykreslila (jak ukazuje obrázek) okolo celého tvaru, ne jen okolo viditelných částí. Ale my teď záři nepotřebujeme.

Abychom mohli dokončit animaci, přepneme se do programu ImageReady.

Zde vytvoříme nový snímek.

Vyvoláme efekty vrstvy a pootočíme přechod.

Z menu paletky vybereme funkci Mezilehlé (Tween) ...

Vybereme počet snímků k dopočítání, a potvrdíme OK.

Zkontrolujte, zda je vše v pořádku - na každém snímku by měl být viditelný vždy jeden dílek na 100 %.

Pokud tomu tak je, znovu vytvořte nový snímek a otočte efekt vrstvy na dílek před dílkem z prvního snímku.

A přes stejnou funkci nechte dopočítat mezisnímky. Pro rychlou kontrolu se podívejte na počet snímků - měl by odpovídat počtu dílků na kolečku, tj. 12. Důvod, proč jsme museli tvořit animaci na dvakrát je ten, že otočením efektu o 360° by program nic nezaznamenal, a myslel by si, že se nic nestalo. Museli jsme proto jít vždy po půlce. Stále to ale bylo rychlejší, než tvořit každý snímek zvlášť.

Nakonec označte všechny snímky a nastavte prodlevu na 0,1 sekundy.

Poté zkontrolujte, zda je nastaven formát GIF.

A animaci exportujte v menu Soubor - Uložit optimalizovaný (File - Save Optimized).

Zde je náhled na výslednou animaci.

A zde na animaci, která je sice té minulé velmi podobná, ale musela vzniknout úplně jiným způsobem. Protože (jak jsme si ukázali dříve), na minulý tvar nešla "nabalit" záře, musela být tato animace tvořena snímek po snímku.

Pro vás ale práce ještě vůbec nekončí. Zkuste si i jiné tvary. Dílky více vzdálené ...

... dílky větší ...

... tečky ...

... větší tečky ...

... nebo kombinace výše uvedeného.

Zde máte pro inspiraci poslední animaci, a dál už je to jen na vás. Hodně štěstí při práci.

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í.