WEGA - Webovská grafika 2013

Predmet je zameraný na vytvorenie grafickej prezentácie na internete.

Na prednáškach sa študenti oboznámia s teoretickým zázemím mnohých intuitívne používaných princípov vizuálnej komunikácie a pochopia, ako ľudia vnímajú grafické informácie, alebo ako čítajú web stránky. Získané poznatky študentom pomôžu navrhnúť úspešné webové prezentácie.

Praktická časť predmetu simuluje skutočný svet dizajnéra, ktorého úlohou je vytvoriť webovú prezentáciu fiktívnej značky. Úlohou je navrhnúť logo, dizajn stránky a dizajn microsite. Následne je nutné tento dizajn implementovať a vytvoriť funkčnú web stránku. Web by mal obsahovať aj nejakú pokročilú aplikáciu a 3D model. Vďaka praktickej časti sa študent zorientuje v rýchlo sa rozvíjajúcej oblasti webových technológií, ako napr. HTML, CSS, JavaScript a WebGL.

Cvičenia

1. Týždeň 23.9. - 27.9.
Úvodné informácie o cvičeniach, zadaniach a bodovaní v pdf

2. Týždeň 30.9. - 4.10. - Inkscape - prezentácia v pdf
Bonusová úloha za 0,5 boda: Urobte logo na jednu z nasledujúcich tém:
- Firma zaoberajúca sa tvorbou webov
- Reštaurácia
- Cirkus
Použite pri tom tieto techniky:
- Práca s objektmi a farbami
- Práca s vrcholmi
- Vektorizovanie bitmapy a úprava vrcholov
- Tieňovanie do priesvitna (odlesky alebo tiene) alebo medzi dvomi farbami
- Booleovske operácie
- Filtre alebo textúry
Odovzdávanie na cvičeniach alebo mailom na: uhlikova@sccg.sk do 11.10.2013. Mailom je nutné poslať logo aj v svg formáte.

Návody a tutoriály:

3. Týždeň 7.10. - 11.10. - GIMP - prezentácia v pdf
Bonusová úloha za 0,5 boda:

Zlepte tieto 2 fotky: kone.jpg a pozadie.jpg. Koníkom treba odstrániť pozadie a vložiť ich do druhej fotky (pozadie.jpg). Výsledok by mal vyzerať prirodzene. Pozadie treba preklopiť, aby sedeli tiene. Ďalej treba niečo vyretušovať, niečo rozmazať, doladiť farebnosť jednej a druhej fotky, úmerne zmeniť velkosti, ...

Odovzdávanie na cvičeniach alebo mailom na: uhlikova@sccg.sk do 18.10.2013.
Návody a tutoriály:

9. Týždeň 18.11. - 22.11. - WebGL
3D na webe prezentácia v pdf
WebGL Example
Three.js White Square
Three.js Cube

10. Týždeň 25.11. - 29.11. - Three.js
Knižnica Three.js
- cesta k addonu do Blendra pre export modelov vo formáte .js:
mrdoob-three.js-f396baf/utils/exporters/blender

stemkoski.github.io/Three.js - množstvo príkladov využitia knižnice Three.js

Načítanie modelu prostredníctvom Three.js
Model s animáciou

Bonusová úloha za 0,5 boda:

Vytvorte interaktívnu scénu podľa nasledujúcich inštrukcií:
- stiahnite si nejaký Blender model (najlepšie už aj s preddefinovanou animáciou - napr.: Monkey animation) alebo si vytvorte vlastný model s animáciou
- model z Blendra exportujte vo formáte .js (do Blendra treba pridať vyššie spomenutý addon) aj s "Morph animation"
- exportovaný model načítajte namiesto modelu v príklade z cvičení - animácia by mala fungovať
- pridajte zapínanie a vypínanie animácie reagujúce na klik myšou, ale iba pri kliknutí na objet (Simple Mouse Hovering, Mouse Click)
- do scény pridajte bodové svetlo, ktoré vrhá tiene: Spotlights and Shadow
- zmeňte okolie - použite "skybox" z tohto: príkladu, ale s vlastnou textúrou
Odovzdávanie na cvičeniach alebo mailom na: uhlikova@sccg.sk do 6.12.2013.

Stránka predmetu: wega.sccg.sk

Cvičenia:

Utorok 09:50 v miestnosti F1-248
Streda 11:30 v I-H3
Štvrtok 11:30 v F1-248
Piatok 8:10 v F1-248 - zrušené, ak vám nevyhovuje ani jeden z predošlých troch termínov a chcete prísť na cvičenia, tak mi napíšte mail.

Ak máte záujem o konzultácie, pošlite mi mail s tým, čo chcete konzultovať.

Moja mailová adresa: uhlikova@sccg.sk