Kuinka luoda animoitu gif Photoshopissa. Kuinka tehdä Gif-animaatio Photoshopissa. Sähköposteissa

Ohjeet

Luo sisään Adobe Photoshop asiakirja, jonka perusteella GIF-animaatio luodaan. Paina Ctrl+N tai valitse "Avaa..." päävalikon Tiedosto-osiossa. Syötä asiakirjan parametrit näkyviin tulevaan valintaikkunaan ja napsauta OK. Jos animaatiokehykset perustuvat kuvaan, piirrä se tai lisää se siitä ulkoinen tiedosto.

Lisää uusia tasoja dokumenttiin. Niiden lukumäärän tulee olla yhtä suuri kuin animaatiokehysten (tai avainkehysten, jos siirtymät niiden välillä on tarkoitus luoda automaattisesti) lukumäärä. Kopioi nykyinen taso valitsemalla valikosta Taso ja "Duplicate Layer...", jos kehysten pitäisi perustua aiemmin luotuun kuvaan. Tai lisää tyhjiä tasoja painamalla Ctrl+Shift+N.

Luo kuva jokaisesta animaation kehyksestä. Vaihda tasojen välillä johdonmukaisesti ja tee tarvittavat muutokset (lisää tarvittavat tiedot, siirrä kuvaosia, syötä tekstiä jne.). Kun työskentelet, poista kaikkien nykyisen yläpuolella olevien tasojen näkyvyys käytöstä. Analysoidaksesi eroja edelliseen kehykseen, voit väliaikaisesti tehdä tasosta puoliläpinäkyvän muuttamalla Opacity-arvoa.

Aktivoida työtilaa ohjata animaatiota. Valitse päävalikosta Ikkuna, Työtila, Video ja elokuva, napsauta pyyntöikkunassa Kyllä. Tämän jälkeen valikon koostumus muuttuu ja Animaatio-paneeli tulee näkyviin.

Lisää animaatiokehyksiä. Napsauta Animaatio-paneelissa Kopioi valitut kehykset -painiketta. Tee näin, kunnes näytettyjen kehysten määrä on yhtä suuri kuin toisessa vaiheessa luotujen tasojen lukumäärä.

Yhdistä tasot kehyksiin. Valitse elementti numero 1 Animaatio-paneelista napsauttamalla sitä hiirellä. Poista Tasot-paneelista kaikkien tasojen näkyvyys, paitsi se, jonka haluat näyttää ensimmäisessä kehyksessä. Suorita johdonmukaisesti samanlaisia ​​toimia kaikille Animaatio-paneelissa näytetyille tasoille ja elementeille.

Määritä animaation tulostusasetukset. Valitse kaikki kehykset Animaatio-paneelista. Voit tehdä tämän napsauttamalla niitä hiirellä samalla, kun painat niitä Ctrl-näppäin. Napsauta hiiren kakkospainikkeella minkä tahansa valitun elementin alaosaa. SISÄÄN kontekstivalikko valitse viive kehysten vaihdon välillä. Muuta tarvittaessa animaation toistojen määrää napsauttamalla paneelin vasenta alakulmaa painiketta (sillä on alaspäin osoittavan nuolen muodossa oleva kuvake).

Alkaen versiosta CS3 Extended, työskentely animaation kanssa on saatavilla. Gifit luodaan kehyksistä tai suoraan videoista. Luotko siis itse dynaamisen kuvan verkkosivustolle, avatarille tai esitykselle? onnittelukortti. Samanlaista grafiikkaa voidaan käyttää muissa projekteissa tai editoinnin aikana. Opi tekemään animaatioita Photoshopissa, jotta voit työskennellä vapaasti tämän tyyppisten kuvien kanssa.

Adobe Photoshopissa on monia ominaisuuksia, mukaan lukien animaatioiden luominen

Sinun ei tarvitse olla taiteilija tai suunnittelija tehdäksesi tämän. Kaikki toiminnot ovat selkeitä jopa aloittelijalle. Tarvitset vain alkusarjan kehyksiä, joista luodaan gif-tiedosto.

Animaatio videosta

Helpoin tapa on muuntaa video animaatioksi. Sinun ei tarvitse määrittää mitään. Sinun tarvitsee vain avata video Photoshopissa. Apuohjelma havaitsee avi-muodot, mov, mp4, mpg, mpeg, m4v. QuickTime on asennettava, jotta ne toimivat oikein. Tällä tavalla lisättyä mediatiedostoa ei voi muokata tai leikata. Muunna se vain grafiikaksi.

Mutta on toinenkin menetelmä. Näin voit tehdä gifin elokuvasta Photoshopissa:

1. Siirry kohtaan Tiedosto - Tuo.
2. Napsauta Video Stills to Layers.
3. Valikko avautuu, jossa on joitakin asetuksia. Oikealla on minisoitin esikatselua varten.
4. Valitse Alue-ruudussa yksi vaihtoehdoista: Alusta loppuun tai Vain valitut. Toisessa tapauksessa valitsemasi videon osa lisätään. Katkaista tarvittava fragmentti, siirrä mustat merkit soittimen alle. Niiden välissä oleva kappale lisätään projektiin.
5. Photoshopiin voidaan ladata enintään 500 kehystä. Jos työstettävä materiaali on tätä arvoa suurempi, se on leikattava tai lisättävä osiin eri asiakirjoihin.
6. Valitse "Luo kehys kehykseltä animaatio" -valintaruutu. Tämä koskee automaattisesti kaikkia tarvittavat asetukset. Ilman tätä dynamiikka on asetettava manuaalisesti.
7. "Säilytä jokainen [numero]" -vaihtoehdon avulla voit tuoda ei kaikkia dioja, vaan esimerkiksi joka kolmannen. Tuloksena oleva GIF on katkonainen.
8. Vahvista toimenpide ja odota, kunnes apuohjelma käsittelee videon.
9. Siirry kohtaan "Ikkuna - Työympäristö" ja valitse "Liike". Tämä asetussarja sopii parhaiten animoitujen kuvien luomiseen.
10. Alla tulee olemaan jonkinlainen mediasoitin. Se ilmaisee kuvanopeuden. Siinä on Play-painike, kelaus taaksepäin ja videoraidan zoomaus. Kaikki kuvat näytetään yksitellen.
11. Ne myös jaetaan tasoihin, joiden luettelo sijaitsee Photoshop-ikkunan oikeassa alakulmassa. Napsauta yhtä niistä työstääksesi erillisen dian.
12. Voit poistaa joitain kehyksiä tai muokata niitä.
13. Kaikki kuvat ovat yhdellä alueella. Tämä ei ole kovin kätevää. Voit poistaa tason näkyvyyden käytöstä napsauttamalla sen vieressä olevaa silmäkuvaketta. Dia pysyy dokumentissa ja näkyy tarvittaessa GIF-animaatiossa. Saat sen näkyviin uudelleen napsauttamalla paikkaa, jossa "silmä" oli.
14. Jos haluat kokeilla erilaista visualisointia (vesivärejä, lyijykyniä, neonvaloja), napsauta valikkorivillä "Suodattimet".
15. Lisäämistä varten Photoshop tehosteet(hehku, varjo, liukuväri, kuvio), napsauta tasoa hiiren kakkospainikkeella ja valitse Sekoitusasetukset.
16. Voit vaihtaa dioja vetämällä niitä kohdistimella.
17. Voit valita kehyksen näyttöajan (tai viiveen) napsauttamalla sen alla olevaa pientä mustaa kolmiota.

Animaatio kuvista

Näin luot animaation Photoshopissa kuvien avulla:

