Optimeer en stoor beelde in GIF-formaat


Nadat u 'n animasie in Photoshop geskep het, moet u dit stoor in een van die beskikbare formate waarvan een een is GIF. 'N kenmerk van hierdie formaat is dat dit ontwerp is om te vertoon (speel) in die blaaier.

As jy belangstel in ander opsies om die animasie te stoor, beveel ons aan om hierdie artikel hier te lees:

Les: Hoe om video te stoor in Photoshop

Skepping proses GIF Die animasie is in een van die vorige lesse beskryf, en vandag sal ons praat oor hoe om die lêer te stoor GIF en optimalisering instellings.

Les: Skep 'n eenvoudige animasie in Photoshop

GIF stoor

Om te begin, herhaal die materiaal en kyk na die stoorinstellingsvenster. Dit maak oop deur op die item te klik. "Stoor vir die web" in die spyskaart "Lêer".

Die venster bestaan ​​uit twee dele: 'n voorskou blok

en blok instellings.

Voorbeeldblok

Die keuse van die aantal kyke opsies word bo-aan die blok gekies. Afhangende van jou behoeftes, kan jy die gewenste instelling kies.

Die beeld in elke venster, behalwe die oorspronklike, is afsonderlik opgestel. Dit word gedoen sodat u die beste opsie kan kies.

In die boonste linker gedeelte van die blok is daar 'n klein stel gereedskap. Ons sal net gebruik "Hand" en "Zoom".

Met die hulp van "Hands" U kan die prent binne die gekose venster beweeg. Die keuse word ook gemaak deur hierdie instrument. "Zoom" voer dieselfde handeling uit. U kan ook in-en uitzoomen met die knoppies onderaan die blok.

Net onder is die knoppie gemerk "Kyk". Dit maak die gekose opsie in die verstek blaaier oop.

In die blaaier venster kan ons ook 'n stel parameters kry HTML-kode SIFCO.

Stellings blok

In hierdie blok word die beeldparameters opgestel, laat ons dit in meer besonderhede oorweeg.

  1. Kleurskema. Hierdie instelling bepaal watter geïndekseerde kleurtafel tydens die optimalisering op die prent toegepas word.

    • perseptuele, maar bloot 'persepsieskema'. Wanneer dit toegepas word, skep Photoshop 'n tabel met kleure, gelei deur die huidige skakerings van die prent. Volgens die ontwikkelaars is hierdie tafel so na as moontlik aan hoe die menslike oog kleure sien. Plus - die naaste aan die oorspronklike beeld word die kleure so veel moontlik gestoor.
    • selektiewe Die skema is soortgelyk aan die vorige een, maar dit gebruik meestal kleure wat veilig is op die web. Dit fokus ook op die vertoon van skakerings naby die oorspronklike.
    • adaptive. In hierdie geval word die tabel geskep uit kleure wat meer algemeen in die prent voorkom.
    • beperkte. Dit bestaan ​​uit 77 kleure, waarvan sommige wit vervang word in die vorm van 'n punt (graan).
    • persoonlike. By die keuse van hierdie skema is dit moontlik om jou eie palet te skep.
    • Swart en wit. Hierdie tafel gebruik slegs twee kleure (swart en wit), ook met graan.
    • In grysskaal. Hier word verskeie 84 vlakke van grys toegepas.
    • MacOS en Windows. Hierdie tabelle word saamgestel op grond van die kenmerke van die vertoon van beelde in blaaiers wat hierdie bedryfstelsels uitvoer.

    Hier is 'n paar voorbeelde van die gebruik van skemas

    Soos u kan sien, het die eerste drie monsters redelike aanvaarbare gehalte. Ten spyte van die feit dat hulle visueel nie skaars van mekaar verskil nie, sal hierdie skemas anders op verskillende beelde werk.

  2. Die maksimum aantal kleure in die kleurtafel.

    Die aantal skakerings in die prent het 'n direkte invloed op die gewig, en dus die aflaai spoed in die blaaier. Die mees gebruikte waarde 128Aangesien hierdie instelling byna geen effek op kwaliteit het nie, terwyl die gewig van die gif verminder word.

  3. Webkleure. Hierdie instelling stel die verdraagsaamheid waarmee tintes omgeskakel word na ekwivalent van 'n veilige webpalet. Die lêer gewig word bepaal deur die waarde wat deur die skuifbalk bepaal word: die waarde is hoër - die lêer is kleiner. By die opstel van webkleure vergeet nie die kwaliteit nie.

    byvoorbeeld:

  4. Met dithering kan u die oorgange tussen kleure verfyn deur die kleure wat in die geselekteerde indeks tabel voorkom, te vermeng.

    Aanpassing sal ook sover moontlik help om die gradiënte en integriteit van monochromatiese gebiede te behou. By die gebruik van dithering word die lêer gewig toeneem.

    byvoorbeeld:

  5. Deursigtigheid. formaat GIF ondersteun slegs absoluut deursigtige, of absoluut ondeursigtige pixels.

    Hierdie parameter, sonder bykomende aanpassing, vertoon swak lyne en verlaat pixel ladders.

    Aanpassing word genoem "Matt" (in sommige uitgawes "Border"). Dit kan gebruik word om die pixels van die beeld te meng met die agtergrond van die bladsy waarop dit geleë sal wees. Vir die beste vertoning, kies 'n kleur wat ooreenstem met die agtergrondkleur van die werf.

  6. Interlaced. Een van die nuttigste instellings vir die web. In hierdie geval, as die lêer aansienlike gewig het, kan u dadelik die prentjie op die bladsy wys, soos dit gelaai is, die kwaliteit daarvan verbeter.

  7. Die sRGB-omskakeling help om die maksimum van die oorspronklike kleure van die beeld te behou terwyl jy stoor.

