Paano Panatilihin ang GIF sa Photoshop.

Anonim

Paano Panatilihin ang GIF sa Photoshop.

Pagkatapos ng paglikha ng isang animation sa Photoshop, dapat itong i-save sa isa sa mga magagamit na mga format, isa sa mga ito ay GIF. Ang isang tampok ng format na ito ay na ito ay inilaan upang ipakita (maglaro) sa browser.

Kung interesado ka sa iba pang mga pagpipilian para sa pag-save ng animation, inirerekumenda namin ang pagbabasa ng artikulong ito:

Aralin: Paano i-save ang video sa Photoshop.

Ang proseso ng paglikha ng isang animation ng GIF ay inilarawan sa isa sa mga nakaraang aralin, at ngayon ay magsasalita kami tungkol sa kung paano i-save ang file sa format ng GIF at sa mga setting ng pag-optimize.

Aralin: Lumikha ng isang simpleng animation sa Photoshop.

Pag-save ng gif.

Upang magsimula, ulitin namin ang materyal at basahin ang window ng I-save ang Mga Setting. Nagbubukas ito sa pamamagitan ng pag-click sa item na "I-save para sa Web" sa menu ng File.

Point I-save para sa Web sa menu ng File upang i-save ang GIF sa Photoshop

Ang window ay binubuo ng dalawang bahagi: isang preview block

Isang yunit ng recipigation sa mga setting ng mga parameter ng pangangalaga ng GIF sa Photoshop

at bloke ng mga setting.

I-block ang mga setting sa window ng mga setting ng Gifki Preservation sa Photoshop

I-block ang preview

Piliin ang bilang ng mga pagpipilian sa view ay napili sa tuktok ng bloke. Depende sa mga pangangailangan, maaari mong piliin ang ninanais na setting.

Pagpili ng mga pagpipilian sa panonood sa window ng Mga Setting ng Gifki Conservation sa Photoshop

Ang imahe sa bawat window, maliban sa orihinal, ay naka-configure nang hiwalay. Ginagawa ito upang mapili mo ang pinakamainam na opsyon.

Sa kaliwang bahagi ng bloke mayroong isang maliit na hanay ng mga tool. Gagamitin lamang natin ang "kamay" at "scale".

Mga tool sa kamay at sukat sa window ng Mga Setting ng Gifki Conservation sa Photoshop

Gamit ang "kamay" maaari mong ilipat ang imahe sa loob ng napiling window. Ang pagpipilian ay ginawa rin ng tool na ito. Ang "scale" ay gumaganap ng parehong pagkilos. Tinatayang at tanggalin ang larawan ay maaari ring maging mga pindutan sa ilalim ng bloke.

Image Scale sa window ng Mga Setting ng Gifki Conservation sa Photoshop

Mababa ang ibaba ay ang pindutan na may inskripsiyong "view". Binubuksan nito ang napiling pagpipilian sa default na browser.

Ang pindutan ng view ng imahe sa browser sa window ng mga setting ng mga parameter ng gifting sa Photoshop

Sa window ng browser, maliban sa pagtatakda ng mga parameter, maaari rin kaming makakuha ng HTML GIF code.

Preview ng imahe sa default na browser habang pinapanatili ang mga gif sa Photoshop

I-block ang Mga Settings.

