Crea emoticonos animados con Photoshop en 10 pasos

Por Iván Ramírez el día 26 febrero, 2010

Gracias a los emoticonos, las conversaciones en programas de chat son más amenas. Los hay de todos los tipos y colores, pero siempre hay alguno que falta. ¿Dónde está el que usarías para expresar que están llamando a la puerta mientras levantas una ceja y te tomas un café?

En casos así, mejor remangarse y hacerlos tú mismo. Vamos a ver, a continuación, cómo hacer un emoticono simple con Adobe Photoshop. El proceso es rápido y sencillo: si tardas más de 15 minutos, ¡te devolvemos el dinero!

1. Archivo nuevo en Photoshop

Crear un emoticono nuevo en Photoshop empieza igual que crear cualquier otra cosa: Archivo > Nuevo. Aquí, lo único que debes tener en cuenta es el tamaño máximo de los emoticonos animados para Messenger, que es de 50 x 50 píxeles. Así pues, es mejor que hagas tu animación a dicha resolución para evitar que Messenger escale la imagen por su cuenta (se vería mucho peor).

El resto de opciones están bien tal y como aparecen. Si acaso, querrás cambiar el color de fondo a Transparente.

2. Prepara tu imagen inicial

Si eres un artista del lápiz o el ratón, ya puedes ponerte manos a la obra. En mi caso, he decidido basarme en una imagen existente: el logotipo de Softonic. Lo he recortado y adaptado para que encaje en mi nuevo archivo de 50 x 50 píxeles. Además, está en una capa aparte, y no como fondo.

3. Crea una capa para cada fotograma

Tras esto, ya puedes empezar con tu creación. Deberás aplicar pequeñas modificaciones a la imagen inicial; la mejor forma de hacerlo es duplicar la capa y modificarla.

4. Edita las distintas capas que serán fotogramas

Ahora que ya tienes dos capas, puedes editarlas. En mi caso, voy a convertir el logotipo en un ágil malabarista, por lo que he cambiado la posición de la "bola gorda". Dicha modificación se encuentra en una capa aparte y es que, recuerda, cada fotograma debe ser una capa independiente.

Puedes crear tantas capas (que luego serán fotogramas) como quieras, pero ten en cuenta que el GIF animado no puede ocupar más de 150kb: es otra limitación de Windows Live Messenger.

5. Crea los fotogramas de animación

Una vez las capas están listas, llega el momento de convertirlas en fotogramas. Para ello necesitas la ventana Animación (Ventanas > Animación).

Por defecto sólo incluirá un fotograma. Haz clic en el botón Duplicar el fotograma actual para crear tantos como necesites.

6. Oculta las capas necesarias

Llegados a este punto, tienes que determinar qué se verá en cada fotograma. ¿Cómo? Es fácil, cada fotograma es capaz de recordar la configuración de visibilidad de las capas. Es decir: si en el fotograma 1 sólo tienes visible una capa, en el fotograma 2 puedes tener visibles otras. Así es como crearás la animación, modificando las capas visibles para cada fotograma, de modo que se presenten las capas que has modificado en el orden deseado. Es como pasar hojas muy rápido.

7. Selecciona la duración de cada fotograma

Una vez has terminado con el trabajo anterior, es recomendable cambiar la duración del fotograma. Básicamente, es el tiempo que permanecerá la imagen en pantalla. Puedes elegir el valor que desees, pero acuérdate de pulsar el botón Play para comprobar el resultado.

8. Graba para la web

Si estás satisfecho con tu animación, ha llegado el momento de grabarla. No uses el menú Grabar convencional, no respetará la animación. Tienes que utilizar Grabar para la Web en su lugar.

Las opciones requieren algo de conocimiento previo para aprovecharlas con sabiduría, así que, si no es tu caso, limítate a grabar. Sí es recomendable seleccionar Transparencia, pues el emoticono se integrará mucho mejor en la ventana. Reducir el número de colores hará que el archivo resultante sea más ligero (por si tienes problemas para bajar de los 150 kb de máximo)

9. Crea un emoticono nuevo en Messenger

Ya está listo: ahora hay que ponerlo en Messenger. Haz clic en el menú Herramientas > Emoticonos y presiona Crear.

10. Selecciona su atajo

Busca el archivo GIF que creaste con Photoshop, así como el atajo de teclado que lo llamará. El nombre es completamente innecesario y se rellena por sí sólo con el nombre del archivo: déjalo tal cual.

Resultado final

Bueno, seguramente no ganaré ningún premio al mejor diseño de emoticono del año, pero al menos es personal y no he tardado más de 15 minutos en crearlo. ¿Te animas a hacer tu propio emoticono animado?

