1. Design & Illustration
  2. GIF

10 Paraan Para I-Optimize ang  Animated GIF File

by
Read Time:8 minsLanguages:
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Ang GIFs ay ang standard na pormat para sa pag-compress ng mga image na may malaking bahagi ng solid na kulay at malinaw na detalye katulad ng nasa line art, logos, o kaya type. Dahil ito ay 8 bit-depth image na pormat mawawala ito sa web pagkatapos maipakilala ang JPEG at PNG file na pormat, subalit ang GIF ay nananatiling paboritong web file na pormat salamat sa frame animation na katangian nito. Sa pagtuturong ito, titingnan natin ng maigi ang lahat ng nariyan na pagpipilian para i-convert ang video sa GIF animation, at kung paano magamit ng husto ang laki o liit ng file nito. Simulan na nating gawin ito!

Siyanga pala, kung gagamitin mo ng madalas ang GIFs,baka gusto mong tumingin ng automated solution: nariyan ang Gift Export Photoshop action Envato Market, kung saan maaari kang kumuha ng maraming mga image, awtomatikong i-upload ang mga ito sa Photoshop, at i-export ang mga ito bilang GIF.


1. Pag-trim ng Animatiion

Una sa lahat kailangan mong buksan ang video file sa Photoshop. Madalas hindi mo kailangan ang buong sequence para sa GIF animation, kung kaya maaari mong i-trim ang video sa Timeline Panel. I-turn on ang Loop option at subukang makahanap ng magandang lugar para i-trim ang iyong video. 

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

2. Pagpaliit ng Sukat ng Mga Images

Maaari mong paliitin ang sukat ng image mula sa Image menu o kaya gawin ito sa susunod sa Save for Web dialog box. Mas gusto ko itong gawin sa simula sa Image Size Dialog Box dahil nakakapag-save ito ng mahabang oras ng pag-load kapag binuksan mo ang Save for Web dialog box. Ang iyong video layer ay kailangang magawang Smart Object kung gusto mong paliitin o palakihin ang sukat ng image, subalit huwag mo itong alalahanin, hindi ito kailanman makakaapekto sa ating ginagawa.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

3. I-save Para sa Web

Ang paborito ko sa ginagawang ito ay dahil hindi natin kailangang gumawa ng kahit na anong conversion sa Timeline panel para ma-save ang frame animation, dahil ang Save for Web dialog box ang gagawa nito para sa atin kapag pinili mo ang GIF file na pormat bilang iyong output. Pansinin na ang Animation na pagpipilian ay lalabas sa kanang ilalim na bahagi ng dialog box. Sakaling mapagdesisyunan mo na mas paliitin ang sukat ng iyong image maaari mo pa din itong gawin dito.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

4. Paliitin ang Amount ng Frames

Maaari mo pang mas paliitin ang sukat ng GIF animation kung bubuksan mo uli ang na-export na GIF pabalik sa Photoshop at alisin ang bawat pangalawa o pangatlong frame mula sa Timeline Panel. Pagkatapos dapat mong piliin ang lahat ng natitirang frames at dagdagan ang duration ng mga ito para makabawi sa nawalang frames. Kapag hindi mo ito ginawa ang animation mo ay gagana ng mas mabilis kaysa sa orihinal. Kapag handa ka na maaari mo ng i-save ang bagong bersyon, na dapat ay mas maliit kaysa sa orihinal.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

5. Bilang ng mga Kulay

Ang pinakanaaayon na pagpipilian para mas ma-optimize ang sukat ng GIF file ay ang bilang ng mga kulay na ginamit sa Color Table.Ang pinakamataas na bilang ng kulay ay 256, na galing sa 8-bit depth na limitasyon. Sa totoo lang maigi na manatili sa 64 na kulay o mas mababa pa dito, subalit depende sa orihinal na video baka kailangan mong taasan ang bilang ng kulay para makakuha ng mas magandang resulta.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

