Ang animation sa Internet ay matagal nang tumigil na maging isang simpleng dekorasyon ng pahina at naging isang kapaki-pakinabang na tool para sa pagpapabuti ng kakayahang magamit. Tinutulungan nito ang user na makipag-ugnayan sa interface, nakakakuha ng pansin sa mahahalagang punto.
Ang animation ay isang sunud-sunod na pagpapakita ng magkakatulad na mga frame nang sunud-sunod. Bahagyang nagbabago ang bawat frame, kaya parang gumagalaw ang larawan.
Upang i-animate ang interface, lumikha ng mga interactive na prototype o patalastas, ginagamit ang mga espesyal na programa, halimbawa, Adobe Animate o After Effects.
Upang lumikha ng isang simpleng web banner o pagtatanghal, hindi kinakailangan na makitungo sa mga espesyal na programa. Ang mga built-in na tool sa Photoshop ay angkop din para dito.
Ang unang hakbang ay ang magpasya kung ano ang ating gagawin at kung anong resulta ang plano nating makamit.
Upang lumikha ng animation, kinuha ko ang isa sa mga maliliwanag na proyekto mula kay Behance at muling iginuhit ito sa Photoshop. Naka-align sa grid ng nilalaman, kinuha ang mga laki at inilagay ang bawat elemento sa isang hiwalay na layer. Bilang resulta, nai-render ko ang unang screen ng site sa format na PSD, na pagkatapos ay na-animate ko.
Bago gumawa ng animation, kailangan mong ihanda ang mga kinakailangang tool - i-on ang display ng "Timeline", na tumutulong sa iyong pamahalaan ang mga frame sa animation.
Upang gawin ito, binuksan ko ang tab na "Window" at lagyan ng check ang kahon sa tabi ng linya ng "Timeline".
Ang isang malawak na bar ay dapat lumitaw sa ibaba ng window sa Photoshop, kung saan maaari mong kontrolin ang mga frame sa animation.
Upang gawin ang unang frame, i-click ko ang icon na Lumikha ng Frame Animation sa Timeline.
Pagkatapos lumitaw ang unang frame, maaari kang magsimulang lumikha ng paggalaw.
Sa Photoshop, ang isang elemento ay maaaring i-animate sa maraming paraan:
I-animate ko muna ang balalaika image. Para sa makinis na hitsura ng imahe, ginagamit ko ang tool na "Insert intermediate frames". Upang mai-animate ng Photoshop ang isang elemento sa sarili nitong, kailangan mong magtakda ng dalawang estado para sa elemento - magsimula sa unang frame at magtapos sa susunod.
Kaya magdadagdag ako ng isa pang frame sa Timeline gamit ang Duplicate na Frames button.
Pagkatapos magdagdag ng bagong frame, lumipat ako sa una at tinanggal ang visibility ng balalaika layer. Maaari mo ring itakda ang opacity ng layer sa 0%.
Sa susunod na frame, tinitingnan ko kung nakikita ang balalaika layer.
Pagkatapos magtrabaho kasama ang imahe ng balalaika, na-set up ko ang hitsura ng isang linya ng teksto. Sa unang frame, pipiliin ko ang text na "Soul sings" at ilipat ito sa kanan sa labas ng layout. Ganoon din ang ginagawa ko sa tekstong "3 string" - inilipat ko ito sa kaliwa hanggang sa mawala.
Sa pangalawang frame ay ibinalik ko ang teksto.
Magaling. Ngayon, ipasok natin ang mga intermediate na frame sa pagitan ng mga pangunahing frame.
Upang gawin ito, i-click ko ang pindutang "Gumawa ng mga intermediate na frame" sa "Timeline".
Sa dialog box na lalabas, tukuyin kung gaano karaming mga frame ang idaragdag.
Ang mas maraming mga frame, mas mahaba ang animation at mas maayos ang paggalaw ng elemento. Kung mayroong masyadong kaunting mga frame, ang mga elemento ay lilipat sa jerks.
Ang unang bahagi ng animation ay handa na. Ngayon ay maaari mo na itong i-play muli at makita kung ano ang mangyayari.
Pinindot ko ang play button sa Timeline.
Ang pagpasok ng mga intermediate na frame ay nakatulong upang mabilis na lumikha ng animation na may makinis na hitsura at paggalaw ng mga elemento.
Ang hitsura, pagkawala at paggalaw ay maaaring pagsamahin sa bawat isa upang makamit ang mas kawili-wiling mga epekto.
Bilang karagdagan sa linear na animation, minsan kailangan mong lumikha ng magulong paggalaw o magpakita ng kumplikadong pakikipag-ugnayan ng mga elemento. Karaniwan, para dito, maraming mga kopya ng unang frame ang nilikha, at pagkatapos ay ang bawat kopya ay bahagyang binago - ang animation ay iginuhit ng frame sa pamamagitan ng frame.
Kokopyahin ko ang huling frame ng ilang beses upang gawin ang paggalaw ng arrow at ang tekstong "pumunta sa pamimili."
Sa susunod na frame, pipiliin ko ang nais na layer na may teksto at ang arrow, ilipat ito ng kaunti pataas, at sa huling frame - pababa.
Ngayon ay maaari mong patakbuhin ang animation at makita ang resulta.
Dahil ang mga frame ay mabilis na nagbabago, ang mga mata ay walang oras upang tumutok sa huling frame at ayusin ang huling posisyon ng mga bagay sa screen.
Samakatuwid, pinalaki ko ang tagal ng huling frame: kailangan mong mag-click sa arrow sa tabi ng inskripsyon na "0 sec." at pumili ng isa pang oras mula sa listahan.
Para sa huling frame, itinakda ko ang tagal sa dalawang segundo. Ngayon ay bumagal ang pag-playback sa dulo. Samakatuwid, komportable na obserbahan ang paggalaw ng mga elemento.
Sa window ng preview, maaari mong tingnan muli ang animation at baguhin ang mga setting ng pag-save.
Bilang default, humihinto ang animation pagkatapos maglaro. Samakatuwid, binabago ko ang mode ng pag-playback sa "Ulitin" at i-save.
Narito ang resultang animation:
Sa Photoshop, madaling gumawa ng maiikling interactive na mga banner at presentasyon, at i-animate ang mga indibidwal na elemento. Maginhawang mag-eksperimento sa resulta.
Gumawa ng bagong laki ng file 700 x 300 px.
Pagbukas ng bintana Timeline( (Window - Timeline)).
Mag-click sa pindutan " Lumikha ng Frame Animation» (Gumawa ng frame animation).
Gamit ang tool () gumawa 3 layer na may teksto ("Animation", "ito", "lang").
Gamit ang tool (Move Tool / V Key), ilagay ang text tulad ng nasa larawan sa ibaba.
Sa bintana Timeline(Timeline) piliin ang unang frame at mag-click sa pindutan « Kino-duplicate ang mga napiling frame» (Gumawa ng kopya ng mga napiling frame).
Lumilikha kami 4 mga kopya ng mga napiling frame.
Pumili sa window Timeline(timeline) pangalawang frame at iwanan lamang ang mga layer na nakikita " Animasyon"at" Background».
Pumili ikaapat na frame at hayaan itong makita lahat mga layer.
Itakda natin ang repeat parameter para sa ating animation. Sa window menu Timeline(Timeline), baguhin ang repeat parameter mula sa " minsan" sa " Patuloy” (larawan sa ibaba).
Ngayon ay magagamit na natin ang animation para magsimulang maglaro.
Mga setting ng animation sa "File - Save for Web" (File - Save for Web) Photoshop CC. Panghuling resulta 
Upang makagawa ng animation, hindi kinakailangan na magkaroon ng ilang kahanga-hangang kaalaman, kailangan mo lamang makakuha ang tamang kasangkapan at gamitin ito ng tama. Mayroong ilang mga ganoong solusyon, ngunit ang pinakasikat sa kanila ay Adobe Photoshop. Ipapakita sa iyo ng artikulong ito kung paano mabilis na lumikha ng isang animation dito.
Kung wala ang Photoshop sa iyong PC, i-download ito mula sa link sa itaas, pagkatapos ay i-install ito kasunod ng mga tagubilin mula sa artikulong ito at patakbuhin ito.
Ngayon ay maaari kang gumuhit sa kanila kung ano ang ipapakita sa animation. Sa aming simpleng halimbawa, ito ay magiging isang gumagalaw na parisukat. Sa bawat layer, gumagalaw ito ng ilang pixel pakanan.
Lahat! Handa na ang animation. Maaari mong tingnan ang resulta sa pamamagitan ng pag-click sa pindutan "Simulan ang Pag-playback ng Animation". At pagkatapos ay maaari mong i-save ito bilang gif.
Sa ganoong simple ngunit napatunayang paraan, nagawa naming gumawa ng GIF animation sa Photoshop. Siyempre, maaari itong lubos na mapabuti sa pamamagitan ng pagbawas sa oras ng frame, pagdaragdag ng higit pang mga frame at, siyempre, paglikha ng isang bagay na mas orihinal at mas mahusay sa husay sa halip na isang itim na parisukat. Ngunit nakadepende na ito sa iyong mga kagustuhan, kagustuhan at kakayahan.
Simula sa CS3 Extended na bersyon, magagamit ang paggawa sa animation. Ang mga gif-drawing ay ginawa mula sa isang set ng mga frame o direkta mula sa mga video. Kaya ikaw mismo ay gagawa ng isang dynamic na larawan para sa site, mga avatar, mga presentasyon? greeting card. Ang mga katulad na graphics ay maaaring gamitin sa iba pang mga proyekto o sa panahon ng pag-install. Alamin kung paano mag-animate sa Photoshop upang malayang gumana sa ganitong uri ng imahe.
Ang Adobe Photoshop ay may maraming mga tampok, kabilang ang paglikha ng mga animation.
Hindi mo kailangang maging isang artist o designer para magawa ito. Ang lahat ng mga function ay malinaw kahit na sa isang baguhan. Ang kailangan lang ay ang paunang hanay ng mga frame kung saan malilikha ang gif file.
Ang pinakamadaling paraan ay ang pag-convert ng video sa animation. Hindi mo kailangang i-configure ang anuman. Buksan lamang ang video sa Photoshop. Tumatanggap ang utility ng mga format ng avi, mov, mp4, mpg, mpeg, m4v. Upang patakbuhin ang mga ito nang tama, kailangan mong naka-install ang QuickTime. Ang media file na idinagdag sa ganitong paraan ay hindi maaaring i-edit o i-trim. I-convert lang sa graphics.
Ngunit may isa pang paraan. Narito kung paano gumawa ng gif mula sa isang pelikula sa Photoshop:
Narito kung paano lumikha ng isang animation sa Photoshop gamit ang mga larawan:
Kung gagawa ka ng malaking layout, magtatagal ang paraang ito. Sa kasong ito, maaari mong gawin ang mga sumusunod:
Ang parehong mga aksyon ay magagamit sa mga larawan tulad ng sa mga video slide.
Mahalaga rin na malaman kung paano i-save ang animation sa Photoshop. Kung ito ay naka-format bilang isang psd file o isang "static" na larawan na may extension na jpg, bmp, png, walang kahulugan. Sa halip na gumalaw, mag-transform o kumukutitap, makakakuha ka ng isang nakapirming frame. Upang makagawa ng isang hanay ng mga umiikot na guhit, kailangan mong i-convert ang dokumento sa GIF na format.
Sapat na madaling malaman kung paano gumawa ng animation sa Photoshop. Kahit na hindi ka isang propesyonal na web designer, maaari kang lumikha ng isang imahe na tulad nito. Magkakaroon ka ng isang natatanging sining, na binuo gamit ang iyong sariling mga kamay.
Magandang gabi, mahal na mga tagasuskribi at mga mambabasa lamang ng aking blog! Handa ka na bang matutunan kung paano buhayin ang iyong larawan? At hindi sa tulong ng magic, ngunit sa tulong ng aming paboritong photoshop! Gaano ko katagal ipinagpaliban ang araling ito nang hindi alam kung bakit. Pagkatapos ng lahat, ito ang mga pangunahing kaalaman sa Photoshop! Pero ngayon napagdesisyunan kong magbago.
At pagbutihin nang husto na sa dulo ng video ay magkakaroon din ng video lesson ang sa iyo kung paano gumawa ng animation sa photoshop.
Matagal na akong hindi nagsusulat ng mga tutorial sa Photoshop, at mayroon akong mga dahilan. Pagkatapos ng lahat, tinapos ko ang aking kwento "". Maaari mong basahin ito, at ipahayag ang iyong opinyon nang direkta sa mga komento!
At ngayon ay dumiretso tayo sa aralin. Sa video na nasa ibaba, ipapakita ko sa iyo kung paano gumawa ng teksto na unti-unting idinagdag, ngunit sa aralin sa teksto ang gawain ay magiging mas kumplikado.
Mayroon kaming Cipollino, at kailangan namin siyang iwagayway ang kanyang kamay sa amin.
Hakbang 1. Una kailangan mong "paganahin" ang animation sa Photoshop. Para dito tayo pupunta "Window" -> "Animation". Maaari pa ring isulat "Scale ng Oras".
Hakbang 2 Upang gumalaw ang braso, kailangan nating putulin ito at ilagay sa iba't ibang posisyon. Para sa pagputol ng kamay, personal kong ginagamit "Magnetic Lasso". Paggawa ng kopya ng pangunahing Ctrl+J) at magtrabaho kasama ang kopya. Hindi namin hinawakan ang orihinal.
Piliin nang mabuti ang kamay at gupitin ito!
Hakbang 3 At ngayon ipinasok namin ang aming kamay, gaano man ito kakila-kilabot na tunog, at inilalagay ito sa iba't ibang posisyon. Ang kamay ay ipapasok sa mga bagong layer, ito ay nababagay sa amin.
Hakbang 4 Opsyonal ang hakbang na ito, ngunit mas mainam na gamitin ang Eraser tool upang hawakan nang kaunti ang kamay, na ginagawa itong mas natural. Mahirap ipaliwanag, siyempre, sa mga salita. Kung naiintindihan mo kung bakit namin ginagamit ang pambura, pagkatapos ay sundin ang hakbang na ito, kung hindi mo pa rin naiintindihan, maaari mo itong laktawan. Hindi ito mahalaga, dahil ang pinakamahalagang bagay para sa amin ay matutunan kung paano lumikha ng isang simpleng animation!
Hakbang 5 Ngayon ay nakikipagtulungan kami sa mga tauhan. Sa bawat frame, isinasama lang namin ang mga layer na kailangan namin. Halimbawa, sa frame 1 kailangan namin ang aming orihinal, at sa aming kaso “Layer 0”.
Ngayon gumawa kami ng bagong frame:
At nasa bagong frame na namin i-on ang iba pang mga layer. Iyon ay, ang aming “Layer 0 copy” at “Layer 1”, ibig sabihin, ibang posisyon ng kamay. Umaasa ako na ang algorithm ay malinaw sa iyo, mahal na mga mambabasa.
Hakbang 6 Itakda ang pagkaantala ng frame. Ibig sabihin, pagkatapos ng anong tagal ng panahon ipapakita ang susunod na frame.
Hakbang 7 Iniingatan natin ang atin. Ito ay hindi para sa wala na isinama ko ang hakbang na ito sa aking tutorial, dahil ang pag-save ng GIF animation ay medyo naiiba kaysa sa isang imahe lamang.
Piliin ang format (default ay GIF) at i-save.
