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. Voit myös käyttää suoraan tässä kirjoituksessa käytettä png-kuvaa. Tässä esimerkissä animaatiosta tehdää neliön muotoinen banneri, jonka sivut ovat 250 px pitkät.

  1. Avaa SVG-tiedosto komennolla Tiedosto/Avaa (File/Open) ja määrittele kuvan korkeudeksi 250 px ja leveydeksi 1515 px.
  1. Nimeä taso (layer) nimellä spritesheet. Huomaa, että spritesheetissä on 8 vaihetta, joten lopullisessa animaatiossa tulee olemaan 8 ruutua.
  1. Rajaa kuva siten, että näkyviin tulee vain yksi vaihe kerrallaan. Tässä esimerkissä käytämme Kuva/Piirtoalueen koko (Image/Canvas Size) -toimintoa. Kirjoita piirtoalueen leveydeksi 250 px tukipiste vasemmalle laidalle keskelle. Mikäli saat ilmoituksen, jossa varoitetaan, että kuvan aluetta leikataan, hyväksy ilmoitus klikkaamalla Jatka (Continue).
  1. Tee pystysuuntainen apuviiva. Valitse Näyttö/Lisää apulinja, valitse Suunta-kohtaan Pysty ja kirjoita Sijainti-kenttään 125 px. Klikkaa OK. Tämä viiva kertoo sinulle, mihin kohtaan pystyakselilla hahmo tulee sijoittaa.
  1. Tee vaakasuuntainen apuviiva. Valitse Näyttö/Lisää apulinja, valitse Suunta-kohtaan Vaaka ja kirjoita Sijainti-kenttään 230 px. Klikkaa OK. Tämä on animaation maalinja, jonka mukaan voit sijoittaa hahmon.
  1. Tallenna psd-tiedosto tietokoneellesi tai pilvidokumentteihisi valikkokomennolla Tiedosto/Tallenna Nimellä (File/Save As). Valitse tiedostomuodoksi Photoshop. Tiedoston nimen voit valita itse.
  1. Valitse siirtotyökalu (Move Tool) ja siirrä hahmo silmämäärisesti siten, että hahmon jalka koskee vaaka-apuviivaan ja pystyapuviiva on keskellä hahmon kaulaa.
  1. Avaa aikajana-paneeli valikkokomennola Ikkuna/Aikajana (Window/Timeline). Paneeli ilmestyy ruudun alareunaan.
  1. Klikkaa paneelissa olevaa alaspäin näyttävää nuolipainiketta, valitse esiin tulevasta valikosta Luo ruutuanimaatio ja klikkaa sen jalkeen Luo ruutuanimaatio -painiketta.
  1. Valitse animaation kuvan vaihtumisen taajuudeksi 0,2 sekuntia ruudun alareunan nuolesta.
  1. Koska siirsit jo aikaisemmin hahmon oikeaan paikkaan ensimmäistä ruutua varten, voit luoda suoraan animaation toisen ruudun Aikajana-paneelin plus-merkkipainikkeesta.
  1. Siirrä siirtotyökalulla (Move Tool) hahmoa vasemmalle niin pitkälle, että spritesheetin toinen hahmo näkyy. Sijoita hahmo siten, että sen jalka koskee vaaka-apuviivaan ja pystyapuviiva on keskellä hahmon kaulaa.
  1. Toista kohdat 11. ja 12. niin kauan, että sinulla 8 ruutua, joissa ovat kaikki spritesheetin vaiheet omassa ruudussaan.
  1. Tallenna lopuksi gif-animaatio. Valitse ensin Tiedosto/Vie/Tallenna Webiä varten (vanha) (File/Export/Save for Web (Legacy). Valitse seiltä seuraavat asetukset:
    • Tiedosmuoto: GIF
    • Värit: 8
    • Paletin luomisen menetelmä: Aistiperustainen
    • Rasterointi: Diffuusio
    • Läpinäkyvvä: pois päältä
    • Toistoasetukset: Jatkuvasti

Animaatio on nyt valmis. Voit avata animaation raahaamalla sen tiedostonhallinnassa selaimeen. Voit myös exportoida muita tiedostomuotoja esimerkiksi valitsemalla Tiedosto/Vie/Renderoi Video (File/Export/Render Video).

Jaa kirjoitus muille

Leave a Comment