6. Aling Color Reduction Algorithm ang Piliin?

  • Perceptual para makagawa ng custom color table sa pamamagitan ng pagbibigay ng prayoridad sa mga kulay kung saan sensitibo ito sa mata ng tao.
  • Selective para makagawa ng color table na hawig sa Perceptual color table , subalit mas binibigyang diin ang malawak na saklaw ng mga kulay at pananatili ng Web colors. Ang color table ay kadalasan nakakalikha ng mga images na may mataas na color integrity.(Ang Selective ay ang dati ng pinipili.)
  • Adaptive para makagawa ng custom color table sa pamamagitan ng sampling colors mula sa spectrum na nakikita madalas sa image. Halimbawa, ang image na may shades lang  ng berde at bughaw ay nakakalikha ng color table na may nangungunang kulay ng mga berde at bughaw. Karamihan sa mga images ay nakatuon sa mga kulay sa natatanging bahagi ng spectrum.
  • Ang Restrictive ay ginagamit ang standard, 216 na kulay, web safe na color table  na karaniwan sa 8-bit (256‑kulay) panels ng Windows at Mac OS. Ang pagpipilian na ito ay sinisigurado na walang browser dither na gagamitin sa kulay kapag ang image ay ipinapakita gamit ang 8 bit na kulay. Kapag ang iyong image ay may mas kaunti sa 216 na kulay, ang mga hindi nagamit na kulay ay natatanggal mula sa table.
10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

7. Dithering 

Dahil ang GIF files ay naglalaman ng limitadong bilang ng mga kulay, baka gusto nating gayahin ang nawawalang mga kulay gamit ang mga nariyang kulay sa pamamagitan ng dithering. Mula sa “Dither” menu, piliin natin ang isa sa mga algorithms para sa naturang panggagaya. Ang “Diffusion” na paraan ay nakakapag bago ng dami ng dither. Sa “Pattern” at “Noise”na algorithms ay wala namang dapat baguhin. Mas maraming dithering sa image, mas malaki ang file.Ang dithering ay nagdadagdag ng iba’t ibang colored pixels na mas malapit sa isa’t isa para gayahin ang pangalawang kulay o smooth gradation sa kulay. Ang ibang images ay naglalaman ng dithering para magmukhang maganda, subalit mas maigi kung gagamit ng kaunting dami ng dithering na posible para mapanatili ang pinakamaliit na sukat ng file.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

8. Ang Web Snap, Lossy, Transparency at Interlaced

  • Ang Web Snap ay ginagamit para maiwasan ang dithering sa browser. Ito ay ginagawa sa pamamagitan ng pag-snap ng ibang mga kulay sa Web-safe na mga kulay. Mas maraming Web-safe na kulay na meron sa GIF, mas kaunti ang browser dithering. Ang value ng 0% ay hindi makakapagpabago ng kahit na anong kulay subalit ang value ng 100% ay makakapagpabago ng lahat ng mga kulay sa image sa Web-safe.
  • Ang Lossy compression ay inaalis ang impormasyon sa visual, na maaaring makapagpababa ng sukat ng file.
  • Kung ang image ay naglalaman ng Transparency, piliin ang Transparency para mapanatili ang transparent pixels; huwag piliin ang Transparency para mapunan ng buo at ilang bahagi ang transparent pixels ng matte na kulay.
  • Ang Interlaced GIF na files ay nilo-load sa browser sa ilang pasada (katulad ng progressive na JPEG’s).


9. Ikumpara ang Orihinal at Mas Pinaganda na Bersyon

Kapag nakapagdagdag ka ng maraming custom na pagbabago maaari mong suriin ang pagkakaiba sa sukat ng file at kalidad sa pamamagitan ng pag gamit ng 2-Up view.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

10. Suriin, I-save ang Preset at I-optimize sa Sukat ng File

Kung masaya ka na sa settings tingnan ang iyong huling GIF sa Preview na pagpipilian sa browser at huwag kalimutang i-save ang iyong settings bilang preset.Maaari mo ring liwanagin ang limit ng sukat ng file sa pamamagitan ng karagdagang pagpipilian na ito mula sa Optimize Menu at kapag nagamit ito ang Photoshop ay susubukang ipagkasya ang sukat ng file sa posibleng pinakamagandang kalidad ng image. 

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File
One subscription.
Unlimited Downloads.
Get unlimited downloads