Producción de un GIF animado con GIMP

Tabla de contenido:

Producción de un GIF animado con GIMP
Producción de un GIF animado con GIMP
Anonim

GIMP es un software notablemente poderoso considerando que es gratuito. Los diseñadores web, en particular, pueden estar agradecidos por su capacidad para producir-g.webp

Los-g.webp

Cómo hacer un-g.webp" />

Los siguientes pasos muestran una animación simple del tamaño de un banner web usando un par de gráficos básicos, algo de texto y un logotipo.

Las instrucciones de este artículo se aplican a la versión 2.10.12 de GIMP.

  1. Abrir un nuevo documento. En este ejemplo, hemos seleccionado la plantilla preestablecida de banner web móvil grande 320x100.

    Para su animación, puede seleccionar un tamaño preestablecido o establecer dimensiones personalizadas dependiendo de cómo usará su animación final.

    Para este tutorial, la animación constará de siete cuadros y cada cuadro estará representado por una capa individual, lo que significa que el archivo GIMP final tendrá siete capas, incluido el fondo.

  2. Establecer fotograma uno. La animación comenzará con un espacio en blanco, por lo que no se necesitan cambios en la capa real Background, ya que ya es completamente blanca.

    Sin embargo, es necesario cambiar el nombre de la capa en la paleta Capas. Haga clic derecho en la capa Background en la paleta y seleccione Editar atributos de capa.

    Image
    Image
  3. En el cuadro de diálogo Editar atributos de capa que se abre, agregue (250ms) al final del nombre de la capa. Esto establece la cantidad de tiempo que se mostrará este cuadro en la animación. El ms significa milisegundos y cada milisegundo es una milésima de segundo. Este primer cuadro se mostrará durante un cuarto de segundo.

    Image
    Image
  4. Establecer fotograma dos. Para el tutorial, se utiliza un gráfico de huella para este marco. Vaya a Archivo > Abrir como capas y seleccione el archivo de gráficos. Esto coloca la huella en una nueva capa que se puede colocar según sea necesario con la Herramienta Mover.

    Image
    Image
  5. Al igual que con la capa de fondo, es necesario cambiar el nombre de esta nueva capa para asignar el tiempo de visualización del cuadro. En este caso, 750ms.

    En la paleta Capas, la vista previa de la nueva capa parece mostrar un fondo negro alrededor del gráfico, pero en realidad esta área es transparente.

    Image
    Image
  6. Configure los marcos tres, cuatro y cinco. Los siguientes tres fotogramas son más huellas que caminarán por la pancarta. Estos se insertan de la misma manera que el cuadro dos, usando ese mismo gráfico y otro gráfico para el otro pie. Como antes, el tiempo se establece en 750 ms para cada fotograma.

    Cada una de las capas de la huella necesita un fondo blanco para que solo se vea un fotograma; actualmente, cada una tiene un fondo transparente. Podemos hacer esto creando una nueva capa inmediatamente debajo de una capa de huella, rellenando la nueva capa con blanco y luego haciendo clic derecho en la capa de huella y haciendo clic en Combinar hacia abajo

  7. Establecer marco seis. Este marco es solo un marco en blanco lleno de blanco que dará la apariencia de que la huella final desaparece antes de que aparezca el marco final. Hemos llamado Intervalo a esta capa y hemos elegido tener esta visualización durante solo 250 ms.

    No es necesario nombrar las capas, pero puede facilitar el trabajo con los archivos en capas.

    Image
    Image
  8. Establecer cuadro siete. Este es el cuadro final y muestra algo de texto junto con el logotipo de Lifewire.com. El primer paso aquí es agregar otra capa con un fondo blanco.

    Image
    Image
  9. A continuación, use la Herramienta de texto para agregar el texto. Esto se aplica a una nueva capa, pero nos ocuparemos de eso una vez que haya agregado el logotipo o la nueva imagen, que se puede hacer de la misma manera que se agregaron los gráficos de la huella anteriormente.

    Image
    Image
  10. Cuando tengamos estos arreglos deseados, podemos usar Combinar hacia abajo para combinar las capas de logotipo y texto y luego fusionar esa capa combinada con la capa blanca que se agregó previamente. Esto produce una sola capa que formará el cuadro final y elegimos mostrar esto durante 4000ms.

    Image
    Image
  11. Vista previa de la animación Antes de guardar el-g.webp" />Filtros >Animación > Reproducción Esto abre un cuadro de diálogo de vista previa con botones que se explican por sí mismos para reproducir la animación. Si algo no se ve bien, se puede modificar en este punto. De lo contrario, se puede guardar como un-g.webp" />.

    La secuencia de animación se establece en el orden en que se apilan las capas en la paleta Capas, comenzando desde el fondo o la capa inferior y avanzando hacia arriba. Si su animación se reproduce fuera de secuencia, deberá ajustar el orden de sus capas, haciendo clic en una capa para seleccionar y usando las flechas hacia arriba y hacia abajo en la barra inferior de la paleta Capas para cambiar su posición.

    Image
    Image
  12. Guardar el-g.webp" />. Guardar un-g.webp" />Archivo > Guardar una copia y asigne a su archivo un nombre relevante y seleccione dónde desea guardar su archivo.

    Image
    Image
  13. A continuación, vaya a Archivo > Exportar como para guardarlo como un-g.webp" />.

    Image
    Image
  14. En el cuadro de diálogo Exportar imagen que se abre, seleccione Seleccione tipo de archivo y desplácese hasta la imagen-g.webp" />. Si recibe una advertencia sobre las capas que se extienden más allá de los bordes reales de la imagen, seleccione el botón Recortar.

    Image
    Image
  15. Esto llevará ahora al cuadro de diálogo Guardar como GIF con una sección de Opciones de-g.webp" />. Puede dejarlos en sus valores predeterminados, aunque si solo desea que la animación se reproduzca una vez, debe desmarcar Loop forever.

    Image
    Image
  16. Ahora puedes compartir tu-g.webp

Conclusión

Los pasos que se muestran aquí le brindarán las herramientas básicas para producir sus propias animaciones simples, utilizando diferentes gráficos y tamaños de documentos. Si bien el resultado final es bastante básico en términos de animación, es un proceso muy sencillo que cualquier persona con conocimientos básicos de GIMP puede lograr.

Recomendado: