Després de crear una animació en Photoshop, s'ha de guardar en un dels formats disponibles, un dels quals és GIF. Una característica d'aquest format és que es pretén mostrar (reproducció) al navegador.
Si esteu interessats en altres opcions per estalviar animacions, us recomanem llegir aquest article:
Lliçó: Com desar el vídeo a Photoshop
El procés de creació d'una animació GIF es va descriure en una de les lliçons anteriors, i avui parlarem sobre com desar el fitxer en format GIF i en la configuració d'optimització.
Lliçó: Crear una animació simple en Photoshop
Estalvi de gif.
Per començar, repetim el material i llegim la finestra Desa la configuració. S'obre fent clic a l'element "Desa per a web" al menú Fitxer.
La finestra consta de dues parts: un bloc de previsualització
i bloc de configuració.
Vista prèvia de bloc
Seleccioneu el nombre d'opcions de visualització que es selecciona a la part superior del bloc. Depenent de les necessitats, podeu seleccionar la configuració desitjada.
La imatge en cada finestra, excepte l'original, es configura per separat. Això es fa perquè pugueu triar l'opció òptima.
A la banda esquerra de l'bloc hi ha un petit conjunt d'eines. Utilitzarem només la "mà" i "escala".
Utilitzant la "mà", podeu moure la imatge a la finestra seleccionada. L'elecció es fa també per aquesta eina. "Escala" realitza la mateixa acció. Aprox i eliminar la imatge també pot ser botons a la part inferior del bloc.
Baix a continuació es mostra el botó amb la inscripció "Veure". Obre l'opció seleccionada al navegador predeterminat.
A la finestra del navegador, excepte els paràmetres de configuració, també podem obtenir el codi HTML GIF.
Configuració del bloc
En aquest bloc, els paràmetres de la imatge es configuren, el consideren més.
- Esquema de colors. Aquest paràmetre determina quina taula de colors indexats s'aplicarà a la imatge en optimitzar.
- Perceptual, i simplement "esquema de percepció." Quan s'usa, Photoshop crea una taula de colors, guiada per les ombres actual de la imatge. Segons els desenvolupadors, aquesta taula és el més a prop possible a la forma en què l'ull humà veu el color. Plus - la imatge és el més proper a l'original, els colors es guarden a l'màxim.
- L'esquema selectiu és similar a l'anterior, però els colors relacionats amb la web segur per a la Web s'utilitzen predominantment en ella. També es va centrar en la pantalla de tons aproximada a la inicial.
- Adaptatiu. En aquest cas, es crea la taula de colors que són més comuns en la imatge.
- Limitat. Consisteix de 77 colors, algunes de les mostres de les quals se substitueixen amb el blanc en forma d'un punt (gra).
- Personalitzat. A l'escollir aquest esquema, és possible crear la seva pròpia paleta.
- Blanc i negre. En aquesta taula es fa servir només dos colors (blanc i negre), utilitzant també el gra.
- En els graus de gris. Hi ha diversos nivells de 84 tons de gris.
- MacOS i Windows. dades de la taula es compilen en base a les característiques de les imatges cartogràfiques en navegadors que s'executen aquests sistemes operatius.
Aquests són alguns exemples d'esquemes que apliquen.
Com es pot veure, les tres primeres mostres tenen una qualitat bastant acceptable. Tot i que visualment gairebé no es diferencien entre si, en diferents imatges aquests esquemes treballaran de manera diferent.
- El nombre màxim de colors a la taula de colors.
El nombre de tons a sobre afecta directament al seu pes, i, en conseqüència, en la velocitat de descàrrega en el navegador. El valor de 128 és la més utilitzada, ja que aquest ajust gairebé no afecta la qualitat, a el temps que redueix el pes de l'gif.
- colors web. Aquest ajust estableix la tolerància amb què els tons es converteixen en l'equivalent d'una paleta Web segura. El camp d'arxiu es determina pel valor establert pel regulador: el valor és més alt - l'arxiu és menys. A l'configurar WEB colors no han d'oblidar de la qualitat també.
Exemple:
- Dysrying li permet suavitzar les transicions entre colors barrejant els tons que estan continguts en la taula d'indexació seleccionat.
A més, l'entorn ajudarà a preservar els gradients i la integritat de llocs monocromàtics. Quan s'utilitza de dispensació augmenta el pes de l'arxiu.
Exemple:
- Transparència. El format GIF suports píxels només és absolutament transparents, opacs o absolutament.
Aquest paràmetre, sense ajustament addicional, malament mostra les corbes de línies, deixant dames de píxels.
L'ajust es denomina "mati" (en alguns editors "Kaima"). Amb ell, es configura per barrejar imatges de píxels amb un fons de la pàgina en què es localitzarà. Per a la millor visualització, triar un color corresponent a la color de fons de el lloc.
- Entrellaçat. Un dels més útils per a la configuració web. En el cas que l'arxiu té un pes considerable, li permet mostrar immediatament una imatge en la pàgina, ja que les càrregues de la millora de la seva qualitat.
- La conversió SRGB ajuda a desar els colors màxims de la imatge original mentre estalvien.
La creació de "transparència Dysrying" empitjora significativament la qualitat de la imatge, i anem a parlar sobre el paràmetre "pèrdua" a la part pràctica de la lliçó.
Per a la millor comprensió de l'procés de creació de la preservació de gifs en Photoshop, s'ha de practicar.
pràctica
L'objectiu d'optimitzar les imatges per a Internet és la reducció màxima del pes del fitxer mantenint la qualitat.
- Després de processar la imatge, aneu a "Arxiu - Guardar per web" de menú.
- Mostra el mode de vista "4 opcions".
- A continuació, necessiteu una de les opcions per fer el més similar a l'original. Deixa que sigui una imatge a la dreta de la font. Això es fa per estimar la mida del fitxer amb la màxima qualitat.
Els paràmetres de configuració són els següents:
- Esquema de colors "selectiu".
- "Colors" - 265.
- "Diazering" és "aleatòria", 100%.
- Traieu les Daws enfront del paràmetre "entrellaçat", ja que la imatge final de la imatge serà bastant petita.
- "Colors web" i "pèrdues" - zero.
Comparar el resultat amb l'original. A la part inferior de la finestra de la mostra, podem veure la mida del GIF actual i la velocitat de càrrega a la velocitat d'Internet especificada.
- Anar a la imatge següent s'acaba de configurar. Anem a tractar de optimitzar-lo.
- Deixa l'esquema sense canvis.
- El nombre de colors a reduir fins a 128.
- valor Dysmering redueix a 90%.
- Web-colors no es toquin, perquè en aquest cas no ens ajudarà a mantenir la qualitat.
gif mida disminuir de 36,59-26,85 KB KB.
- Atès que alguns grau d'aspror i petits defectes ja són presents a la imatge, anem a tractar d'augmentar "pèrdues". Aquest paràmetre defineix un nivell admissible de la pèrdua de dades quan es comprimeix GIF. Canvieu el valor a 8.
Encara vam aconseguir reduir la mida de l'arxiu, mentre que perd una mica de qualitat. Gifs ara pesa 25,9 kilobytes.
Total, hem estat capaços de reduir la mida de la imatge al voltant de 10 KB, que és més de l'30%. Molt bon resultat.
- Noves mesures són molt simples. Feu clic al botó Desa.
Triem un lloc per guardar, donar el nom de l'GIF, i premi "Desa" de nou.
Recordeu que hi ha una oportunitat juntament amb el GIF per crear un document HTML en el qual es construirà la nostra imatge. Per a això, és millor triar una carpeta buida.
Com a resultat, s'obté una pàgina i una carpeta amb la imatge.
Consell: A l'assignar un nom d'arxiu, tracti de no fer servir caràcters ciríl·lics, perquè no tots els navegadors són capaços de llegir-los.
Aquesta lliçó per guardar la imatge en el format GIF s'ha completat. En ella, ens vam adonar de com es pot optimitzar l'arxiu per a la seva col·locació a Internet.