APRENDAMOS A DISEÑAR

GIF EN IMAGEN ESTÁTICA

COMO INSERTAR UN GIF ANIMADO A UNA IMAGEN ESTÁTICA.

Mis pequeños saltamontes, les habla el ponquésensei.
Hoy vengo con mi primer tutorial a pretición del público, no sé que tan buena soy con esto así que vamos a ver, explicaré todo lo más sencillo posible para que todos entendamos y trataré de no explayarme tanto, aunque este es un tema que podría tener varias cosas que valdrían la pena explicar más.

Bien, el resultado final será este:
[Tienes que estar registrado y conectado para ver esa imagen]
¡Y tanto como pueda parecer del otro mundo o no, es super sencillo... casi!

Conseguir gifs es de lo más sencillo, podemos buscarlos en google imágenes, en tumblr, devianart o en weheartit, todo lo que tenemos qué hacer es escribir: nombredelartista gif. Y con esto aclarado, vamos al tutorial.

1. Abrimos la imagen estática que usaremos. Esta puede ser un avy, parte de un pack (que confío y espero pronto estemos enseñando a hacerlos) como este clic o simplemente una imagen. Yo usaré una imagen cualquiera.
[Tienes que estar registrado y conectado para ver esa imagen]
2. Ahora es cosa de abrir el gif, lo cual no es muy diferente a abrir una imagen cualquiera, con la diferencia, claro, de que este es un gif. (no me digas ಠ_ಠ) Nos va a salir este montón de capas pero no se preocupes, bbys.
[Tienes que estar registrado y conectado para ver esa imagen]
3. Antes que nada más, vamos a agruparlas para que TODO sea más sencillo. Entonces, clicaremos al final del recuadro de las capas, en la carpeta [Tienes que estar registrado y conectado para ver esa imagen], entonces se generará un grupo al cual, si queremos (no es realmente necesario) le pondremos nombre. En mi caso, con doble clic, le coloqué el nombre de "gif"
[Tienes que estar registrado y conectado para ver esa imagen]
4. Lo que ahora haremos es meter las capas en el grupo. Antes solía hacerlo uno por uno (cuando eran gifs largos ya se imaginarán cómo me jodía), pero gracias a batman, un día cualquiera, encontré la manera de hacerlo todo más practico, y como ponquésensei que soy se lo transmitiré. Lo que haremos ahora es seleccionar cualquier capa del gif y le daremos clic derecho, a continuación clicaremos la opción de "seleccionar capas similares" y ¡halá!
[Tienes que estar registrado y conectado para ver esa imagen]
5. Lo siguiente sería tan sencillo como arrastrar las capas juntas al nuevo grupo, así como seguro Mily ya os ha enseñado. Sabrán si lo han hecho bien cuando el grupo se pase a la parte superior y al darle clic, las capas se esconden.
[Tienes que estar registrado y conectado para ver esa imagen]
6. Lo siguiente será pasar el gif a la imagen estática. Arrastramos la pestaña del gif hacía el interior del área de trabajo y soltamos, con lo que el gif quedará algo así como flotando. Ahora, con el mismo proceso arrastramos el grupo a la imagen.
[Tienes que estar registrado y conectado para ver esa imagen]
7. Todo lo que os he mostrado hasta ahora no es mucho ¿verdad? bueno, ahora si a lo que vinimos. Lo primero será abrir la ventana de animación, así que nos vamos a la pestaña "ventana" en la barra de herramientas y seleccionamos la opción que dice "animación", justo debajo de "acciones".
[Tienes que estar registrado y conectado para ver esa imagen]
Ahora, atención a esto. La ventana puede saliros así:
[Tienes que estar registrado y conectado para ver esa imagen]
y si lo hace todo lo que tienen qué hacer es clicar en el pequeño cuadro a la esquina inferior izquierda y ¡violá!
[Tienes que estar registrado y conectado para ver esa imagen]
8. Con lo que seguiremos será redimencionar la imagen. Como milo ya os ha enseñado; seleccionamos el grupo, CTR+T y con Shit apretado lo colocamos del tamaño que queramos y en el lugar que queramos.
[Tienes que estar registrado y conectado para ver esa imagen]
9. Aquí es dónde se jode la cosa. Bueno, no realmente. Sólo aseguraos de estar muy atentos. Es el momento de incorporar el gif a la imagen, y podemos hacerlo de tres maneras.

A) Podemos dejar el gif como está, caso en que el que este paso es irrelevante y no veo necesidad de explicarlo. Si lo quieres dejar así, salta al paso 10.

B) Podemos incorporarlo mediante marcos o frames png. ¿Qué cosa, ponquésensei? Tranquilos, ya les explico. Un frame o marco png es básicamente esto:
[Tienes que estar registrado y conectado para ver esa imagen]
y seguramente las habréis visto. Hay millares en deviantart, en brushes (pinceles) o png (imagenes transparentes). Yo elegí esta (que es un brush) debido a que la imagen es bastante rectangular y uno png (la mayoria son cuadrados) no funcionaría muy bien. El pack de brushes pertenece a melemel, gracias mel. Lo que haremos con el frame será colocarlo sobre la imagen, este es png por lo que se vería el interior y efectivamente luciría como un marco.
[Tienes que estar registrado y conectado para ver esa imagen]
Es un efecto que a mi opinión, no es tan malo. Cada quien con sus gustos.
C) Este es el que más uso, y el menos complicado. ¿Por qué? sólo necesitamos una goma de borrar y eso es todo. Lo que haremos será lo siguiente;

