Photoshop-animointi: Ruutuanimaatio

Photoshop on tunnetumpi kuvankäsittelyn ominaisuuksistaan kuin animaatio-ohjelmana, mutta ohjelmassa on myös animaation tekoon tarkoitettu Aikajana-paneeli (Timeline panel). Paneelissa on mahdollista tehdä ruutu (frame) kerrallaan piirrettäviä ruutuanimaatioita tai keyframeihin perustuvia aikajana-animaatioita. Tämän ohjeen tavoiteena on antaa yksi käytännön esimerkki GIF-animaation tekemisestä Photoshopilla. Ruutuanimaation tekeminen Tässä esimerkissä käytämme osoitteesta https://freesvg.org/walking-man-figure löytyvää spritesheetia, jota sai kirjoitushetkellä käyttää ilmaiseksi. … Read more

Categories Photoshop Tags , ,

Adobe Animate -animaation tekeminen

Tässä artikkelissa kerrotaan, miten animaatioita voi tehdä Adobe Animatella, mutta monet periaatteet soveltuvat myös muihin animaation tekemisen ohjelmiin.

Adobe Animate on animaatio-ohjelma, jolla voi tehdä esimerkiksi HTML5-bannereita tai mainosanimaatioita videotauluihin. Usein printti- tai verkkomedian puolelta tulevien tekijöiden on ollut helppoa omaksua animaation perusteita Adobe Animaten kautta. Erilaisia animaatio-ohjelmia on ladattavissa runsaasti. Animate on järkevä valinta, jos käyttäjällä on kokemusta Adoben ohjelmista ja etenkin jos Photoshop tai Illustrator on hallussa.

Categories Animate Tags , ,

Classic Tween -animaation tekeminen

Classic tween on Adobe Animaten tweeneistä useimmille helpoin omaksua. Sitä voi käyttää animaatioissa, joissa on suoraviivaisia ja -kulmaisia liikkeitä. Yläpuolella olevaa simppeliä lentokone-animaatiota varten on ensin tehty uusi HTML5-animaatio, jonka stagen koko on 400px 400 px. Tämän jälkeen stagelle on tuotu taustan pilvet ja etualalla liikkuva potkurikone omille layereilleen. Sen jälkeen animaation voi tehdä seuraavissa vaiheissa:  Lisää 20 framea Timelinelle klikkamalla … Read more

Categories Animate Tags , ,

Motion Tween -animaation tekeminen

Adobe Animaten Motion Tween -animaatio soveltuu parhaiten kaareviin liikeratoihin, joissa animoidaan erikseen useita ominaisuuksia. Se on Adobe Animaten tweeneistä monipuolisin, mutta myös vaikein oppia. Yllä näkyvän yksinkertaisen raketin liikkeen voi toteuttaa Motion Tween-animaationa alla kuvatulla tavalla. Sitä varten on ensin luotu uusi HTML5-animaatio, jonka stagen leveys ja korkeus on 500 px. Tämän jälkeen stagelle on tuotu … Read more

Categories Animate Tags , ,

Shape Tween -animaation tekeminen

Shape tween soveltuu animaatioihin, joissa vektorigrafiikan muoto muutetaan joksikin toiseksi. Tästä on käytetty myös morph-animaatio-nimitystä. Muista Adobe Animaten tweeneistä poiketen shape tweeniä käytettäessä animoitavaa grafiikkaa ei tule konvertoida symboliksi, vaan se täytyy muuntaa vektorimuotoon. Alla on yksinkertainen esimerkki, jossa tanssijan hahmo muuttuu R-kirjaimeksi. Animaatiota varten on ensin tehty uusi Animate-tiedosto, jonka stagen koko on 400px … Read more

Categories Animate Tags , ,