COM DESAR GIF A PHOTOSHOP

Després de crear una animació a Photoshop, cal desar-la en un dels formats disponibles, un dels quals és Gif. Una característica d’aquest format és que està dissenyada per mostrar (jugar) al navegador.

Si esteu interessats en altres opcions per desar l’animació, us recomanem que llegiu aquest article aquí:

Lliçó: Com desar el vídeo a Photoshop

Procés de creació Gif L’animació s’ha descrit en una de les lliçons anteriors i avui parlem sobre com guardar el fitxer Gif i configuracions d’optimització.

Lliçó: crea una animació senzilla a Photoshop

Desar GIF

Per començar, repeteix el material i mireu la finestra de configuració de desar. S'obre fent clic a l'element. "Desa per a la web" al menú "Fitxer".

La finestra consta de dues parts: un bloc de previsualització

i bloquejar la configuració.

Vista prèvia del bloc

La selecció del nombre d’opcions de visualització es selecciona a la part superior del bloc. Depenent de les vostres necessitats, podeu seleccionar la configuració desitjada.

La imatge de cada finestra, excepte l’original, està configurada per separat. Això es fa perquè pugueu triar la millor opció.

A la part superior esquerra del bloc hi ha un petit conjunt d’eines. Usarem només "Mà" i "Escala".

Amb l’ajut de "Mans" Podeu moure la imatge dins de la finestra seleccionada. La selecció també es fa mitjançant aquesta eina. "Escala" realitza la mateixa acció. També podeu ampliar i reduir amb els botons a la part inferior del bloc.

Just a sota hi ha el botó etiquetat "Visualitza". Obre l’opció seleccionada al navegador predeterminat.

A la finestra del navegador, a més d’un conjunt de paràmetres, també podem obtenir Codi HTML gifs

Bloc de configuració

En aquest bloc, els paràmetres de la imatge es configuren, considerem-ho amb més detall.

Esquema de colors. Aquest paràmetre determina quina taula de colors indexada s'aplicarà a la imatge durant l’optimització.
- Perceptual, sinó simplement "esquema de percepció". Quan s'aplica, Photoshop crea una taula de colors, guiada pels tons actuals de la imatge. Segons els desenvolupadors, aquesta taula és el més a prop possible de com l’ull humà veu els colors. A més, més a prop de la imatge original, els colors es guarden tant com sigui possible.
- Selectiu L'esquema és similar a l'anterior, però utilitza principalment colors segurs per a la web. També se centra en la visualització de tons propers a l'original.
- Adaptatiu. En aquest cas, la taula es crea a partir de colors que es troben més sovint a la imatge.
- Limitat. Consta de 77 colors, alguns dels quals són substituïts pel blanc en forma de punt (gra).
- Personalitzat. En triar aquest esquema, és possible crear la vostra pròpia paleta.
- Blanc i negre. Aquesta taula només utilitza dos colors (blanc i negre), també utilitzant gra.
- En escala de grisos. Aquí s'apliquen 84 nivells de grisos.
- MacOS i Windows. Aquestes taules es compilen a partir de les funcions de visualització d’imatges als navegadors que executen aquests sistemes operatius.
Aquests són alguns exemples d’ús de sistemes.
Com podeu veure, les tres primeres mostres tenen una qualitat bastant acceptable. Tot i que visualment no difereixen entre si, aquests sistemes funcionaran de manera diferent en diferents imatges.
El nombre màxim de colors a la taula de colors.
El nombre de tons de la imatge afecta directament el seu pes i, en conseqüència, la velocitat de descàrrega al navegador. El valor més utilitzat 128Atès que aquesta configuració té gairebé cap efecte sobre la qualitat, alhora que redueix el pes del gif.
Colors web. Aquest paràmetre estableix la tolerància amb la qual les tintes es converteixen en equivalents des d'una paleta web segura. El pes del fitxer es determina pel valor establert pel control lliscant: el valor és més gran: el fitxer és més petit. Quan configureu els colors web, no us oblideu de la qualitat.
Exemple:
El dithering us permet suavitzar les transicions entre colors barrejant els matisos que es troben a la taula d’índex seleccionada.
L’ajustament també ajudarà, en la mesura del possible, a preservar els gradients i la integritat de les àrees monocromàtiques. Quan s'utilitza el dithering, el pes del fitxer augmenta.
Exemple:
Transparència. Format Gif admet només píxels absolutament transparents o absolutament opacs.
Aquest paràmetre, sense ajustaments addicionals, mostra línies corbes malament, deixant escales de píxels.
Es diu ajustament "Gelat" (en algunes edicions "Border"). Es pot utilitzar per barrejar els píxels de la imatge amb el fons de la pàgina on es localitzarà. Per obtenir la millor visualització, trieu un color que coincideixi amb el color de fons del lloc.
Entrellaçat. Una de les opcions més útils per a la Web. En aquest cas, si el fitxer té un pes significatiu, us permetrà mostrar immediatament la imatge a la pàgina, ja que es carrega, millorant la seva qualitat.
La conversió sRGB ajuda a mantenir el màxim dels colors originals de la imatge mentre deseu.

Personalització "Transparència" Degrada significativament la qualitat de la imatge, però sobre el paràmetre "Pèrdues" parlarem a la part pràctica de la lliçó.

Per entendre millor el procés de configuració de la preservació de gifs a Photoshop, cal practicar-lo.

Pràctica

L’objectiu d’optimitzar les imatges per a Internet és minimitzar el pes del fitxer tot mantenint la qualitat.

Després de processar les imatges, aneu al menú "Fitxer - Desa per a la web".
Exposeu el mode de visualització "4 opcions".
A continuació, necessiteu una de les opcions per fer el més a prop possible de l’original. Que sigui la imatge a la dreta de la font. Això es fa per estimar la mida del fitxer amb la màxima qualitat.
La configuració dels paràmetres és la següent:
- Esquema de colors "Selectiu".
- "Colors" - 265.
- "Dithering" - "Aleatori", 100 %.
- Traieu la casella de selecció situada davant del paràmetre "Entrellaçat", perquè el volum final de la imatge serà bastant petit.
- "Colors del web" i "Pèrdues" - zero.
Compareu el resultat amb l’original. A la part inferior de la finestra de mostra, podem veure la mida actual del gif i la seva velocitat de descàrrega a la velocitat d’Internet indicada.
Aneu a la imatge de sota configurada. Intentem optimitzar-lo.
- El sistema no es modifica.
- El nombre de colors es redueix a 128.
- Significat "Dithering" reduït al 90%.
- Colors web no toqueu, perquè en aquest cas no ens ajudarà a mantenir la qualitat.
La mida del GIF ha disminuït de 36,59 KB a 26,85 KB.
Com ja hi ha algun gra i petits defectes a la imatge, intentarem augmentar "Pèrdues". Aquest paràmetre determina el nivell acceptable de pèrdua de dades durant la compressió. Gif. Canvieu el valor a 8.
Hem aconseguit reduir encara més la mida del fitxer, tot perdent una mica de qualitat. Gifka pesa ara 25,9 kilobytes.
Per tant, vam poder reduir la mida de la imatge en uns 10 KB, que supera el 30%. Molt bon resultat.
Les accions addicionals són molt senzilles. Premeu el botó "Desa".
Trieu un lloc per desar, proporcioneu el nom del gif i feu clic a "Desa ".
Tingueu en compte que hi ha una possibilitat juntament amb Gif crear i HTML el document en què s'incrustarà la nostra imatge. Per això és millor seleccionar una carpeta buida.
Com a resultat, obtenim una pàgina i una carpeta amb una imatge.