Tutorialy.com | internetový časopis o grafice a tvorbě webu

Animovaná ikonka

14.03.2008Komentáře (7) Kategorie: Adobe Photoshop » Animace

V tomto tutoriálu se budu zabývat jednoduchou animací reklamní ikonky. Budeme tvořit plynulé přechody pomocí mezilehlých snímků. Grafické zpracování ikonky nechám na vás. Kromě designu si promyslete texty, či obrázky, které se v animaci budou střídat. Také je důležité to nepřehnat s počtem snímků animace, protože musíme brát ohled na uživatele s pomalejším připojením, kteří by mohli mít problém při načítání stránky.

1. Nejdříve si v Photoshopu vytvoříme základní vzhled ikonky.

2. Dále si připravíme texty, nebo obrázky,které se budou v animaci střídat. Je lepší si dát pozadí a jiné grafické prvky, které budou pro všechny snímky animace stejné, do jedné vrstvy (nebo skupiny), ať se nám s tím líp pracuje. Skryjte všechny vrstvy kromě první vrstvy a pozadí.

3. Nyní si přepneme do Image Ready (Shift+Ctrl+M). V panelu animace duplikujeme snímek s první vrstvou.

4. Necháme si označený právě zduplikovaný snímek, v panelu vrstvy skryjeme první vrstvu a zviditelníme druhou. V každém snímku prostě necháme viditelnou tu vrstvu, která se má zobrazit.

5. Opět duplikujeme snímek, skryjeme aktuální vrstvu a zviditelníme další. Tento postup opakujeme dokud nebudem mít každou vrstvu v jednom snímku.

6. Nyní se pustíme do tvorby přechodů mezi snímky. Označíme si první snímek a klikneme na ikonku mezilehlé.

Nastavte podle obrázku. Pokud chcete animaci plynulejší a pomalejší, nastavte více mezilehlých snímků. Pro náš jednoduchý efekt bohatě postačí 2 snímky.

Mezilehlé vytvoříme u všech snímků animace kromě posledního.

7. U posledního snímku zvolíme mezilehlé s prvním snímkem.

8. Animace je už téměř hotová, zbývá nastavit prodlevy snímků. U přechodových snímků nechte prodlevu 0s a u snímků s textem, nebo obrázkem dejte třeba 2s (časy můžete samozřejmě nastavit podle sebe).