Comentarios de usuarios

  • Seth Seth

    Pues está muy bueno el dato. Lo voy a probar a ver que tal me va.

    • Enviado 26 feb 2010
  • Seguidores del REY de reyes Seguidores de<br />l REY de rey

    Muy bueno el tutorial, claro y preciso.

    • Enviado 26 feb 2010
  • Gonzo Gonzo

    Gracias, seguid asi :D

    • Enviado 26 feb 2010
  • The Internet is a Series of Blogs (XXII) | Ultimos Avances The Internet <br />is a Series

    [...] OnSoftware Iván Ramirez explica paso por paso cómo crear un GIF animado desde Photoshop, y añadirlo como [...]

    • Enviado 28 feb 2010
  • Crear emoticonos animados con Photoshop Crear emotico<br />nos animados

    [...] emoticonos por mensajería instantánea, alguno de vez en cuando suele sacarnos una sonrisa, en el blog de softonic puedes encontrar un tutorial para photoshop con el que podrás crear emoticonos [...]

    • Enviado 01 mar 2010
  • Crea un emoticon con Photoshop | Codigo Geek Crea un emoti<br />con con Phot

    [...] En el blog de Softonic ONsoftware publican un tutorial que describe en 10 pasos como crear un emoticon animado con Photoshop y luego agregarlo con lo demás en el Windows live Messenger. Link [...]

    • Enviado 03 mar 2010
  • Como Hacer Un Blog Como Hacer Un<br /> Blog

    Hola que buen tuto lo pondre en practica

    • Enviado 04 mar 2010
  • Crea un emoticon in Photoshop in soli 10 passi&nbsp;|&nbsp;Voci dal Web Crea un emoti<br />con in Photo

    [...] LINK AL SITO: clicca qui [...]

    • Enviado 04 mar 2010
  • Crea tu propio icono animado en simples pasos | UnUsuario Crea tu propi<br />o icono anim

    [...] Fuente: OnSoftware [...]

    • Enviado 04 mar 2010
  • Crea un emoticon con Photoshop Crea un emoti<br />con con Phot

    [...] En el blog de Softonic ONsoftware publican un tutorial que describe en 10 pasos como crear un emoticon animado con Photoshop y luego agregarlo con lo demás en el Windows live Messenger. Link [...]

    • Enviado 08 mar 2010
  • luis luis

    no q e okkkkkkkkkkkkkkkkkk

    • Enviado 09 mar 2010
  • Agradecido Agradecido

    ¡Por fin alguien que de verdad da ciertas explicaciones y no se anda con zarandajas copiando tutoriales 1000 veces repetidos por la web, para solucionar problemas con los emoticonos! enormemente agradecido

    • Enviado 08 may 2010
  • PEDRO PEDRO

    Un agradecimiento compartir su conocimiento, gracias.

    • Enviado 13 may 2010
  • Lince777 Lince777

    Gracias por el tutorial, está excelente!

    • Enviado 08 jul 2010
  • Shuare Shuare

    Gracias!! Me servirá de ayuda para crear mis propios emoticonos para hacer temas para el móvil! Saludos!

    • Enviado 21 jul 2010
  • ----- -----

    pero como puedo crear un emoticono ayuda pliissss.

    • Enviado 13 ago 2010
  • shamakito nuvex shamakito nuv<br />ex

    lasa colonias puro corte klllllllllllllll

    • Enviado 18 ago 2010
  • montserrat xD montserrat xD

    s muy fomee (K)

    • Enviado 15 sep 2010
  • TRVCKITO TRVCKITO

    MUI BUENO DE SEGURO AYUDARA A MUCHOS PARA PERSONALIZAR SUS COMENTARIOS..XD

    • Enviado 08 nov 2010
  • Renzo Renzo

    Muy Fomeeen

    • Enviado 16 dic 2010
  • Alberto Moreno Alberto Moren<br />o

    Muy buen tutorial, muchas gracias y felices fiestas.

    • Enviado 29 dic 2010
  • LALALA LALALA

    lalalalala NOO ME INTERESA LALLALALAA

    • Enviado 30 dic 2010
  • x-adan x-adan

    .__ . MAS O MENOS L TUTORIAL, PERO DE = FORMA SE AGRADECE EL APORTE . __ .!

    • Enviado 30 dic 2010
  • x-adan x-adan

    .__ . MAS O MENOS L TUTORIAL, PERO DE = FORMA SE AGRADECE EL APORTE . __ .!

    • Enviado 30 dic 2010
  • jose jose

    genial he hecho uno (pero tarde 16 minutos, devuelveme mi dinero xdxdxd)

    • Enviado 31 dic 2010
  • cubacafe cubacafe

    se los dejo a ustedes y a todos los que han y seguiran opinando,pero este tiene que ser el mejo,sigan ayudandos..BUENISIIIii....mo!

    • Enviado 31 dic 2010
  • Mr. Photoshop Mr. Photoshop

    Yo tengo PS CS5 T.T

    • Enviado 31 dic 2010
  • walterdej walterdej

    ke buen tuto.voy a probar,pero primero a dominar bien el photoshop cs5 ke es medio enredado

    • Enviado 01 ene 2011
  • paola paola

    no le entendiii nadaaa :-(

    • Enviado 01 ene 2011
  • paola paola

    no le entendiii nadaaa :-(

    • Enviado 01 ene 2011
  • paola paola

    no le entendiii nadaaa :-(

    • Enviado 01 ene 2011
  • Erepatri Erepatri

    Sencillo y eficaz, Gracias

    • Enviado 03 ene 2011
  • Walter Walter

    Agradecere que tengan en español para bajar gracias Waltercito

    • Enviado 03 ene 2011
  • Wilfred Wilfred

    gracias por el tutorial

    • Enviado 04 ene 2011
  • homosabio homosabio

    se ve bien por lo que veo es bueno pero tengo que probar para dar fe de lo practicado,gracias un mil por la informacion.

    • Enviado 07 ene 2011
  • homosabio homosabio

    a proposito quien pueda ayudarme, tengo una lapto,que puedo hacer pago a un vecino por el internet, red inalambrica pero la misma se cae de repente como hacer para que funcione perfecta .muchas gracias

    • Enviado 07 ene 2011
  • jose orlando brizzi jose orlando <br />brizzi

    fantastico,eres inteligente para crear un programa,pero perdon,no lo eres para facilitar su descarga,si lo puedes arreglar gracias-jose

    • Enviado 09 ene 2011
  • rgerman5 rgerman5

    Exelente Gracias por yu modestia

    • Enviado 10 ene 2011
  • maloso91 maloso91

    regular el tuto ya lo habia visto en youtube ahi es mass facil entenderlo despues de leer este jajaja. chido men

    • Enviado 11 ene 2011
  • AysLuM . AysLuM .

    Como se baja esto ????

    • Enviado 14 ene 2011
  • Marü Marü

    Yo tengo el Photofiltre. ¿Sirve igual? gracias!

    • Enviado 17 ene 2011
  • trusy trusy

    para que version de photoshop es esto? porque en la mia no aparece la opcion de "animacion"

    • Enviado 17 ene 2011
  • trusy trusy

    la opcion de ANIMACION que no se si se ha entendido bien

    • Enviado 17 ene 2011
  • BRXYXN BRXYXN

    para crear esmoiticonos es mejor el firewors que el Photoshop y es mas facil de usar

    • Enviado 22 ene 2011
  • claudia claudia

    ESta bueno, asi cambiamos un poco!!!!

    • Enviado 24 ene 2011
  • adrish adrish

    yeah!!! si me kedó la mia ... gracias por el tuto, digo lo mismo Fireworks sirve mejor pa eso... Pero como usuario, el photoshop, está bien :D

    • Enviado 24 ene 2011
  • devii12 devii12

    puedes editar tus fotos o donde se hace ? =/

    • Enviado 25 ene 2011
  • Adán Adán

    yo soy del REAL MADRID

    • Enviado 27 ene 2011
  • karen dayana karen dayana

    son unos complicados con decirles que no les entendi ni un culo de lo que dijeron quisiera que existiera una pagina que explique mas...

    • Enviado 28 ene 2011
  • karen dayana karen dayana

    son unos complicados con decirles que no les entendi ni un culo de lo que dijeron quisiera que existiera una pagina que explique mas...

    • Enviado 28 ene 2011
  • asdas asdas

    Muy Bueno.

    • Enviado 03 feb 2011
  • Diego Diego

    bueno, me diria bueno pero como puedo ¿duplicar una capa? :|

    • Enviado 07 mar 2011
  • uj uj

    uj

    • Enviado 03 abr 2011
  • gabriela gabriela

    gracias se ve genial y no muy complido hace rato queria hacer emoticonos

    • Enviado 30 abr 2011
  • YAINETH PEREZ YAINETH PEREZ

    MAS FINO

    • Enviado 17 may 2011
  • Zibri Zibri

    I made a 50x50 gif which is always the same frame repeated. The GIF size is 50x50 and I think I saved correctly.. it shows perfectly in preview and explorer. But when I load it in live messenger 2011 it shows small! Help!

    • Enviado 12 nov 2011
  • Escribe un comentario

Softonic en Facebook