•Duplicaremos la capa de la imagen (CTRL+J o simplemente clic derecho->duplicar capa) y la pondremos al principio de todo.
[Tienes que estar registrado y conectado para ver esa imagen]
•Seleccionaremos la herramienta goma de borrar y en la parte superior seleccionaremos un brush con un efecto que nos guste, ya sea punteado o rasgado. Realmente no es necesario descargar nada de esto, hay brushes por defecto en photoshop que funcionarían perfectamente.
[Tienes que estar registrado y conectado para ver esa imagen]
•Lo siguiente no tiene técnica, no es más que ir tanteando sobre la imagen, borrando dónde recordamos que estaba el gif hasta obtener un patrón que nos guste. Recuerda que si haces un progreso que te gusta sueltes el clic, para así no equivocarte y luego tener qué deshacerlo todo.
[Tienes que estar registrado y conectado para ver esa imagen]
Tip: intenten no tocar los bordes del gif; que no se vea cuadrado, a mi parecer es mejor estéticamente.
[Tienes que estar registrado y conectado para ver esa imagen]
10. Lo que haremos ahora será decorarlo. Si queremos un texto o una imagen png este es el momento de ubicarlo. ¡Dejen su imaginación fluir! p.d: recuerden hacerlo todo en un capa nueva, no hagan nada sobre la imagen.
[Tienes que estar registrado y conectado para ver esa imagen]
11. Una vez terminen, pueden meterlo todo en un grupo, como hicieron con el gif, para que las cosas no se queden estorbando por ahí.  Claro que esta vez si tendrán que seleccionarlos todos mediante CRTL sostendio.

—¡Hey, ponqué-sensei! Todo está genial pero... ¡El gif no se mueve!
—Si, si, pequeño ponquemonte, ya vamos a esa parte.

12. Para ir terminando con el tutorial (más largo que los calzones de mi abuela ಠ_ಠ) lo que ahora haremos será darle movimiento al gif. Para esto tendremos qué fijarnos en cuantas capas tiene el gif y abrir la misma cantidad de cuadros en la barra de animación. Por ejemplo, mi gif tiene 43 capas (ಠ_ಠ) entonces tendré qué abrir 43 cuadros en la barra de animación. ¿Como abrimos cuadros nuevos? sencillo, dando clic a la pequeña hojita en la parte inferior de la barra [Tienes que estar registrado y conectado para ver esa imagen]. La clicaremos hasta que tengamos la cantidad necesaria de cuadros.

13. Lo que ahora haremos será algo molesto, pero es necesario. Abriremos el grupo para poder ver las capas del gif y entonces lo que haremos será activar cada capa en un cuadro diferente en la barra de animación. Me explico mejor. En el cuadro uno tendremos activada la capa uno, pero entonces en el cuadro dos dos de la barra de animación, activaremos la capa dos, y así sucesivamente. Eso creará el efecto de secuencia. Puede ser molesto, porque puede que como yo, tengan el gif más largo del mundo (ಠ_ಠ) pero sin esto el gif no funcionará. So... manos a la obra.
[Tienes que estar registrado y conectado para ver esa imagen]
14. Una vez hayan terminado, nos fijaremos en dos cosas: Uno, el tiempo. El tiempo por defecto de photoshop es diez segundos por cada imagen, ¿saben cuando se reproduciría mi gif? ¡En diez años! Vale, no, pero es un tiempo exageradamente largo. Es recomendable un tiempo de 0sg o de 1sg, o el que viene con el gif. (para saber cual viene en el gif simplemente abránlo y observen en la parte inferior de las capas cuantos segundos dice)

— ¡Ponqué-sensei!
—Si, tu, la del fondo.
— ¿Debo colocar el tiempo en cada capa?
—Si, pequeño ponquemontes.
—Pero... ¿eso no tomaría mucho tiempo?
—Si, de hecho. Me alegra que preguntes.

•Lo que haremos será ir a la esquina de la ventana de animación y clicaremos en el siguiente icono [Tienes que estar registrado y conectado para ver esa imagen]y entonces seleccionaremos la opción "Seleccionar todos los cuadros".  [Tienes que estar registrado y conectado para ver esa imagen] Todos los cuadros se pondrán oscuritos, entonces lo que haremos será dar clic en la parte dónde dicen los segundos [Tienes que estar registrado y conectado para ver esa imagen]. Se abrirá una ventana en la que salen las opciones de segundos predefinidas, pero si no queremos ninguna, si queremos, por ejemplo, 0,07sgs, lo único que hay qué hacer es dar en "otro" y escribir los segundos en el cuadro. Una vez seleccionemos el tiempo todos los cuadros cambiarán a la par.
[Tienes que estar registrado y conectado para ver esa imagen]
»La segunda cosa en la que nos fijaremos será en el botón de repeticiones. Deben asegurarse de que esté en "infinito", para ello sólo hay que ubicarlo, darle clic y seleccionar "infinito". Entonces daremos "play" al gif para ver como anda. [Tienes que estar registrado y conectado para ver esa imagen]Si finalmente anda bien y nos gusta como quedó, podemos colocarle un pds (de la misma forma en la que Milo ya os ha explicado; fijaos que quede sobre todo lo que hayáis puesto para que quede el efecto en todo).

15. Lo que finalmente haremos será guardar. Es tan fácil como ir a: Archivo -> GUARDAR PARA WEB Y DISPOSITIVOS, fijarse si está en GIF y finalmente guardar, le dan el nombre y aceptar. ¡Y eso es todo, mis pequeños ponquemontes! Que no es tan dificil, ¿verdad?
[Tienes que estar registrado y conectado para ver esa imagen]
Haber, adelante, quiero ver sus resultados. Si tienen dudas comenten que intentaré responderlas.
Y esto es todo, tengan buena noche/día, pequeños ponquemontes.
El ponqué-sensei se despide.