1. Liitä vaaditut kuvat. Lisää jokainen niistä omalle tasolleen (poista "Tausta" -niminen taso).
2. Yleensä kuvat avautuvat ikkunoissa tai välilehdissä (asetuksista riippuen Photoshop käyttöliittymä). Yhdistää ne yhdeksi työ alue, kopioi ne sinne tai siirrä ne. Ne lähetetään automaattisesti uusille tasoille.
3. Siirry kohtaan Ikkuna - Työtilat - Liike. Animaatiopaneeli soittimella on aktivoitu.
4. Valitse taso, jonka haluat olla ensimmäinen kehys GIF-tiedostossasi.
5. Tee jäljellä olevista arkeista näkymättömiä napsauttamalla niiden vieressä olevaa silmäkuvaketta.
6. Napsauta soitinpaneelin oikeassa alakulmassa olevaa "Muunna animaatioksi" -painiketta. Se näyttää suorakulmiolta, joka on jaettu kolmeen osaan.
7. Siellä on yksi kehys, jossa on valitsemasi taso. Kopioi se. Voit tehdä tämän napsauttamalla pientä "Luo kopio" -painiketta.
8. Tee tarvittava määrä dioja.
9. Tuloksena oli gif-animaatio yhdestä kuvasta. Korjaa tämä napsauttamalla toista kehystä ja tekemällä näkyy kakkosena kerros poistamalla "silmän" ensimmäisestä. Haluttu kohde tulee näkyviin.
10. Täytä siis diat yksitellen.

Jos luot suuren asettelun, tämä menetelmä vie paljon aikaa. Tässä tapauksessa voit tehdä seuraavaa:

1. Animaatiotyökalussa oikeassa yläkulmassa (itse paneelissa, ei päällä Photoshop-ikkuna) on painike, joka näyttää luettelolta, jossa on nuoli. Klikkaa sitä.
2. Valitse näkyviin tulevasta valikosta "Luo kehyksiä tasoista".

Kuvien kanssa on käytettävissä samat toiminnot kuin videodioilla.

Tallennetaan GIF-animaatiota

On myös tärkeää selvittää, kuinka animaatiota voidaan tallentaa Photoshopissa. Jos suunnittelet sen psd-tiedostoksi tai "staattiseksi" kuvaksi jpg laajennus, bmp, png, siitä ei ole mitään hyötyä. Liikkumisen, muuntamisen tai välkkymisen sijaan saat yhden jäädytetyn kehyksen. Jos haluat tehdä joukon vaihtuvia kuvia, sinun on muunnettava asiakirja GIF-muotoon.

1. Kun olet lopettanut Photoshopin työskentelyn, älä kiirehdi sulkemaan sitä ja muuttamaan sitä PSD-projektiksi.
2. Siirry kohtaan Tiedosto - Tallenna nimellä. Tai paina Shift+Ctrl+S.
3. Anna luomukselle nimi ja määritä kansio, johon haluat sijoittaa sen.
4. Valitse avattavasta Tyyppi-luettelosta CompuServe GIF.
5. Vahvista toimenpide.

Se on tarpeeksi helppo ymmärtää Photoshop sovellus kuinka tehdä animaatiota. Vaikka et ammattimainen web-suunnittelija, voit luoda samanlaisen kuvan. Saat ainutlaatuisen taideteoksen, joka on koottu omin käsin.

Tervehdys ystävät! Joskus törmään kysymykseen, onko mahdollista tehdä animaatiota Photoshopissa? Joten tällä oppitunnilla näytän, että tämä on mahdollista ja ettei se ole ollenkaan vaikeaa. Tämän jälkeen ymmärrät, että sinun ei tarvitse ladata ja asentaa ohjelmia itsellesi, jos sinun on yhtäkkiä tehtävä animoitu banneri tai jokin muu animaatio. Ja usko minua, se on hyvin yksinkertaista. Tehdään esimerkkinä oma yksinkertainen esilataaja tai, kuten kommenteissa oikein mainittiin, puskuri. Ja niin, ryhdytään töihin!

Avaa Photoshop ja luo 9x9 pikselin tiedosto.

Suurennamme pienen neliön suuremmaksi (Z-näppäin). On olemassa useita tapoja suurentaa. Napsauta ensin hiiren kakkospainikkeella kuvaa avattavasta valikosta ja valitse Sovita näytölle. Toiseksi, napsauta vain useita kertoja, kunnes kuva on suurentunut maksimiarvoonsa, ja kolmanneksi, mielestäni yksinkertaisin, napsauta vasenta yläkulma kankaalle ja pitelee vasen nappi hiirtä, liikuta sitä alas ja oikealle, kunnes ylitämme neliömme.

Nyt tärkein asia, jonka tarvitsemme GIF-animaatioiden luomiseen, on työtila, jossa on oikeat työkalut. Siirry valikkoon Ikkuna -> Työtila -> Video. Sen pitäisi näyttää jotain kuvakaappauksesta, mutta eroja voi olla. Olemme kiinnostuneita alaosassa olevasta animaatiopaneelista.

