Como manter GIF en Photoshop

Anonim

Como manter GIF en Photoshop

Despois de crear unha animación en Photoshop, debe ser gardado nun dos formatos dispoñibles, un dos cales é GIF. Unha característica deste formato é que está destinada a amosar (xogar) no navegador.

Se estás interesado en outras opcións para gardar a animación, recomendamos ler este artigo:

Lección: Como gardar o vídeo en Photoshop

O proceso de creación dunha animación GIF foi descrita nunha das leccións anteriores, e hoxe falaremos sobre como gardar o ficheiro en formato GIF e na configuración de optimización.

Lección: Crear unha animación sinxela en Photoshop

Aforrar GIF.

Para comezar, repitimos o material e lea a xanela de Configuración de Gardar. Abre premendo no elemento "Gardar para a web" no menú Ficheiro.

Punto Gardar para web no menú Ficheiro para gardar os GIFS en Photoshop

A xanela consta de dúas partes: un bloque de vista previa

Unha unidade de receita na configuración dos parámetros da preservación de GIF en Photoshop

e bloque de configuración.

Configuración de bloque na ventá de configuración de Preservación Gifki en Photoshop

PREVIEW BLOQUE

Seleccione o número de opcións de vista que se selecciona na parte superior do bloque. Dependendo das necesidades, pode seleccionar a configuración desexada.

Selección de opcións de visualización na xanela de Configuración de Conservación de Gifki en Photoshop

A imaxe en cada xanela, excepto o orixinal, está configurado por separado. Isto faise para que poida escoller a opción ideal.

No lado esquerdo do bloque hai un pequeno conxunto de ferramentas. Usaremos só a "man" e "escala".

Ferramentas de man e escala na xanela de Configuración de Conservación de Gifki en Photoshop

Usando a "man" pode mover a imaxe dentro da xanela seleccionada. A elección tamén está feita por esta ferramenta. "Escala" realiza a mesma acción. Aprox e borrar a imaxe tamén pode ser botóns na parte inferior do bloque.

Escala de imaxe na xanela de Configuración de Conservación de Gifki en Photoshop

Baixo abaixo é o botón coa inscrición "Ver". Abre a opción seleccionada no navegador predeterminado.

Botón de vista de imaxe no navegador da xanela Configuración dos parámetros de agasallo en Photoshop

Na xanela do navegador, excepto para a configuración de parámetros, tamén podemos obter código GIF HTML.

Vista previa da imaxe no navegador predeterminado mantendo os GIFs en Photoshop

Configuración do bloque

Neste bloque, os parámetros de imaxe están configurados, considérano máis.

  1. Esquema de cores. Esta configuración determina cal será aplicada a táboa de cores indexadas á imaxe ao optimizar.

    Selección de esquema de indexación de cores mentres mantén gifs en Photoshop

    • Perceptual e simplemente "esquema de percepción". Cando se usa, Photoshop crea unha táboa de cores, guiada polos matices actuais da imaxe. Segundo os desenvolvedores, esta táboa é o máis próximo posible a como o ollo humano ve a cor. Ademais: a imaxe é a máis próxima ao orixinal, as cores son maximamente gardadas.
    • O esquema selectivo é similar ao anterior, pero as cores relacionadas coa web segura para a web son predominantemente utilizadas nel. Tamén se centra na exhibición de tons aproximar á inicial.
    • Adaptativo. Neste caso, a táboa créase a partir de cores que son máis comúns na imaxe.
    • Limitado. Consta de 77 cores, algunhas das mostras das que son substituídas por branco en forma de punto (gran).
    • Custom. Ao elixir este esquema, é posible crear a túa propia paleta.
    • Branco e negro. Esta táboa usa só dúas cores (branco e negro), tamén usando grans.
    • En graos de gris. Hai varios 84 niveis de grises.
    • MacOS e Windows. Os datos da táboa son compilados en función das características das imaxes de mapeamento nos navegadores que executan estes sistemas operativos.

    Aquí tes algúns exemplos de aplicar esquemas.

    Mostras de imaxe que utilizan varias táboas de indexación de cores mentres mantén gifs en Photoshop

    Como podes ver, as tres primeiras mostras teñen unha calidade bastante aceptable. A pesar do feito de que visualmente, case non difiren entre si, en diferentes imaxes, estes réximes funcionarán de forma diferente.

  2. Número máximo de cores na táboa de cores.

    Establecer o número máximo de cores na táboa de indexación mentres mantén os gifs en Photoshop

    O número de tons da imaxe afecta directamente o seu peso e, en consecuencia, na velocidade de descarga do navegador. O valor de 128 úsase máis frecuentemente, xa que esta configuración case non afecta a calidade, ao reducir o peso do GIF.

    Exemplos de configuración para o número máximo de cores na táboa de indexación mentres mantén os GIFs en Photoshop

  3. Cores web. Esta configuración establece a tolerancia coa que as sombras son convertidas a equivalentes desde unha paleta web segura. O campo do ficheiro está determinado polo valor establecido polo control deslizante: o valor é maior: o ficheiro é menor. Ao configurar cores web non debe esquecer tamén a calidade.

    Configurando a tolerancia á conversión da imaxe a cores web mentres mantén gifs en Photoshop

    Exemplo:

    Exemplos de configurar a conversión de cores a WEEB mentres mantén gifs en Photoshop

  4. A disryación permítelle suavizar as transicións entre as cores mesturando as sombras que están contidas na táboa de indexación seleccionada.

    Dysstering Setting mentres mantén GIFS en Photoshop

    Ademais, a configuración axudará a preservar os gradientes ea integridade dos sitios monocromáticos. Ao usar dispensación aumenta o peso do ficheiro.

    Exemplo:

    Exemplos de aplicar a configuración de disformación mentres mantén gifs en Photoshop

  5. Transparencia. O formato GIF soporta só píxeles absolutamente transparentes ou absolutamente opacos.

    Configurando a transparencia de fondo mentres mantén gifs en Photoshop

    Este parámetro, sen axuste adicional, mostra mal as curvas das liñas, deixando as mulleres de píxeles.

    Exemplos do uso do axuste mate mentres mantén os GIFs en Photoshop

    O axuste chámase "mate" (nalgúns editores "Kaima"). Con el, está configurado para mesturar imaxes de píxeles cun fondo da páxina sobre a que se localizará. Para a mellor pantalla, escolla unha cor correspondente á cor do fondo do sitio.

    Axustando a mestura de imaxes de píxeles co fondo das páxinas de prensa RESOE en Photoshop

  6. Entrelazado. Un dos máis útiles para a configuración web. No caso de que o ficheiro teña un peso considerable, permítelle mostrar inmediatamente unha imaxe na páxina, xa que carga a mellora da súa calidade.

    Establecer o entrelazado mentres mantén gifs en Photoshop

  7. A conversión SRGB axuda a gardar as cores de imaxe orixinais máximas ao gardar.

    Configurando a conversión de cores en SRGB mentres mantén gifs en Photoshop

