WordPress-käyttöliittymän valikot

WordPressin hallintapaneelin (dashboard) käyttöliittymä voi aluksi tuntua hieman sekavalta, mutta yleensä sen periaatteet avautuvat käytännön työn kautta. Käyttöliittymän valikot on nimetty jokseenkin loogisesti, joten usein toiminnot alkavat löytyä, kun lukee valikkojen tekstit ja pohtii, mikä niistä liittyy tekemääsi työvaiheeseen. Alla olevassa H5P-demossa pyritään kuvaamaan valikoiden toimintoja ja käyttöliittymän logiikkaa. Käyttöliitymän toimintaa kuvataan vain ensimmäisen tason … Read more

Categories Web Tags

Kuvan pakkaaminen verkkoa varten

Tämän artikkelin tarkoitus on antaa yleiskuva, miksi ja miten kuvaa pakataan verkkoviestintää varten. Käymme myös läpi tärkeimmät tiedostotyypit. Miksi kuvia pakataan Mediatiedostoja pakataan, koska pakkaamaattomat mediatiedostot ovat suuria ja niiden siirtäminen verkossa sellaisenaan olisi hidasta ja rasittaisi yhteyksiä tarpeettomasti. Pakkaamisen periaate on , että laatua huononnetaan siten, ettei ihmisen aistit huomaa eroa. Äänistä pyritään poistamaan … Read more

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 , ,

Näin teet Wix-portfolion

wix-portfolio

Wix.com on julkaisujärjestelmä, jolla voi tehdä omat verkkosivut. Alkuun pääsee ilmaiseksi, mutta aika pian käytön jälkeen on siirryttävä maksavaksi asiakkaaksi, koska oman domainin ja useiden käyttökelpoisten laajennusten käyttö on maksullista. Samankaltaisia palveluja ovat esimerkiksi LiquidBlox, Squarespace ja Weebly. Wixin eduksi on usein katsottu käytön helppous ja heikkoudeksi toimintojen rajallisuus.

Categories Web 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 , ,

Kuvankäsittelyn työvaiheet

Kuvankäsittelyohjelmia on saatavilla pilvin pimein sekä ilmaiseksi että maksusta. Usein kuitenkin käytön alkuun pääseminen on hankalaa, koska ohjelmien tarjoamat mahdollisuudet ovat rajattomia. Kuvankäsittelyn perusteet voi opetella tässä kirjoituksessa esitetyn työnkulun mukaisesti ja poiketa siitä tarvittaessa sitten, kun taidot ovat hieman kehittyneet. Artikkelissa käytän esimerkkinä Adobe Photoshopia. En kuitenkaan otsikoinut artikkelia “Photoshop-ohjeet aloittelijoille”, koska artikkelin toiminnot … Read more