Alla voimme vain nähdä ensimmäisen animaatiokehyksemme korostettuna.

Piirretään nyt 3x3 pikselin neliö oranssilla vasempaan alakulmaan kynällä (B).

Kopioi tasomme (tarraa ja vedä tasomme kuvakkeen päälle luodaksesi uuden kerroksen.

Sammuta taustakerros (silmäkuvake) ja siirrä uudessa tasossa neliömme oikeaan alakulmaan. Täytä avattu läpinäkyvä kangas valkoisella värillä (G).

Kopioi yläkerros uudelleen ja siirrä neliö ylös oikealle. Sitten toinen otto neliön liikkuessa ylös vasemmalle. Sen pitäisi näyttää tältä:

Seuraavaksi siirrymme työskentelemään animaatiopaneelimme kanssa. Napsauta Kopioi valitut kehykset -kuvaketta (kuvake näyttää uuden kerroksen luontikuvakkeelta) 3 kertaa, jotta saamme yhteensä 4 kehystä. Napsauta ensimmäistä kehystä, valitse se ja jätä vain alin kerros näkyväksi tasoluettelossamme. Napsauta sen jälkeen toista kehystä ja jätä toinen kerros alhaalta näkyväksi. Ja niin edelleen. Saat seuraavat:

Periaatteessa animaatiomme on melkein valmis. Napsauttamalla Plays-animaatiokuvaketta näet, mitä saamme. Lisätään nyt hieman pehmeyttä välikehykset. Voit tehdä tämän valitsemalla ensimmäisen ja toisen kehyksen (pitämällä Ctrl-näppäintä painettuna) ja napsauttamalla kuvaketta, johon Tweens-pallot piirretään. Napsauta OK.

Tehdään sama kehysten 2-3, 3-4, 4-1 kanssa.

Nyt valitsemme kaikki kehyksemme ja missä tahansa kehyksessä valitsemme haluamasi siirtymäajan kehysten välillä. Oletetaan 0,1 sekuntia.

Tarkista, että animaatiosi pyörii:

Siinä kaikki. Jäljelle jää vain bannerimme tallentaminen gif-muodossa, tehdäksesi tämän Photoshopissa sinun on siirryttävä tiedostovalikkoon ja valittava valikosta kohta "tallenna Webille ja laitteille" (Tallenna Webille& Laitteet) tai kätevämmin paina näppäinyhdistelmää Ctrl+Shift+Alt+S. Valitse valintaikkunassa Gif-muoto. Täällä voit leikkiä asetuksilla, jotka vaikuttavat tuloksen laatuun ja kokoon Gif-tiedosto. Kun Gif-animaatiomme on tallennettu tiedostoksi Gif-tunnisteella, nautitaan omasta esilatausohjelmastamme! Voit esimerkiksi saada nämä kauniit Loading Preloaderit:

Nykyään Photoshopissa tekemämme Gif-banneria voi luultavasti katsoa millä tahansa grafiikan katseluohjelmalla, joista yleisimmät ovat IrfanView, XNView, FastStone-kuva Katsoja ja monet muut.

Luulen nyt, että ymmärrät, että Gif-animaatioiden luomisessa Photoshopissa ei ole mitään monimutkaista, ja alat luoda omia bannereita ja muita luovia asioita, varsinkin kun animaatiokehyksillä voi olla mitä tahansa tehosteita itse Photoshopin ansiosta.

Jos tarvitset täsmälleen trobbereja/snipperejä, on olemassa erityisiä niiden luomiseen java-skripti kirjastot. Valinta latausanimaatioiden luomiseen on luettavissa artikkelissani

Päätin kirjoittaa tämän oppitunnin, koska ystävät pyysivät usein piirtämään käyttäjäpalkin foorumille. Tällä oppitunnilla tarkastellaan tekniikoita animaation luomiseen Photoshopissa käyttämällä käyttäjäpalkin esimerkkiä.

Joten aloitetaan!

Sanon heti, että oppitunti on suunnattu aloittelijoille. Photoshop-gurut voivat seistä, polttaa ja katsoa hetken (jos jotain mielenkiintoista jäi huomaamatta =))

