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.
- Avaa SVG-tiedosto komennolla Tiedosto/Avaa (File/Open) ja määrittele kuvan korkeudeksi 250 px ja leveydeksi 1515 px.
- Nimeä taso (layer) nimellä spritesheet. Huomaa, että spritesheetissä on 8 vaihetta, joten lopullisessa animaatiossa tulee olemaan 8 ruutua.
- 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).
- 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.
- 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.
- Tallenna psd-tiedosto tietokoneellesi tai pilvidokumentteihisi valikkokomennolla Tiedosto/Tallenna Nimellä (File/Save As). Valitse tiedostomuodoksi Photoshop. Tiedoston nimen voit valita itse.
- Valitse siirtotyökalu (Move Tool) ja siirrä hahmo silmämäärisesti siten, että hahmon jalka koskee vaaka-apuviivaan ja pystyapuviiva on keskellä hahmon kaulaa.
- Avaa aikajana-paneeli valikkokomennola Ikkuna/Aikajana (Window/Timeline). Paneeli ilmestyy ruudun alareunaan.
- Klikkaa paneelissa olevaa alaspäin näyttävää nuolipainiketta, valitse esiin tulevasta valikosta Luo ruutuanimaatio ja klikkaa sen jalkeen Luo ruutuanimaatio -painiketta.
- Valitse animaation kuvan vaihtumisen taajuudeksi 0,2 sekuntia ruudun alareunan nuolesta.
- Koska siirsit jo aikaisemmin hahmon oikeaan paikkaan ensimmäistä ruutua varten, voit luoda suoraan animaation toisen ruudun Aikajana-paneelin plus-merkkipainikkeesta.
- 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.
- Toista kohdat 11. ja 12. niin kauan, että sinulla 8 ruutua, joissa ovat kaikki spritesheetin vaiheet omassa ruudussaan.
- 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).