Psd photoshop guardar como gif. Cómo hacer un GIF en Photoshop a partir de imágenes y videos. Cómo crear una animación GIF a partir de un video

Creé un banner animado en Photoshop CC y necesito guardarlo como GIF.

Usé Línea de tiempo/Movimiento. Cuando "Guardo para Web", el segundo cuadro desde arriba se establece en "GIF".

Y sí, tengo el ciclo configurado en "Para siempre".

¿Podrías tomar una captura de pantalla de la configuración de guardado? Cuando guardo HTML e imágenes, termino con una página HTML y una carpeta de imágenes que contiene un bucle GIF animado para siempre.

valiente

Parece que puede estar configurando algo mal, definitivamente ayudará a ver qué configuraciones está usando. Acabo de crear un GIF en bucle guardado como "Solo imágenes" y funciona muy bien para mí. Un solo archivo .gif que se repite cuando se abre en mi navegador.

respuestas

justin

Para responder a su pregunta principal: Sí, puede guardar la animación como una imagen de Photoshop CC. No necesitará reconstruirlo en Flash.

Parece que puede tener algunas configuraciones mal configuradas, o su animación está construida incorrectamente. Publicar más detalles ayudará. Intenté reproducir tu problema y no puedo encontrar lo que describiste. Mientras tanto, este es el proceso para crear un GIF desde Photoshop CC:

Primero, configura tu cuadro o animación de línea de tiempo (cualquier tipo de animación debería funcionar, aunque prefiero la administración de cuadros cuando hago un GIF). Luego elija Archivo > Exportar > Guardar para web (heredado)…

Seleccione Guardar y seleccione las opciones de guardado. No es necesario seleccionar ninguna de las opciones de HTML si solo está exportando la animación a GIF.

Debido a que crear una animación y exportarla como un archivo .gif con Photoshop implica varios pasos diferentes, es importante verificar la reproducción de la animación durante todo el proceso.

Las pruebas continuas no solo garantizan que obtenga los resultados que desea en el archivo final, sino que también lo ayudan a saber qué parte del proceso corregir si algo está mal.

Nehil Vasuwal

Guárdelo como está. Emitirá activos, uno de los cuales será un GIF. Simplemente verifique dónde se guardan los archivos.

kurt

¿Y por qué y cómo se puede probar esto? ¡Tu comentario es demasiado corto para una respuesta adecuada! ¡Por favor explíquese mejor y bienvenido a GD.SE!

Hacer una animación gif no es difícil si tienes Photoshop.

Ahora te diré cómo hacerlo.

Crea un documento multicapa. Para facilitar la explicación, creé dos capas.
Abrir Windows→Espacio de trabajo→Ventana de movimiento

En el área de la línea de tiempo que aparece, cree fotogramas y asigne a cada fotograma una capa correspondiente uno por uno.

En la parte inferior, debajo de cada cuadro, establezca el tiempo de visualización de diapositivas. Para la primera diapositiva, especifiqué 1,5 segundos, para la segunda, un segundo.

Presione el botón Reproducir y experimente eligiendo el retraso de cuadro de animación óptimo.

Para evitar presionar el botón cada vez. puede hacer un proceso continuo, establezca el valor en Forever.

Cuando alcance el intervalo de cambio de cuadro requerido, el trabajo se puede considerar terminado. Guarde la fuente como PSD y la animación como GIF. Especifique más colores si el degradado de la imagen es demasiado simplista. formado por puntos.

El resultado será así:

Les conté brevemente, lo más necesario. Para obtener más información sobre cómo crear animaciones gif en Photoshop, consulte el video tutorial. ¡Pruébalo, seguro que aciertas!

Le doy la bienvenida a la próxima lección, gracias a la cual aprenderá cómo guardar correctamente la animación gif en Photoshop. Para que después de guardar se vea como lo hiciste, sin rayas innecesarias, bordes afilados y otras pequeñas cosas que muchas personas encuentran.

Cómo guardar como GIF

Nota: el formato gif solo está disponible si las imágenes están en 8 bits/canal. (gif solo admite 8 bits/canal, tenlo en cuenta).

Para convertir una imagen a 8 bits/canal, vaya a la pestaña Imagen -> Modo -> 8 bits/canal.

Para guardar la animación, seleccione Archivo -> Guardar para web -> Formato de archivo optimizado (GIF).

Asegúrese de marcar la casilla junto a Convertir a sRGB, esto guardará exactamente los colores que usó para mostrar en el navegador.

Nota: en la mayoría de los casos (90%) establecido en "permanentemente".

Ante nosotros hay un gran cuadro de diálogo. Echemos un vistazo más de cerca a algunas de las opciones.

Colores