Sa bloke na ito, naka-configure ang mga parameter ng imahe, isaalang-alang ito nang higit pa.

  1. Scheme ng kulay. Tinutukoy ng setting na ito kung aling mga talahanayan ng mga naka-index na kulay ang ilalapat sa larawan kapag nag-optimize.

    Pagpili ng mga kulay indexing scheme habang pinapanatili ang GIF sa Photoshop

    • Perceptual, at simpleng "pamamaraan ng pang-unawa." Kapag ginagamit ito, ang Photoshop ay lumilikha ng isang talahanayan ng mga kulay, ginagabayan ng kasalukuyang mga kulay ng imahe. Ayon sa mga developer, ang mesa na ito ay mas malapit hangga't maaari kung paano nakikita ng mata ng tao ang kulay. Plus - ang imahe ay ang pinaka malapit sa orihinal, ang mga kulay ay maximally na-save.
    • Ang Selective Scheme ay katulad ng naunang isa, ngunit ang mga kulay na may kaugnayan sa web secure para sa web ay nakararami ginagamit sa loob nito. Nakatuon din ito sa pagpapakita ng mga kulay na humigit-kumulang sa unang isa.
    • Adaptive. Sa kasong ito, ang talahanayan ay nilikha mula sa mga kulay na mas karaniwan sa larawan.
    • Limitado. Binubuo ng 77 mga kulay, ang ilan sa mga sample na pinalitan ng puti sa anyo ng isang punto (butil).
    • Pasadyang. Kapag pumipili ng scheme na ito, posible na lumikha ng iyong sariling palette.
    • Itim at puti. Ang talahanayan na ito ay gumagamit lamang ng dalawang kulay (itim at puti), ginagamit din ang butil.
    • Sa mga grado ng kulay-abo. Mayroong iba't ibang 84 antas ng mga kulay ng kulay-abo.
    • Macos at Windows. Ang data ng talahanayan ay pinagsama batay sa mga tampok ng mga larawan sa pagma-map sa mga browser na tumatakbo sa mga operating system na ito.

    Narito ang ilang mga halimbawa ng paglalapat ng mga scheme.

    Mga halimbawa ng imahe gamit ang iba't ibang mga kulay ng pag-index ng mga talahanayan habang pinapanatili ang mga gif sa Photoshop

    Tulad ng makikita mo, ang unang tatlong sample ay may lubos na katanggap-tanggap na kalidad. Sa kabila ng katotohanan na halos halos hindi sila naiiba sa bawat isa, sa iba't ibang mga larawan ang mga scheme na ito ay gagana nang iba.

  2. Pinakamataas na bilang ng mga kulay sa talahanayan ng kulay.

    Pagtatakda ng maximum na bilang ng mga kulay sa talahanayan ng pag-index habang pinapanatili ang mga gif sa Photoshop

    Ang bilang ng mga kulay sa imahe ay direktang nakakaapekto sa timbang nito, at, nang naaayon, sa bilis ng pag-download sa browser. Ang halaga ng 128 ay kadalasang ginagamit, dahil ang setting na ito ay halos hindi nakakaapekto sa kalidad, habang binabawasan ang bigat ng GIF.

    Mga halimbawa ng mga setting para sa maximum na bilang ng mga kulay sa talahanayan ng pag-index habang pinapanatili ang GIF sa Photoshop

  3. Mga kulay ng web. Ang setting na ito ay nagtatatag ng pagpapaubaya kung saan ang mga shades ay na-convert sa katumbas mula sa isang secure na web palette. Ang patlang ng file ay tinutukoy ng halaga na itinakda ng slider: ang halaga ay mas mataas - ang file ay mas mababa. Kapag ang pag-set up ng mga kulay ng web ay hindi dapat kalimutan ang kalidad.

    Pagtatakda ng pagpapahintulot ng conversion ng imahe sa mga kulay ng web habang pinapanatili ang mga gif sa Photoshop

    Halimbawa:

    Mga halimbawa ng pag-set up ng conversion ng kulay sa Weeb habang pinapanatili ang GIF sa Photoshop

  4. Pinapayagan ka ng dysrying na makinis ang mga transition sa pagitan ng mga kulay sa pamamagitan ng paghahalo ng mga kulay na nakapaloob sa napiling indexing table.

    Dystering setting habang pinapanatili ang GIF sa Photoshop.

    Gayundin, ang setting ay makakatulong kung paano mapanatili ang gradients at ang integridad ng mga monochromatic site. Kapag ang paggamit ng dispensing ay nagpapataas ng timbang ng file.

    Halimbawa:

    Mga halimbawa ng paglalapat ng mga setting ng dystering habang pinapanatili ang GIF sa Photoshop

  5. Aninaw. Ang format ng GIF ay sumusuporta lamang sa ganap na transparent, o ganap na opaque pixels.

    Pagtatakda ng transparency ng background habang pinapanatili ang GIF sa Photoshop.

    Ang parameter na ito, nang walang karagdagang pagsasaayos, hindi maganda ang nagpapakita ng mga curve ng linya, na nag-iiwan ng mga pixel ladies.

    Mga halimbawa ng paggamit ng adjustment matte habang pinapanatili ang mga gif sa Photoshop

    Ang pagsasaayos ay tinatawag na "matte" (sa ilang mga editor na "kaima"). Gamit ito, naka-configure ito upang ihalo ang mga larawan ng pixel na may background ng pahina kung saan ito matatagpuan. Para sa pinakamahusay na display, pumili ng isang kulay na naaayon sa kulay ng background ng site.

    Pagsasaayos ng paghahalo ng mga larawan ng pixel na may background ng mga pahina ng pindutin ang resoe sa Photoshop

  6. Interlaced. Isa sa mga pinaka-kapaki-pakinabang para sa mga setting ng web. Kung ang file ay may malaking timbang, ay nagbibigay-daan sa iyo upang agad na magpakita ng isang larawan sa pahina, dahil naglo-load ito ng pagpapabuti ng kalidad nito.

    Pagtatakda ng interlaced habang pinapanatili ang GIF sa Photoshop.

  7. Tinutulungan ng conversion ng SRGB na i-save ang maximum na orihinal na mga kulay ng imahe habang nagse-save.

    Pagtatakda ng conversion ng mga kulay sa SRGB habang pinapanatili ang GIF sa Photoshop

Ang pag-set up ng "dysrying transparency" ay makabuluhang lumalala ang kalidad ng imahe, at sasabihin namin ang parameter na "pagkawala" sa praktikal na bahagi ng aralin.

