Crea tu propio gif con photoshop cs6 (incluido)

Buenas amigos, en esta oportunidad les traigo un pequeño tutorial de como crear tus propios gif personalizados. Sé que sobre esto se pueden encontrar muchos video-tutoriales en youtube donde aprender, pero estos obvian muchas cosas que, para los nuevos en esto, puede confundirlos. por esa razón me gustaría compartir la manera en la cual los hago yo.

Tal vez no sea la manera más rápida y "profecional" de hacerla, pero para un principiante -como yo- puede serle de utilidad. Espero ser claro y lo más preciso posible, es mi primer tutorial así que espero que me tengan paciencia...jajaja. Sólo queda decir que cualquier problema que tengan o confusión me avisan  e intentamos solucionarlo.

Sin mas, comencemos...Comencemos creando un nuevo proyecto desde la pestaña archivo o presionando "ctrl+N".

































Creamos un espacio de trabajo, en mi caso de 1920 pixels de ancho por 1080 pixels de alto, y resolución 200. No necesariamente deben ser esas, ustedes pueden hacerlo como mejor les parezca.


Les quedará algo así:





Usando el bote de pintura, rellenamos la capa de fondo con el color que prefieran. En mi caso es un gris oscuro -Exactamente #252525-. 






Creamos el texto que se verá de fondo, junto con tu firma. Los colores y las tipografía son a su total elección. Yo usé un verde -#99fa01-, un azul -#0c62bd-. Y las tipografías son: -Homestead- y -Goudy Old Style-.




Duplicamos la capa de fondo y la arrastramos arriba de las demás capas.





Con la herramienta rectángulo creamos uno, usamos el mismo color de relleno y trazado, en mi caso -#5a5a5a-, y lo ubicamos en la parte inferior de la última capa creada. 




Seleccionamos la pestaña "vista" y corroboramos que estén palomeadas las opciones de extras, reglas, ajustar y las guías. Son muy importantes para facilitar el ajuste de las capas y los textos.





Seleccionamos el rectángulo y la capa superior utilizando "ctrl" y "click primario". Luego "click secundario" y seleccionamos "combinar capas".





Movemos la combinación de capas creadas anteriormente y la ubicamos dejando visible nuestra firma. Desde regla, ubicada en la parte superior de la pantalla, bajamos una guía nueva y la ajustamos en el inferior de nuestra capa "rectángulo 1", esto nos servirá para saber hasta donde ajustaremos la capa al momento de hacer la animación.
También creamos un nuevo texto con la información que bajará y subirá al momento de hacer la animación. Utilizamos la misma combinación de tipografías y colores.



Seleccionamos la capa del último texto creado y la capa del segundo fondo "rectángulo 1" y las enlazamos. Esto nos permite mover las dos capas seleccionando solamente una. 

También podemos combinarlas como hicimos anteriormente, pero si en algún momento necesitamos editar el texto, no podremos hacerlo.


Debe quedarnos así:



Seleccionamos las capas enlazadas y las movemos hacia arriba. Yo dejé un espacio para que quede visible una sección del fondo gris oscuro. Esos detalles cada uno los hace como más les convenza...



También bajamos una guía para dejar marcado donde comenzaremos la animación, además, junto con las guías verticales evitarán que el diseño se mueva de maneras que no querremos. Es un poco tedioso pero verán que les facilitará mucho el trabajo mas adelante.




Entre la primer guía -debajo del rectángulo gris claro- y la segunda -arriba del texto de la firma-, completamos con mas guías, intentando que quede una separación lo más pareja posible entre guía y guía. Esta separación igual entre guía y guía nos permitirá crear una animación constante, sin diferencia de tiempos entre fotograma y fotograma.




Comencemos con la animación:

Iremos a la pestaña "ventana" y corroboraremos que esté tildada la casilla "línea de tiempo". 




En la esquina inferior derecha seleccionaremos "crear animación de fotogramas". 





Nos debe quedar así. Este será nuestro primer fotograma. Por defecto el primer fotograma nos quedará con un tiempo de 0 seg. Lo cambiaremos a 2 segundos que es el tiempo que nos quedará la imagen estática, antes de comenzar la animación.




En la sección marcada con rojo en la imagen, agregaremos un nuevo fotograma




Con el segundo fotograma seleccionado, mover las capas enlazadas hasta que queden alineadas a la segunda guía.



Luego, crear otro fotograma de la misma manera anterior.






Nuevamente mover las capas enlazadas hacia abajo, hasta alinearla a la siguiente guía


Repetir estos últimos dos procedimientos respectivamente hasta llegar a la última guía. a este último fotograma tendremos que cambiarle el tiempo a 2 segundos, como lo hicimos con el primer fotograma.

Luego repetir el procedimiento pero ahora hacia arriba, teniendo la precaución de que los fotogramas vuelvan a tener tiempos de 0 segundos




Al finalizar el proceso nos deben quedar unas 24 imagenes.



Para guardar seleccionamos "archivo/ guardar para web" o "Alt+Mayúsculas+Ctrl+S".




En la esquina inferior izquierda, tenemos la opción de pre visualizar la imagen completa o en diferentes porcentajes.

En la esquina inferior derecha, tenemos las opciones para reproducir la animación.

Y con la opción de guardar, seleccionaremos el destino donde alojar el gif.



Solamente queda cambiarle el nombre y elegir la carpeta donde alojarlo.



Si completan todos los pasos les quedará algo así:




Dejo algunos separadores que hice para que los utilicen o tomen de ejemplos:








Photoshop, por si alguien lo necesita o tiene otra versión distinta.Muchas gracias por pasar, me disculpo de antemano por cualquier error cometido, como dije antes, es mi primer tutorial. Espero les sea de utilidad y se animen a crear sus propias imágenes, para hacer mas originales sus aportes...
































Crea tu propio gif con photoshop cs6 (incluido)
49 Puntos Score: 4.9/10
Visitas: 1148 Favoritos: 8
Ver los usuarios que votaron...
15 Comentarios Crea tu propio gif con photoshop cs6 (incluido)
Excelente Tutorial Amigo!!! lo voy a intentar en cuanto tenga un poco de tiempo!!!

Muchas gracias por compartir!!! +5
Muy buen tutorial amigo, bien explicado y las imagenes que has dejado de muestra te han quedado geniales.
Gracias por tu tiempo y por compartir tus conocimientos  
@ricardo130 Gracias a vos por pasar...
@TRYUMPHF Int?
@matiepns Excelente, aunque me hubiera gustado en video, porque algunas imagenes no se me muestran.  
Definitivamente, un magnifico aporte amigo, sin duda mucha gente le servira este tutorial para perfeccionar sus trabajos y mejorar sus conocimientos en el dise?
@superju Si, es verdad, es que identi tiene algunos problemas con las im?
Muchas gracias, buena gu?
voy a usar unas de tus  baner en post.................
agradecido con el material amigo...

el photoshop es suleto "solo"???
o es portable,  ya que busco uno instalable completo  no portable...
@dio.99 Buena idea, lo voy a intentar a ver si sale. An?
Cual es la contrase?
@matiepns  muy bien gracias por aclararlo...
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!