Animovaný GIF výučba

Ako vytvoriť animovaný GIF s GIMP

GIMP je pozoruhodne silný softvér, ktorý považuje za bezplatný. Najmä web dizajnéri môžu byť vďační za svoju schopnosť produkovať jednoduché animované GIF.

Animované GIF sú jednoduché animácie, ktoré sa zobrazia na mnohých webových stránkach a sú oveľa menej sofistikované ako animácie vo formáte Flash , sú veľmi jednoduché na výrobu pre každého, kto má základné znalosti o GIMP.

Nasledujúce kroky ukazujú jednoduchú animáciu veľkosti webového bannera pomocou niekoľkých základných grafiky, nejakého textu a loga.

01 z 09

Otvorte nový dokument

V tomto príklade budem používať GIMP na vytvorenie veľmi základného animovaného GIF webového banneru. Vybrala som si predvolenú šablónu webového bannera spoločného 468x60 . Pre vašu animáciu môžete vybrať predvolenú veľkosť alebo nastaviť vlastné dimenzie v závislosti od toho, ako budete používať svoju konečnú animáciu.

Moja animácia bude pozostávať zo siedmych rámcov a každý snímok bude reprezentovaný individuálnou vrstvou, čo znamená, že môj posledný súbor GIMP bude mať sedem vrstiev vrátane pozadia.

02 z 09

Nastavte prvý krok

Chcem, aby moje animácie začali prázdnym priestorom, aby som nezmenil skutočnú vrstvu pozadia, ktorá je už obyčajne biela.

Je však potrebné vykonať zmenu názvu vrstvy v palete Vrstvy . Pravým kliknutím na vrstvu pozadia v palete a výberom položky Upraviť atribúty vrstvy . V dialógovom okne Upraviť atribúty vrstvy, ktoré sa otvorí, pridám (250ms) na koniec názvu vrstvy. Toto nastavuje čas, ktorý sa bude zobrazovať v animácii. Hodnota ms predstavuje milisekundy a každá milisekunda je tisícina sekundy. Tento prvý snímok sa zobrazí za štvrtinu sekundy.

03 z 09

Nastavte rámec dva

Chcem použiť grafiku stopy pre tento rám, takže idem do Súbor > Otvoriť ako vrstvy a vybrať môj grafický súbor. Takto sa stopa umiestni na novú vrstvu, ktorú môžem umiestniť podľa potreby pomocou nástroja Move . Rovnako ako u vrstvy pozadia, musím premenovať vrstvu na priradenie času zobrazenia rámca. V tomto prípade som si vybral 750ms.

Poznámka: V palete Vrstvy sa zdá , že náhľad novej vrstvy zobrazuje okolo grafiky čierne pozadie, ale v skutočnosti je táto oblasť transparentná.

04 z 09

Nastavte rámčeky Tri, Four a Five

Nasledujúce tri snímky majú viac stôp, ktoré budú prechádzať cez banner. Tie sú vložené rovnakým spôsobom ako rámček dva, používajúc rovnakú grafiku a inú grafiku pre druhú nohu. Rovnako ako pred nastavením času je 750 ms pre každý snímok.

Každá vrstva stopy potrebuje biele pozadie, takže je vždy viditeľný len jeden rámček - v súčasnosti má každý priehľadné pozadie. Môžem to urobiť vytvorením novej vrstvy bezprostredne pod vrstvou stopy, vyplnením novej vrstvy bielou a potom kliknutím pravým tlačidlom myši na vrstvu stopy a kliknutím na položku Zlúčiť nadol .

05 z 09

Nastavte rámec šiestich

Tento rámček je len prázdny rám naplnený bielou farbou, ktorá bude mať za následok vymiznutie konečnej stopy predtým, než sa zobrazí posledný snímok. Nazval som túto vrstvu Interval a rozhodol som sa mať tento displej len 250 ms. Nepotrebujete pomenovať vrstvy, ale môžete s nimi ľahšie pracovať s vrstvovými súbormi.

06 z 09

Nastavte rámec sedem

Toto je posledný rámček a zobrazuje nejaký text spolu s logom.design.info. Prvým krokom je pridať ďalšiu vrstvu s bielym pozadím.

Ďalej používam textový nástroj na pridanie textu. Toto sa vzťahuje na novú vrstvu, ale budem sa s tým zaoberať, akonáhle pridám logo, ktoré môžem urobiť rovnakým spôsobom, ako som už skôr pridal grafickú stopu. Keď som tieto usporiadané podľa želania, môžem použiť zlúčenie nadol pre kombináciu loga a textových vrstiev a potom zlúčiť túto kombinovanú vrstvu s bielou vrstvou, ktorá bola predtým pridaná. Tým sa vytvorí jedna vrstva, ktorá vytvorí posledný snímok a vybrala som to na zobrazenie pre 4000ms.

07 z 09

Ukážka animácie

Pred uložením animovaného GIF má GIMP možnosť prezrieť si ju v akcii tým, že prejdete na Filtre > Animácia > Prehrávanie . Otvorí sa dialógové okno s ukážkou na prehrávanie animácie.

Ak niečo nevyzerá správne, môže byť v tomto bode zmenené a doplnené. V opačnom prípade sa dá uložiť ako animovaný GIF.

Poznámka: Sekvencia animácie je nastavená v poradí, v akom sú vrstvy nalepené v palete Vrstvy , začínajúce od pozadia alebo najnižšej vrstvy a pracujúceho smerom nahor. Ak vaša animácia prehrá sekvenciu, musíte upraviť poradie vašich vrstiev kliknutím na vrstvu a vybrať šípky hore a dole v dolnej lište palety Vrstvy, aby ste zmenili svoju pozíciu.

08 z 09

Uložte animovaný GIF

Uloženie animovaného GIF je celkom jednoduché cvičenie. Najskôr prejdite na položku Súbor > Uložiť kópiu a uveďte príslušný názov súboru a vyberte, kam chcete súbor uložiť. Pred stlačením tlačidla Uložiť kliknite na položku Vybrať typ súboru (podľa rozšírenia) smerom doľava av zozname, ktorý sa otvorí, vyberte obrázok GIF . V dialógovom okne Export súboru, ktorý sa otvorí, kliknite na prepínač Uložiť ako animáciu a kliknite na tlačidlo Exportovať . Ak dostanete upozornenie o vrstvách presahujúcich aktuálne okraje obrázka, kliknite na tlačidlo Orezanie .

To teraz vedie k dialógovému oknu Uložiť ako GIF s časťou Animovaných možností GIF . Môžete ich ponechať na svojich predvolených nastaveniach, aj keď chcete, aby animácia prehrávala raz, mali by ste zrušiť začiarknutie Loop forever .

09 z 09

záver

Tu zobrazené kroky vám poskytnú základné nástroje na vytváranie vlastných jednoduchých animácií s použitím rôznych veľkostí grafiky a dokumentov. Zatiaľ čo konečný výsledok je celkom základný z hľadiska animácie, je to veľmi jednoduchý proces, ktorý môže dosiahnuť každý, kto má základné znalosti o GIMP. Animované GIF sú pravdepodobne za hranicami, no s trochou myšlienok a starostlivým plánovaním sa môžu ešte veľmi rýchlo použiť na výrobu efektívnych animovaných prvkov.