Mga setting ng dysrying para sa transparency at pagkawala ng data habang pinapanatili ang mga GIF sa Photoshop

Para sa pinakamahusay na pag-unawa sa proseso ng pag-set up ng pangangalaga ng GIF sa Photoshop, dapat kang magsanay.

Pagsasanay

Ang layunin ng pag-optimize ng mga imahe para sa Internet ay ang pinakamataas na pagbawas ng bigat ng file habang pinapanatili ang kalidad.

  1. Pagkatapos ng pagproseso ng larawan, pumunta sa menu na "File - I-save para sa Web".
  2. Ipakita ang mode na "4 na pagpipilian".

    Pagpili ng bilang ng mga pagpipilian para sa pagtingin sa mga resulta habang pinapanatili ang GIF sa Photoshop

  3. Susunod, kailangan mo ng isa sa mga pagpipilian upang gawin ang mga pinaka-katulad sa orihinal. Hayaan itong maging isang larawan sa kanan ng pinagmulan. Ginagawa ito upang tantiyahin ang laki ng file na may maximum na kalidad.

    Ang mga setting ng setting ay ang mga sumusunod:

    • Color Scheme "Selective".
    • "Mga Kulay" - 265.
    • Ang "Diazering" ay "random", 100%.
    • Alisin ang mga daws sa tapat ng parameter na "interlaced", dahil ang huling imahe ng imahe ay medyo maliit.
    • "Mga kulay ng web" at "pagkalugi" - zero.

      Pagtatakda ng mga parameter ng reference image habang pinapanatili ang GIFs sa Photoshop

    Ihambing ang resulta sa orihinal. Sa ilalim ng sample window, maaari naming makita ang kasalukuyang laki ng GIF at bilis ng paglo-load sa tinukoy na bilis ng internet.

    Paghahambing ng resulta ng pag-optimize ng imahe na may orihinal habang pinapanatili ang mga gif sa Photoshop

  4. Pumunta sa larawan sa ibaba lamang na naka-configure. Subukan nating i-optimize ito.
    • Iwanan ang scheme hindi nagbabago.
    • Ang bilang ng mga kulay ay nagbabawas ng hanggang sa 128.
    • Ang halaga ng dysmering ay nabawasan hanggang 90%.
    • Ang mga kulay ng web ay hindi nakakaapekto, dahil sa kasong ito ay hindi ito makakatulong sa amin na panatilihin ang kalidad.

      Pagtatakda ng mga parameter ng target na imahe habang pinapanatili ang mga gif sa Photoshop

    Ang laki ng GIF ay bumaba mula 36.59 Kb hanggang 26.85 Kb.

    Nabawasan ang laki ng imahe pagkatapos ng pag-optimize habang pinapanatili ang mga gif sa Photoshop

  5. Dahil ang ilang mga graininess at maliit na depekto ay naroroon sa larawan, subukan nating dagdagan ang "pagkalugi". Tinutukoy ng parameter na ito ang isang pinahihintulutang antas ng pagkawala ng data kapag nag-compress ng GIF. Baguhin ang halaga sa 8.

    Pagtatakda ng antas ng pinapayagan na pagkawala ng data kapag nag-compress ng GIF upang i-save ang GIF sa Photoshop

    Pinamahalaan pa rin namin ang laki ng file, habang nawawala ang isang maliit na kalidad. Ang mga gif ay may timbang na 25.9 kilobytes.

    Laki ng imahe pagkatapos ng pag-set up ng pagkawala habang pinapanatili ang mga gif sa photoshop

    Kabuuang, nakuha namin ang laki ng larawan tungkol sa 10 KB, na higit sa 30%. Napakagandang resulta.

  6. Ang mga karagdagang pagkilos ay napaka-simple. Mag-click sa pindutang I-save.

    I-save ang pindutan sa window ng Mga Setting ng Gifki Conservation sa Photoshop

    Pumili kami ng isang lugar upang i-save, ibigay ang pangalan ng GIF, at pindutin muli ang "I-save".

    Pagpili ng isang lugar at pangalan ng pangangalaga ng GIF sa Photoshop

    Mangyaring tandaan na mayroong isang pagkakataon kasama ang GIF upang lumikha ng isang HTML na dokumento kung saan ang aming larawan ay itatayo. Upang gawin ito, mas mahusay na pumili ng isang walang laman na folder.

    Pag-save ng GIF kasama ang HTML Document sa Photoshop.

    Bilang resulta, nakakuha kami ng isang pahina at isang folder na may larawan.

    Folder na may naka-save na GIF sa Photoshop.

Tip: Kapag nagtatalaga ng isang pangalan ng file, subukang huwag gamitin ang Cyrillic character, dahil hindi lahat ng mga browser ay maaaring basahin ang mga ito.

Ang araling ito para sa pag-save ng imahe sa format ng GIF ay nakumpleto. Sa ito, nalaman namin kung paano mo ma-optimize ang file para sa placement sa internet.

Magbasa pa