Despois de crear unha animación en Photoshop, cómpre gardala nun dos formatos dispoñibles, un deles é Gif. Unha característica deste formato é que está deseñado para mostrar (reproducir) no navegador.
Se che interesa outras opcións para gardar a animación, recomendamos ler este artigo aquí:
Lección: como gardar vídeo en Photoshop
Proceso de creación Gif A animación descríbese nunha das leccións anteriores e hoxe falaremos sobre como gardar o ficheiro Gif e opcións de optimización.
Lección: Crea unha animación sinxela en Photoshop
Gardar GIF
Para comezar, repita o material e bótalle un ollo á ventá de configuración de gardar. Ábrese premendo no elemento. "Gardar para a web" no menú "Ficheiro".
A xanela consta de dúas partes: un bloque de previsualización
e bloquear a configuración.
Vista previa do bloque
A selección do número de opcións de visualización está seleccionada na parte superior do bloque. Dependendo das súas necesidades, pode seleccionar a configuración desexada.
A imaxe en cada ventá, agás o orixinal, configúrase por separado. Isto faise para que poida escoller a mellor opción.
Na parte superior esquerda do bloque hai un pequeno conxunto de ferramentas. Usaremos só "Man" e "Escala".
Coa axuda de "Mans" Pode mover a imaxe dentro da xanela seleccionada. A selección tamén é feita por esta ferramenta. "Escala" realiza a mesma acción. Tamén pode ampliar ou reducir os botóns na parte inferior do bloque.
Abaixo está o botón etiquetado "Ver". Abre a opción seleccionada no navegador predeterminado.
Na ventá do navegador, ademais dun conxunto de parámetros, tamén podemos obter Código HTML gifs
Bloque de configuración
Neste bloque, configúlanse os parámetros da imaxe, imos analizala con máis detalle.
- Esquema de cores. Esta configuración determina que táboa de cores indexada aplicarase á imaxe durante a optimización.
- Perceptual, senón simplemente "esquema de percepción". Cando se aplica, Photoshop crea unha táboa de cores, guiada polos tons actuais da imaxe. Segundo os desenvolvedores, esta táboa está o máis preto posible de como o ollo humano ve cores. Ademais - máis próximo á imaxe orixinal, as cores gárdanse na medida do posible.
- Selectivo O esquema é semellante ao anterior, pero sobre todo usa cores seguras para a web. Tamén se centra na visualización de tons próximos ao orixinal.
- Adaptativo. Neste caso, a táboa créase a partir de cores que se atopan máis comúnmente na imaxe.
- Limitada. Consta de 77 cores, algúns dos cales son substituídos por brancos en forma de punto (gran).
- Personalizado. Ao escoller este esquema, é posible crear a súa propia paleta.
- Branco e negro. Esta táboa usa só dúas cores (branco e negro), tamén usando grans.
- En escala de grises. Aquí aplícanse varios niveis de gris de 84 graos.
- MacOS e Windows. Estas táboas compiláronse en función das características de visualización de imaxes nos navegadores que executan estes sistemas operativos.
Aquí tes algúns exemplos do uso de esquemas.
Como podes ver, as tres primeiras mostras teñen unha calidade bastante aceptable. A pesar de que visualmente non difiren entre si, estes sistemas funcionan de xeito diferente en imaxes diferentes.
- O número máximo de cores na táboa de cores.
O número de tons da imaxe afecta directamente o seu peso e, en consecuencia, a velocidade de descarga no navegador. O valor máis utilizado 128Xa que esta configuración ten case ningún efecto sobre a calidade, á vez que reduce o peso do gif.
- Cores web. Esta configuración define a tolerancia coa que os tons se converten en equivalente desde unha paleta web segura. O peso do ficheiro está determinado polo valor definido polo control deslizante: o valor é maior, o ficheiro é máis pequeno. Ao configurar as cores web non esqueza a calidade.
Exemplo:
- O dithering permítelle suavizar as transicións entre as cores mesturando as tonalidades contidas na táboa de índices seleccionada.
O axuste tamén axudará, na medida do posible, a preservar os gradientes e a integridade das áreas monocromáticas. Ao empregar o dithering, o peso do ficheiro aumenta.
Exemplo:
- Transparencia. Formato Gif soporta só píxeles absolutamente transparentes ou absolutamente opacos.
Este parámetro, sen axuste adicional, mostra liñas curvas mal, deixando escaleiras de píxeles.
Chámase axuste "Xeado" (nalgunhas edicións "Fronteira"). Pódese usar para mesturar os píxeles da imaxe co fondo da páxina na que se localizará. Para obter a mellor visualización, escolla unha cor que coincida coa cor de fondo do sitio.
- Entrelazado. Unha das opcións máis útiles para a web. Nese caso, se o ficheiro ten un peso significativo, permítelle mostrar inmediatamente a imaxe na páxina, xa que está cargada, mellorando a súa calidade.
- A conversión sRGB axuda a manter o máximo das cores orixinais da imaxe mentres garda.
Personalización "Transparencia transparente" Degrada significativamente a calidade da imaxe, pero sobre o parámetro "Perdas" falaremos na parte práctica da lección.
Para unha mellor comprensión do proceso de configuración dun gif en Photoshop, cómpre practicar.
Práctica
O obxectivo de optimizar as imaxes para a Internet é minimizar o peso do ficheiro mantendo a calidade.
- Despois de procesar as imaxes vaia ao menú "Ficheiro - Gardar para a web".
- Expoña o modo de vista "4 opcións".
- A continuación necesitas unha das opcións para achegar o máis posible ao orixinal. Que sexa a imaxe á dereita da fonte. Isto faise para estimar o tamaño do ficheiro coa máxima calidade.
A configuración dos parámetros é a seguinte:
- Esquema de cores "Selectivo".
- "Cores" - 265.
- "Dithering" - "Aleatorio", 100 %.
- Elimina a caixa de verificación diante do parámetro "Entrelazado", porque o volume final da imaxe será bastante pequeno.
- "Cores web" e "Perdas" - cero.
Compare o resultado co orixinal. Na parte inferior da xanela de mostra, podemos ver o tamaño actual do gif ea súa velocidade de descarga á velocidade indicada de Internet.
- Ir á imaxe de abaixo recentemente configurada. Intentámolo optimizar.
- O esquema non se modifica.
- O número de cores redúcese a 128.
- Significado "Dithering" reducido ao 90%.
- Cores web non toque, porque neste caso non nos axudará a manter a calidade.
O tamaño GIF diminuíu de 36,59 KB a 26,85 KB.
- Como xa hai algúns graos e pequenos defectos na imaxe, intentaremos aumentar "Perdas". Este parámetro determina o nivel de perda de datos aceptable durante a compresión. Gif. Cambia o valor a 8.
Conseguimos reducir aínda máis o tamaño do ficheiro, perdendo un pouco de calidade. Gifka agora pesa 25,9 kilobytes.
Así, conseguimos reducir o tamaño da imaxe duns 10 KB, o que supera o 30%. Moi bo resultado.
- Outras accións son moi sinxelas. Prema o botón "Gardar".
Escolla un lugar para gardar, indique o nome do gif e faga clic en "Gardar ".
Ten en conta que hai unha posibilidade xunto con Gif crear e HTML o documento no que se incrustará a imaxe. Para iso é mellor seleccionar un cartafol baleiro.
Como resultado, obtemos unha páxina e un cartafol cunha imaxe.
Consello: ao nomear un ficheiro, tente non usar caracteres cirílicos, porque non todos os navegadores poden lelos.
Nesta lección sobre como gardar imaxes en formato Gif completado. Nela descubrimos como optimizar o ficheiro para a colocación en Internet.