Käyttäjäpalkin luominen

Ensin sinun on luotava malli animaation luomista varten.

Vaihe 1: Luo asiakirja

Me luomme uusi asiakirja. Otin mitat 350x20.

Vaihe 2. Gradientti.

Otetaan se Liukuvärityökalu (G) ja täytä tuleva käyttäjäpalkki kaltevuudella.

Tulos:

Vaihe 3: Tekstuuri

Hiilen tekstuurin piirtäminen

Tätä varten piirretään hiilikuvio, jota voimme käyttää tulevaisuudessa.

Luo uusi asiakirja, jonka koko on 8x8 pikseliä ja maalaa se seuraavasti. Voit ottaa mielivaltaisia ​​harmaan sävyjä. Pääasia tässä on järjestys.

Tulos:

Vaihe 4. Teksti.

Jäljelle jää vain tekstin lisääminen. Tätä varten tarvitsemme fontin.

Ota Visitor TT1 BRK ja aseta kooksi 10 pistettä. Kirjoitin "Adobe Photoshop CS4 User".

Vaihe 5. Kehys.

Lisätään kehys. Voit tehdä tämän valitsemalla koko käyttäjäpalkin käyttämällä Suorakulmainen valintatelttatyökalu. Mennään Edit -> Stroke ja laita se sinne:

Tulos:

Käyttäjäpalkin animaatio Photoshopissa

Vaihe 1. Kuvakkeen lisääminen animaatioon.

Lisätään nyt kuvake ja siirrytään animaatioon.

Vaihe 2. Ymmärretään animaatiopaletti.

Annetaan hänet liikkumaan.

Tätä varten määritetään ensin oma työpaikka valitsemalla Ikkuna > Työtila > Video tai yksinkertaisesti ottamalla Animaatio-paletin käyttöön.

Siirrytään kehys kuvalta -animaatiotilaan.

Katsotaanpa animaatiopalettia.

Vaihe 3. Animoi käyttäjäpalkki.

Jos teet virheitä, voit poistaa kehyksen, josta et pidä, käyttämällä poistopainiketta (roskakori).

Asetamme myös tarvittavan viiveen. Asetin 0,1 sekuntia kaikille kehyksille paitsi viimeiselle. Siinä on 2 sekunnin viive.

Vaihe 4. Tallenna Gif - animaatio.

Jos foorumin säännöt eivät salli sinun ladata käyttäjäpalkkia, joka on suurempi kuin tietty paino tai resoluutio, voit käyttää artikkelia siitä.

Johtopäätös

Joten olemme luoneet tyylikkään käyttäjäpalkin. Sitten teimme sen perusteella gif-animaatiota. Ja kaikki tämä käyttämällä mahtavaa ja mahtavaa Photoshopia. Eikö olekin siistiä?

Ja Internet on täynnä gifiä, nämä elävät kuvat houkuttelevat jotenkin maagisesti ihmisiä. Tällaiset animaatiot vievät yhä enemmän tilaa virtuaaliseinillä, foorumeilla, tietokoneiden muistissa, vempaimissa ja sydämissä. Muoti luoda GIF-animaatioita ei katoa koskaan.

Haluatko luoda GIF-animaation itse? Se ei ole niin vaikeaa, jos sinulla on graafinen editori ja vähintään perusymmärrys sen toiminnan periaatteista. Juuri nyt opit tekemään GIF-kuvan videosta Photoshop CS5:ssä.

Vaihe 1: valitse ja valmistele video

Jos haluat saada kunnollisen tuloksen, video on parempi valita hyvä laatu. Aluksi on suositeltavaa ottaa lyhyt video, se on helpompi työskennellä. Vaikka tämä ei ole välttämätön ehto. Jos haluat tehdä GIF-animaatiota esimerkiksi elokuvan tai sarjakuvan kehyksestä, on suositeltavaa leikata ensin haluttu fragmentti erityisiä ohjelmia. Esimerkiksi, Windows Move Luoja. Mutta tämä ei ole välttämätöntä, voit käyttää vain Photoshopia.

Vaihe 2: Lataa video ja valitse kehykset