Preste atención a este parámetro (el número máximo de colores en la tabla de colores, por defecto está establecido en 64. Este número se considera un valor promedio (como la media dorada) y es ideal para casi todo.

Por ejemplo, para una animación en blanco y negro, el valor 64 me parece innecesariamente grande. Para la animación en b/n puse el valor en 16, me parece ideal. Y para la animación, por ejemplo, de cualquier elemento web (botones, pancartas, avatares, etc.), el valor promedio es demasiado pequeño, lo que genera rayas desagradables. Veamos un ejemplo:

| ¿Viste la más mínima diferencia?

Lo único que quiero señalar es que en animaciones grandes, el tamaño del archivo fuente varía.

Y ahora el siguiente ejemplo, en el botón web

Gif guardado con valor de color 64 (tamaño 18,9 kb)

Gif guardado con valor de color 256 (tamaño 37,9 kb)

Siente la diferencia, ¿verdad? tanto en calidad como en tamaño. Siempre hay que sacrificar algo, en mi caso le doy prioridad a la "Calidad" los 19 kb extra no me asustan tanto, a diferencia de la calidad.

entrelazado

Este parámetro no es menos importante que todos los demás. Si guarda la animación con la casilla de verificación Entrelazado habilitada, la animación en el navegador irá junto con la carga de la imagen. Y si guarda sin usar esta opción, la animación se mostrará solo después de que la imagen esté completamente cargada. El uso de esta opción reduce el tiempo de descarga, pero afecta significativamente el tamaño del archivo de origen.

Como regla, entrelazado está activo por defecto, decida si usarlo o no.

Repitamos los puntos principales de guardar una animación gif en Photoshop:

Seleccione Archivo -> Guardar para web -> GIF
Marque la casilla junto a sRGB
Establecer opciones de reintento (permanente, una vez, otro)
Haga clic en el botón "Guardar"

Hay un par de preguntas:

¿Estás usando "Entrelazado"?
¿Es más importante para ti la calidad o el tamaño?

GUARDAR ANIMACIÓN
EN PHOTOSHOP

¿Cómo guardar en Photoshop? - es más fácil de lo que piensa, hay varias formas de guardar los archivos que crea o edita en Photoshop. En nuestro caso, los archivos que creamos, los llamamos imágenes.

A menudo, la gente me pregunta: "¿Cómo guardar la animación en Photoshop?" - esta pregunta es una de las más importantes para guardar imágenes en Photoshop. La respuesta a esta pregunta es muy simple, para guardar la animación en Photoshop, debe hacer lo siguiente: haga clic en el panel superior Archivo - Guardar para dispositivos web - también hay una opción más rápida usando teclas de acceso rápido, aunque para mí es No es más fácil, yo uso el mouse, pero si alguien quiere probar aquí está el comando en sí: Alt + Shift + Ctrl + S

Después de completar estos pasos, se abrirá una nueva ventana frente a usted en la que puede establecer la configuración de su imagen, es decir, puede establecer la calidad de la imagen guardada, esto es necesario para que, si decide cargar este archivo. a su sitio Web, este archivo no pesa demasiado, pero al mismo tiempo puede elegir el tamaño de imagen óptimo para usted con pérdida de calidad óptima.

En la sección "Configuración", puede establecer el formato de su imagen y luego realizar la configuración para este formato. Para guardar la animación, deberá seleccionar la calidad GIF y luego guardar el archivo en su computadora.

Espero que entiendas cómo guardar la imagen que necesitas en Photoshop. La forma en que pinté se puede usar principalmente cuando necesita guardar la animación (esta es la única forma de guardar la animación en Photoshop, aún no se ha inventado otra) o una imagen estática para el sitio.

Pero no habría respondido a fondo a la pregunta "cómo guardar en Photoshop" si no hubiera considerado otra forma de guardar imágenes en Photoshop. Puede hacer clic en Archivo - Guardar (la versión en inglés suena así: Archivo - Guardar), después de lo cual aparecerá una ventana frente a nosotros en la que podemos seleccionar el formato, así como la ruta al lugar exacto donde queremos guardar la imagen

Y otra forma de guardar se ve así: Archivo - Guardar como... (La versión en inglés suena así: Archivo - Guardar como...) en esta opción, al igual que en la opción anterior, aparecerá una ventana frente a usted en el que selecciona el formato y la ruta que necesita para la ubicación donde desea guardar el archivo (imagen)

Pero al mismo tiempo, repito, las dos últimas opciones no son adecuadas al guardar la animación GIF, puede seleccionar el formato .gif en ellas, pero la imagen permanecerá no animada, sino que solo tendrá un fragmento de uno de los cuadros. (Puedes probar esta opción y ver qué pasa)

También vale la pena señalar que en la primera opción no podrá guardar su archivo en resolución .psd; Photoshop lee este formato, es decir, si guarda su archivo en este formato, puede abrirlo con Photoshop en en cualquier momento y continúa trabajando sobre la imagen, manteniendo la secuencia de capas, en una palabra, volverás al lugar desde el que cerraste Photoshop.

Ver capturas de pantalla para ver cómo se ve en acción
paso 1

paso 2

¿Alguna vez te has preguntado cómo se crean los GIF animados? El autor de la lección te ofrece dominar algunos de los secretos de la animación en una noche con la ayuda de esta lección. También aprenderá a utilizar la línea de tiempo, que está disponible en Photoshop CS6. ¡Y ahora comencemos!

resultado de la lección.

Paso 1

Crear un nuevo documento ( Ctrl + N) con un tamaño de archivo de 800 x 500 píxeles. Rellena el fondo con el color que quieras. Ahora vamos al menú. Capas- Estilocapa- Superposicióndegradado(Capa > Estilos de capa > Superposición de degradado). Aplique la siguiente configuración: Estilo Radial(Radial), colores desde negro (#000000) hasta azul (#54799b) para ser utilizado en el centro.

Paso 2

Crea una nueva capa y nómbrala capa de ruido. Elige una herramienta llenar(Herramienta Cubo de pintura) y rellene la capa creada con un color oscuro (# 231f20). Dejar capa activa capa de ruido e ir al menú Filtro - Ruido - Añadir ruido(Filtro > Ruido > Añadir ruido). En el cuadro de diálogo de configuración de filtro, establezca los siguientes valores: Efecto(Cantidad) 3%, distribución Uniforme(Uniforme) y haga clic en Aceptar.

Paso 3

Presione combinación de teclas (ctrl +tu) y en el cuadro de diálogo de configuración de corrección que aparece, introduzca los valores Saturación(Saturación) 100%: cambie el modo de fusión de esta capa a Luz tenue(Luz tenue).

Nota del traductor: para lograr el mismo color que el del autor en la captura de pantalla, puede establecer el valor de Tono en - 140 al corregir Tono / Saturación (Hue / Saturation).

Etapa 4

Añade cualquier texto que quieras. Aquí usaremos el texto del logotipo del sitio web de 123RF. En el uso de estilos de capa Ataque(ataque). Seleccione el tamaño del trazo según su preferencia.

Nota del traductor: En la pantalla del autor, el texto ya está rasterizado junto con el estilo Trazo. Para que sea lo mismo para usted, después de aplicar el trazo, elimine el Relleno (Llenar) de la capa de texto al 0%, convierta esta capa en un objeto inteligente y luego rasterícelo.

Paso 5

En este paso, crearemos un efecto de texto brillante usando estilos de capa. Haga doble clic en la capa para abrir la ventana de configuración de estilo. Use las capturas de pantalla a continuación para personalizar los estilos de capa.

Realce(bisel y relieve)

sombra interior(Sombra interior)

brillo interior(Brillo interior)

superposición de color(superposición de color)

resplandor externo(brillo externo)

Sombra(Sombra paralela)

Paso 6

Una vez que haya terminado de crear efectos de iluminación usando estilos de capa, vaya a la paleta de capas y reduzca el valor de esta capa a llena(Rellenar) al 0%.

Paso 7

Duplique la capa que creó en el paso 5 y desactive todos los estilos de capa de esta copia. Ahora configure los estilos de esta manera:

sombra interior(Sombra interior)

brillo interior(Brillo interior)

Paso 8

A continuación se muestra el resultado después de aplicar los estilos de capa.

Paso 9

Ahora crearemos puntos de luz en movimiento. Cree 5 capas encima de las existentes y renómbrelas como 1,2,3, R y F. Si tiene su propio texto, cree capas de acuerdo con sus letras. Agrupe estas capas en una carpeta y asígnele un nombre. Puntos de luz y cambiar el modo de fusión a Base de aclarado(Sobreexposición de colores).

Activar la herramienta Cepillar(Herramienta Pincel), seleccione un pincel suave, configure Opacidad(Opacidad) al 95% y con color blanco, dibuja motas sobre el texto. Cada letra tiene un punto de luz separado en su propia capa. A continuación, en la captura de pantalla, puede ver cómo se ven las capas del autor en la paleta de capas.

Paso 10

Ahora vamos al menú. Ventana - Línea de tiempo(Ventana > Línea de tiempo). Notará que sus capas ya están integradas en esta paleta en el lado izquierdo. Seleccione cada una de las cinco capas de puntos de luz que están en el grupo Puntos de luz y asegúrese de que el indicador de tiempo actual (control deslizante azul) esté en el fotograma cero. Ahora en cada capa del grupo, con ella activa, haga clic en la opción Posición(Posición) para crear un fotograma clave.

Nota del traductor: Para activar la escala de tiempo, presione el botón Crear línea de tiempo de video(Crear línea de tiempo de video) y todas sus capas se cargarán en la línea de tiempo. En ella se seleccionará la misma capa o grupo que en la paleta de capas.

Paso 11

Establezca el indicador de tiempo actual (control deslizante azul) en el 01:00 V y mueva las capas con puntos claros a lo largo de la ruta de su movimiento en relación con el contorno de la letra.

Paso 12

Así se verá la posición inicial del punto de luz sobre las letras. Mueva el indicador de tiempo actual en la escala y mueva las capas con puntos claros, creando fotogramas clave. Sigue arrastrándolos hasta que hayas terminado de mover la mota por toda la letra de cada capa de texto. Vea algunas capturas de pantalla a continuación para obtener instrucciones.