aanpassing "Dithering deursigtigheid" verminder die beeldkwaliteit aansienlik, maar oor die parameter "Lost" ons praat in die praktiese gedeelte van die les.

Vir die beste begrip van die proses van die instandhouding van gifs in Photoshop, moet u oefen.

praktyk

Die doel van die optimalisering van beelde vir die internet is om die gewig van die lêer te verminder terwyl gehalte gehandhaaf word.

  1. Na die verwerking gaan die beelde na die spyskaart "Lêer - Stoor vir web".
  2. Stel die vertoningsmodus uit "4 opsies".

  3. Volgende het jy een van die opsies nodig om so na as moontlik aan die oorspronklike te maak. Laat dit die prentjie regs van die bron wees. Dit word gedoen om die lêer grootte met maksimum gehalte te skat.

    Die parameterinstellings is soos volg:

    • Kleurskema "Selektiewe".
    • "Kleure" - 265.
    • "Weifelende" - "Toevallig", 100 %.
    • Verwyder die boks voor die parameter "Interlaced", omdat die finale volume van die prentjie redelik klein sal wees.
    • "Webkleure" en "Lost" - nul.

    Vergelyk die resultaat met die oorspronklike. Onderaan die steekproefvenster kan ons die huidige grootte van die gif en die aflaaispoed by die aangeduide internetspoed sien.

  4. Gaan na die onderstaande prentjie net ingestel. Kom ons probeer dit te optimaliseer.
    • Die skema word onveranderd gelaat.
    • Die aantal kleure word verminder tot 128.
    • waarde "Weifelende" verminder tot 90%.
    • Webkleure Raak nie aan nie, want in hierdie geval sal dit ons nie help om kwaliteit te handhaaf nie.

    GIF-grootte het afgeneem van 36.59 KB tot 26.85 KB.

  5. Aangesien daar reeds graan en klein gebreke in die prentjie is, sal ons probeer om te verhoog "Lost". Hierdie parameter bepaal die aanvaarbare vlak van dataverlies tydens kompressie. GIF. Verander die waarde na 8.

    Ons het daarin geslaag om die grootte van die lêer verder te verminder, terwyl ons 'n bietjie in kwaliteit verloor. Gifka weeg nou 25,9 kilobiete.

    So, ons kon die grootte van die beeld verminder met ongeveer 10 KB, wat meer as 30% is. Baie goeie resultaat.

  6. Verdere aksies is baie eenvoudig. Druk die knoppie "Save".

    Kies 'n plek om te stoor, gee die naam van die gif en klik dan op 'Stoor ".

    Let asseblief daarop dat daar ook 'n moontlikheid is GIF skep en HTML die dokument waarin ons foto ingebed sal word. Hiervoor is dit beter om 'n leë vouer te kies.

    As gevolg daarvan kry ons 'n bladsy en 'n gids met 'n prentjie.

Wenk: as jy 'n lêer noem, probeer om nie Cyrilliese karakters te gebruik nie, want nie alle blaaiers kan dit lees nie.

In hierdie les om beelde in formaat te stoor GIF voltooi. Daarop het ons uitgevind hoe om die lêer te optimaliseer vir plasing op die internet.

Kyk na die video: Polymer Developer Summit 2016 - Live Stream Day 2 (Mei 2024).