1. Avaa Photoshop.

2. Valikossa " tiedosto" valitse "Tuonti" Ja .

3. Lataa video.

4. Näyttöön tulee ikkuna, jossa sinun on määritettävä tuontiparametrit. Jos leikkasit aiemmin fragmentin GIF-tiedostosta, valitse vieressä oleva ruutu "Alusta loppuun", ja jos aiot valita kehykset Photoshopissa, päinvastoin. Valitse se merkitsemällä ensin aloituspiste asteikolla videon esikatselun alla ja pitämällä SHIFT painettuna ja merkitse fragmentin loppu.

Kun korostettu tummanharmaa alue ilmestyy asteikolle, voit napsauttaa pelata ja tarkista, mitkä kehykset sisällytetään animaatioon. Älä valitse liian suurta aluetta, muuten sinulla on paljon kerroksia ja GIF on "raskas". On parasta tehdä 5-20 kerroksen sarja.

Seuraava tärkeä asetus— jäljellä olevien kehysten määrä. Luku riippuu videon esineiden liikkeen nopeudesta: mitä pienempi se on, sitä pienempi Suuri määrä kehykset voidaan ohittaa. Käytämme videota lemurista, se liikkuu hitaasti, joten laitamme "Jätä joka kolmas kehys", muuten voi olla useita identtisiä kehyksiä.

Varmista, että asia on päinvastoin "Luo kehys kuvalta animaatio" siellä on rasti. Nyt voit painaa "OK".

5. Katse ulos ikkunasta

6. Jos kehyksiä on kuitenkin paljon, osa niistä voidaan poistaa. Voit tuhota useita kerroksia kerralla painamalla SHIFT-näppäintä ja napsauttamalla tarpeettomia tasoja hiirellä ja siirtämällä ne sitten roskakoriin ikkunan oikeassa alakulmassa. Jos kerroksia on useita kymmeniä, tiedosto on helpompi sulkea ja aloittaa alusta valitsemalla pienempi osa videosta. Se on nopeampi tällä tavalla.

Vaihe 3: tee animaatio

1. Varmista, että kaikki tasot paitsi ensimmäinen (alinta) ovat näkymättömiä - tason esikatselun vieressä oleva silmä ei ole aktiivinen.

2. Avaa valikko "Ikkuna" ja valitse

3. Tämän jälkeen työalueelle ilmestyy asteikko kehyksineen.

4. Napsauta pelata ja katso mitä tapahtui. Voit poistaa valmiista animaatiosta kehyksiä (valita ne hiirellä ja siirtää roskakorikuvakkeeseen) tai vaihtaa niitä paikoilleen hiirellä.

5. Jos haluat muuttaa kehyksen toistoaikaa, napsauta esikatselun alla numeron vieressä olevaa nuolta ja määritä haluamasi aikaväli sekunneissa. Jos haluat asettaa saman välin kaikille kehyksille, napsauta asetuskuvaketta animaatioikkunan oikeassa yläkulmassa ja valitse "Valitse kaikki kehykset", muuta sitten yhden niistä aikaa - tätä asetusta sovelletaan kaikkiin kehyksiin.

6. Jos et ole tyytyväinen tulokseen, siirry asetuksiin ja napsauta "Poista animaatio". Jos haluat luoda uuden, sinun on napsautettava sitä "Luo kehyksiä tasoista". Nyt tiedät kuinka tehdä GIF-tiedostoja videoista, mutta siinä ei vielä kaikki. On tärkeää tallentaa se oikein, jotta se avautuu selaimissa.

Vaihe 4: Tallenna GIF-animaatio

Tätä ei pidä tehdä välilehden kautta "Tallenna nimellä", ja valitsemalla valikosta "Tiedosto"— asetusikkuna avautuu. On parempi lähteä vakioasetukset, muuttaa vain kuvan kokoa ja pienentää sitä, kuten GIF-tiedostoille on tapana. Asetamme leveydeksi 350, korkeus lasketaan automaattisesti.

Animaatio tallennetaan gif-muodossa. Avaa se ja katso, miltä se näyttää selaimessa, käytä oikea painike hiiren napsautus "Avaa kanssa" ja valitse selaimesi.