WV-H10 - Mockup, Inkscape
WV-H10.1 - Mockup
Tässä harjoituksessa olisi tarkoitus lähteä suunnittelemaan ja toteuttamaan muutaman näkymän interaktiivista mockuppia omasta tulevasta loppuharjoitustyöstä. Ei haittaa vaikka lopputyöstä tulisikin erilainen mitä itse suunnitelmasta. Tärkeintä on oppia käyttämään mockup-työkalua ja mobile first suunnittelutapaa.
Toteuta siis Figmalla (tai Sketch, Adobe XD) vähintään kolmen ikkunan prototyyppi lopputyöstäsi mobiilikoossa. Alla on videodemo Figman käytöstä. HUOM: Video on toiselle kurssille tehty ja siellä puhutaan jonkin verran kyseisen kurssin tehtävänannosta. Tämä ei koske meitä tällä kurssilla!
Prototyypin näkymistä pitäisi päästä toiseen käyttäen interaktiivista nappulaa! Voit tehdä mistä tahansa elementistä nappulan joka siirtää näkymästä toiseen. Tämä on prototyyppityökalujen voimakkain ominaisuus joka tekee niistä erittäin tehokkaita prototyyppaykseen!
Palauta Optiman palautuslaatikkoon tekstitiedosto joka sisältää linkin ajettavaan preview-versioon prototyypistäsi. Tämä linkki pitäisi löytyä Share-nappulan alta.
WV-H10.2 - SVG ja Inkscape
Tässä harkassa opettelemme mitä hyötyjä vektorigrafiikasta on, kuinka se toimii webbiselaimessa ja kuinka voimme tehdä yksinkertaista vektorigrafiikkaa Inkscapella.
SVG
SVG (Scalable Vector Graphics) grafiikka on nimensä mukaisesti skaalautuvaa vektorigrafiikkaa. Se perustuu XML:ään, ja sitä voidaan hallita CSS:llä (esim. animaatiot ja media queryt). Nykyselaimet tukevat SVG:tä jo hyvin, joten ei ole paljoa syitä olla käyttämättä SVG-grafiikkaa silloin kun se tarkoitukseen sopii.
Vektori- ja rasterigrafiikka (opettaja saattaa sanoa pikseligrafiikka) eroaa toisistaan siten, että vektorigrafiikka on skaalattavissa postimerkistä kerrostalon seinälle - kun taas rasterigrafiikka ei. Jos otat 400x400 kokoisen jpg-kuvan netistä ja venytät sen koko näytön kokoiseksi, tulee kuvasta epäselvää muhjua ja ääriviivat katoavat.
*
Vektorigrafiikka toimii kun esitettävä asia on yksinkertaisia ja suht teräviä muotoja (esim. logot, nappulat, kuviot yms) kun taas rasterigrafiikkaa joudutaan käyttämään esimerkiksi valokuvissa.
Koska SVG grafiikka perustuu XML-formaattiin, eli tekstiin, sen saa pakkaamalla erittäin pieneksi. Tälle tuskin on kuitenkaan tarvetta sillä SVG-kuvat ovat tyypillisesti rasterikuvia pienempiä.
Eräs erittäin oleellinen seikka verrattuna rasterigrafiikkaan on se että koska SVG on tekstipohjaista, SVG:tä voidaan myös kirjoittaa "käsin" tai koodin avulla. Tämä voi olla hyödyllistä esimerkiksi käyttöliittymäelementtien piirrossa ja interaktiivisissa sovelluksissa.
Tästä on hyvä video:
*By Yug, modifications by 3247 - Unknown, CC BY-SA 2.5, https://commons.wikimedia.org/w/index.php?curid=1183592
Inkscape
Inkscape on vapaan lähdekoodin ohjelma vektorigrafiikan tekoon. Se on vapaan lähdekoodin ohjelmaksi yllättävän tehokas verraten esim. Adobe Illustratoriin! Se on ilmaiseksi asennettavissa useille eri alustoille.
Inkscapessa (ja esim. Illustratorissa) hienoa on se, että yhden työkalun opittua toimii samat periaatteet kaikkiin muihinkin työkaluihin. Ehdottomasti hyödyllisin työkalu jota vektorigrafiikan teossa käytetään on Bezier Tool jolla piirretään muotoja joita voidaan muokata jälkeenpäin.
Meidän yhteisessä Inkscape-harkassa käydään käyttöliittymä nopeasti läpi ja lähdetään harjoittelemaan suoraan Bezier Toolin ja Path Editor työkalun käyttöä. Erittäin hyvä tapa on myös muistaa Groupata ja tehdä paljon kopioita työstään!
Alla video jossa käydään läpi Inkscapen perus käyttöliittymäelementit ja pari työkalua:
Inkscapen huono puoli on, että raa'an SVG-datan ulos saanti on hieman mutkikasta verrattuna Illustratoriin. Meidän on paras käyttää inline-svg:tä webissä, varsinkin jos halutaan tehdä muutoksia dynaamisesti. Täällä on ohjeita siihen: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html
WV-H10.2 Inscape harkka
Tässä harkassa tarkoitus olisi lähteä toteuttamaan yksinkertaista vektorigrafiikkaa ja exporttaamaan se inline-svg-grafiikaksi. Käytä lähtökohtaisesti jotain tutoriaalia täältä: https://www.gamasutra.com/blogs/ChrisHildenbrand/20111015/90415/2D_Game_Art_For_Programmers__Part_1_updated.php
Suosittelen tuota ensimmäistä jossa tehdään oranssi naama. Teimme tämän viime vuonna yhdessä kun kurssilla oli vielä kontaktitunteja.
Voit myös etsiä jonkun aivan oman tutoriaalin, mutta hyväksytä se opettajalla ensiksi. Tärkeätä olisi oppia käyttämään vektorigrafiikkaohjelman perusmuotoja, niiden päällekkäin latomista ja grouppaamista, skaalaustyökaluja yms. Jos sinulla on harrastuneisuutta ja kokemusta esim Adobe Illustratorista, niin voit tehdä vaan suoraan jotain jossa näitä ominaisuuksia käytät. Bezier Curve työkalu olisi erittäin hyvä asia opetella myös.
Kun olet saanut jonkinlaisen vektorikuvan aikaiseksi, pitäisi se vielä onnistua exportamaan inline-muotoisena SVG:nä. Usein SVG-koodia joutuu tekstieditorissa vielä rivistää nätimmäksi. Tämän takia tuo ylläoleva tutoriaali on aika hyvä yksinkertaisuudessaan.
Muista SVG-grafiikka lopputyössäsi! On hienoa jos voit toteuttaa itse grafiikkaa sivullesi, ja vielä hienompaa jos voit animoida sitä jotenkin!
Palauta Optima-kansioon linkki webbisivulle jossa on SVG-kuvasi inline-koodina syötettynä.
Linkkejä itseopiskeluun
- https://www.w3schools.com/graphics/svg_intro.asp
- https://developer.mozilla.org/en-US/docs/Web/SVG
- https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
- http://www.2dgameartguru.com/