Configurar "A transparencia de disrying" empeora significativamente a calidade da imaxe e falaremos do parámetro "perda" na parte práctica da lección.

Configuración de disrying para a transparencia e a perda de datos mentres mantén gifs en Photoshop

Para a mellor comprensión do proceso de configurar a preservación de GIFS en Photoshop, debes practicar.

Práctica

O obxectivo de optimizar as imaxes para Internet é a máxima redución do peso do ficheiro mentres mantén a calidade.

  1. Despois de procesar a imaxe, vai ao menú "Ficheiro - Gardar para web".
  2. Exponir o modo de vista "4 opción".

    Escollendo o número de opcións para ver resultados mentres mantén gifs en Photoshop

  3. A continuación, necesitas unha das opcións para facer o máis parecido ao orixinal. Deixe que sexa unha imaxe á dereita da fonte. Isto faise para estimar o tamaño do ficheiro con máxima calidade.

    A configuración de configuración é a seguinte:

    • Esquema de cores "selectivo".
    • "Cores" - 265.
    • "Diazering" é "aleatorio", 100%.
    • Retire as daws fronte ao parámetro "entrelazado", xa que a imaxe final da imaxe será bastante pequena.
    • "Cores web" e "perdas" - cero.

      Establecer os parámetros da imaxe de referencia mentres mantén os gifs en Photoshop

    Comparar o resultado co orixinal. Na parte inferior da xanela da mostra, podemos ver o tamaño GIF actual e a velocidade de carga na velocidade de Internet especificada.

    Comparación do resultado da optimización da imaxe co orixinal mantendo os GIFs en Photoshop

  4. Vaia á imaxe de abaixo recentemente configurada. Intentemos optimizalo.
    • Deixe o esquema sen cambios.
    • O número de cores reducen ata 128.
    • O valor de dismering reducido ao 90%.
    • As cores web non tocan, porque neste caso non nos axudará a manter a calidade.

      Establecer os parámetros de imaxe de destino mentres mantén os gifs en Photoshop

    O tamaño GIF diminuíu de 36,59 Kb a 26,85 KB.

    Tamaño da imaxe reducida despois da optimización mentres mantén gifs en Photoshop

  5. Dado que algúns graxos e pequenos defectos xa están presentes na imaxe, intentemos aumentar "perdas". Este parámetro define un nivel permitido de perda de datos ao comprimir GIF. Cambia o valor a 8.

    Establecer o nivel de perda de datos permitida ao comprimir GIF para gardar os gifs en Photoshop

    Aínda conseguimos reducir o tamaño do ficheiro, mentres perdemos un pouco de calidade. Os gifs agora pesan 25,9 kilobytes.

    Tamaño da imaxe despois de configurar a perda mentres mantén gifs en Photoshop

    Total, puidemos reducir o tamaño da imaxe uns 10 KB, que é máis do 30%. Moi bo resultado.

  6. As outras accións son moi sinxelas. Fai clic no botón Gardar.

    Gardar o botón na ventá de Configuración de Conservación de Gifki en Photoshop

    Eliximos un lugar para gardar, dar o nome do GIF e premer de novo "Gardar".

    Escolla un lugar e nome da preservación de gifs en Photoshop

    Ten en conta que hai unha oportunidade xunto co GIF para crear un documento HTML ao que se construirá a nosa imaxe. Para iso, é mellor escoller un cartafol baleiro.

    Aforrar gifs xunto co documento HTML en Photoshop

    Como resultado, obtemos unha páxina e unha carpeta coa imaxe.

    Cartafol con gif gardado en Photoshop

Consello: Ao asignar un nome de ficheiro, intente non usar caracteres cirílicos, porque non todos os navegadores son capaces de lelos.

Esta lección para gardar a imaxe no formato GIF complétase. Nel, descubrimos como pode optimizar o ficheiro para a colocación en internet.

Le máis