Detail kurzu

Tvorba animácií v Google Web Designer - animované bannery a animácie v HTML5 pre marketing a web stránky

IT LEARNING SLOVAKIA, s.r.o.

Popis kurzu

Rozšírenie a obľuba smartfónov a tabletov poslali známu technológiu Adobe Flash, ktorá rozhýbala web stránky, do histórie. Firma Adobe dala prioritu iným grafickým projektom a Flash na mobilných zariadeniach už nefungoval. Nový produkt Adobe Animate, ktorý ako klon Flashu ponúka animačné možnosti, však popularitu Flashu nedosiahol a navyše je spoplatnený. Google Webdesignér je profesionálny, zato veľmi jednoduchý nástroj na ovládanie ...a navyše je zadarmo. Google Web Designer (GWD) dáva silu vytvárať krásny a pútavý obsah pomocou HTML5 tak, že nemusíte byť programátor a HTML5 nemusíte ovládať. Umožňuje animovať pomocou jednoduchých scén v rýchlom režime alebo pomocou vrstiev na časovej osi v rozšírenom režime, pričom má používateľ plnú kontrolu nad animáciou. Google Web Designer umožňuje spôsobom „drag and drop“ vkladať komponenty ako sú galérie obrázkov, video prehrávače, mapy a ďalšie do vášho projektu a okamžite tak pridávať funkcie. Použite animačné a interaktívne prvky na oživenie svojej tvorivej vízie a užívajte si bezproblémovú integráciu s inými produktmi Google, ako napríklad Disk Google, Display & Video 360 a Reklamy Google Ads. GWD podporuje širokú škálu formátov zobrazení a videoreklamy priamo určených pre uplatnenie na súčasných reklamných platformách. Výstupy GWD je možné publikovať nielen na webstránkach, ale aj ako hotové spustiteľné aplikácie pripravené na prezentovanie. Počítačový kurz Google Web Design I - animácie a ich design nielen na web stránkach poskytuje prehľadné základy práce s aplikáciou Google Web Designer - moderným nástrojom pre tvorbu animácií, reklamných bannerov, hier alebo iných aplikácií. Naučíte sa na ňom tvoriť a manipulovať s 3D obsahom pomocou CSS3. Hýbať a otáčať objekty a 2D návrhy podľa ľubovoľnej osi, vizualizovať 3D transformácie. Vytvárať pútavé, interaktívne návrhy založené na HTML5, CSS3 a JavaScripte i pohyblivú grafiku, ktoré môžu bežať na akomkoľvek zariadení, a to všetko bez rozsiahlych znalosti programovania. Či ste už dizajnér, vývojár alebo nadšenec nových technológií - objavte nástroje, ktoré potrebujete: úplnú sadu návrhov a pre šikovných a znalých programovania aj možnosť priamo upravovať HTML, CSS a JavaScript. Kurz je vhodný aj pre záujemcov - animátorov, ktorí chcú vytvárať dynamické a interaktívne animácie a reklamné banery od úplného začiatku. Ak chcete tvoriť pohyblivé obrázky a dynamický webdizajn, nikdy to nebolo lacnejšie a jednoduchšie.

Obsah kurzu

===Úvod do práce v programe Google Web Designer (GWD)=== · Predstavenie GWD, jeho história a použiteľnosť · Výhody, nevýhody použitia · HTML a CSS v animácii · Vytvorenie a nastavenie nového dokumentu v GWD · Oboznámenie sa s prostredím aplikácie · Aktualizácie · Dva postupy pri realizácii zadania ===Práca s grafikou=== · Rozdiel medzi vektorovou, rastrovou a kódovanou grafikou · Grafika v GWD (rastrovaná, kódovaná) · Importovanie obrázkov · Používanie vrstiev · Organizácia obsahu vrstiev a položiek Library v adresároch · Návrh a kreslenie tvarov, ich kódovanie · Zoznámenie sa s jednotlivými grafickými nástrojmi a krátky prehľad klávesových skratiek · Práca s farbami a používanie farebných efektov · Vysvetlenie možnosti symbolov · Využitie obrázkov ako symbolov · Dátová optimalizácia obrázkov · Vytvorenie jednoduchého statického banneru ===Efektívne používanie textu=== · Použitie nástrojov na prácu s textom · Rozdielne typy textových polí (input, static, dynamic, HTML) · Manipulácia s typmi písma, výber externých typov · Najvhodnejšie nastavenie parametrov textu ===Práca s animáciami=== · Úvod do animácií · Využitie šablón · Práca s časovou osou · Vytváranie "frame-to-frame" animácie (po snímkach) · Tvorba pohybu za pomoci "motion" - rozdiel medzi classic a motion - linear - ease - ease out - easy in - easy in out - step end/start · Ďalšie efekty pre prácu s animáciami - zmena tvaru - úprava farby · Animovanie statického bannera · WAU efekty (bubliny, sneh, blesk, spinka,...) · Použitie videa ako súčasť animácie ===Základy JavaScriptu pri interaktívnej animácii=== · Príklady z webu (Google Anniversary) · Práca s jazykom JavaScript · Základná syntax jazyka · Ukážka využitia JavaScriptu · Použitie JavaScriptu pre nastavenie správania sa tlačidiel · Nastavenie akcie pre jednotlivé časti interaktívnej animácie ===Vytvorenie grafického interaktívneho prvku=== · Vytvorenie tlačidiel · Zadefinovanie správania sa tlačidiel · Spustenie a testovanie funkčnosti ===Možnosti publikovania HTML5 animácií=== · Nastavenie publikovania · Možnosti exportu · Publikovanie na web stránke (rady a nápady) · Tvorba HTML kódu potrebného pri publikácií na webstránku ===Praktické príklady použiteľné v praxi=== · Kritériá publikovania na webe · Použitie XML · Animácie a interaktívne animácie · Rôzne typy webových bannerov · Klikacie bannery (ako a prečo nastaviť clickTag) · Efektné fotogalérie ===Záverečná diskusia===
Hodnotenie




Organizátor