驴C贸mo hacer una imagen interactiva?

6 minutos
Escrito por: Javi Rubio
Share on whatsapp
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Share on whatsapp
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

脥ndice

Ya sabemos que 鈥榰na imagen vale m谩s que mil palabras鈥, pero a veces nos encontramos con im谩genes que contienen demasiado o ning煤n texto. Hoy vamos a hablar sobre c贸mo crear una imagen interactiva de manera muy sencilla.

Im谩genes est谩ticasIm谩genes Interactivas
Tienen una capa de informaci贸n, la que ves.Tienen diversas capas de informaci贸n.
Son planasEst谩n enriquecidas con otros tipos de contenidos como v铆deos, mapas, gr谩ficas鈥
Son ilustrativasSon funcionales
Transmites un mensajeTransmites una historia
Su consumo es unidireccionalTienes que relacionarte con la imagen para consumir todo el contenido
Son pasivasFomentan la exploraci贸n y la memorizaci贸n.

Os proponemos crear una imagen que de por s铆 tenga valor pero que adem谩s est茅 acompa帽ada de la informaci贸n necesaria para completarla y hacerla realmente interesante y atractiva para el usuario.

驴Qu茅 debemos hacer?

En primer lugar tenemos que insertarla en Genially. Lo m谩s sencillo es cargarla como fondo (pincha en la pesta帽a 芦fondo禄, selecciona 鈥榮ube una imagen鈥 y posteriormente 鈥榚stablecer como imagen de fondo鈥) y despu茅s tan solo tenemos que a帽adir tantos pines como queramos o necesitemos desde la pesta帽a 芦Interactividad禄 arrastr谩ndolos y coloc谩ndolos donde queramos.

Hay pines para todos los gustos seg煤n las necesidades que tengamos as铆 que rev铆salos bien para escoger el estilo que mejor le vaya a tu imagen. A los pines les podemos a帽adir informaci贸n de todo tipo desde v铆deos, a otras im谩genes, enlaces a webs, GIFs, el timeline de redes sociales y pr谩cticamente cualquier material que se nos ocurra.

Por 煤ltimo podemos a帽adirles algunos efectos de animaci贸n e interactividad con los que conseguiremos captar la atenci贸n y el inter茅s de nuestra audiencia casi sin enterarse.

Ejemplos de im谩genes interactivas

A continuaci贸n ten茅is una serie de ejemplos que os pueden servir de inspiraci贸n para crear vuestras propias im谩genes interactivas. Este tipo de im谩genes, en las que a trav茅s de pines, ventanas, etiquetas y dem谩s elementos el usuario va descubriendo informaci贸n de la misma, pueden usarse en diferentes 谩mbitos como es el de la educaci贸n, el marketing, la comunicaci贸n, el dise帽o y la publicidad obteniendo resultados realmente sorprendentes como estos:

Cartel informativo

Con esta opci贸n podemos generar contenido informativo o explicativo, de forma que la imagen nos cuente una historia, alguna curiosidad o simplemente queramos resaltar alg煤n detalle de la misma.

P贸ster educativo

Esta es una de las mejores formas de aprender algo, ya que cuando lo est谩s haciendo, est谩s buscando y memorizando informaci贸n y cuando obtienes el resultado es una forma estupenda de estudiar ya que te tienes que esforzar por recordar el contenido del gr谩fico creado.

Anuncio publicitario

Puede servir para llamar la atenci贸n sobre alg煤n producto que te interese y lo mejor de todo es que puedes enlazarlo para que te lleve directamente al producto que desees.

Con una simple imagen y algunos datos que la completen podemos crear contenido para nuestra campa帽a de publicidad o marketing, que atraiga realmente a nuestros clientes.

Imagen curiosa

Es imposible saberlo todo, pero desde luego siempre podemos aprender algo nuevo, y 驴por qu茅 no hacer una imagen que nos ense帽e algo diferente?

Cat谩logo interactivo

Por supuesto podemos crear nuestra propio cat谩logo interactivo a帽adi茅ndole un extra de informaci贸n a cada prenda como d贸nde comprarla o de qu茅 est谩 hecha a trav茅s de una breve explicaci贸n en una etiqueta o ventana.

隆Seguro que consegu铆s unos resultados impactantes con vuestras im谩genes interactivas!

Y si quer茅is que los dem谩s sean tan genially como vosotros no os olvid茅is de compartir este art铆culo.

Crea tu imagen interactiva con Genially

  1. El primer paso es acceder a Genially y hacer clic en 鈥淐rear Genially鈥, situado en el men煤 lateral izquierdo. Para ello debes estar registrado/a en la herramienta. Si no est谩s registrado, no te preocupes, es gratis.
    En este ejemplo te mostraremos c贸mo convertir el selfie m谩s famoso del mundo en una imagen interactiva genial.
  2. Una vez dentro de Genially selecciona 鈥淐rear Genially鈥 y elige 鈥淚magen interactiva鈥.
  3. A continuaci贸n, pulsa en 鈥淐rear Imagen Interactiva鈥. Puedes seleccionar tu imagen desde tu equipo o bien desde una URL.
驴C贸mo hacer una imagen interactiva?
  1. 隆Ahora comienza la diversi贸n! Ya en el editor, transformar una imagen est谩tica en una imagen interactiva genial es muy sencillo.
  2. Vamos a comenzar a帽adiendo elementos interactivos. Para a帽adirlos, simplemente vamos al men煤 de elementos interactivos de la barra izquierda y arrastramos el bot贸n hasta el lienzo.

Los botones son composiciones de iconos y formas animadas que sirven para indicar una acci贸n. Puedes modificarlos en dimensiones y colores, como en este ejemplo en el que hemos agrandado el bot贸n y lo hemos coloreado de amarillo.

Para ello, selecciona el bot贸n y elige el color desde la barra superior

驴C贸mo hacer una imagen interactiva?

Vamos a a帽adir interactividad a nuestro bot贸n. Para ello, pulsa en el icono de la mano que aparece sobre el bot贸n o bien, con el bot贸n seleccionado, haz clic en el men煤 de interactividad de la barra lateral derecha.

驴C贸mo hacer una imagen interactiva?
  1. Vamos a asignar una etiqueta a nuestro bot贸n interactivo.
  2. Seleccionamos la interactividad mediante etiquetas ya que queremos a帽adir un contenido con poco texto. Al seleccionar 鈥淓tiqueta鈥 se abre el editor en el que podemos insertar nuestro contenido. Para el ejemplo, hemos copiado y pegado directamente un contenido de wikipedia. En tu imagen interactiva puedes a帽adir tanto texto como im谩genes, gifs鈥
驴C贸mo hacer una imagen interactiva?
  1. En el men煤 de interactividad de nuestro nuevo bot贸n seleccionamos 鈥渧entana鈥. Las ventanas permiten ampliar el contenido y enriquecer al m谩ximo nuestra creaci贸n con PDFs, v铆deos, texto鈥 cualquier cosa que quieras a帽adir. En este caso, el v铆deo del momento selfie.
  2. Para ello, simplemente vamos a youtube, copiamos la url del v铆deo que genera autom谩ticamente desde la opci贸n 鈥渃ompartir鈥 y la pegamos en la ventana 隆casi magia! Pulsa el bot贸n 鈥済uardar鈥 para que tu ventana sea funcional.
驴C贸mo hacer una imagen interactiva?
  1. Nuestro v铆deo queda perfectamente embebido en la ventana. Puedes probar a hacer una vista previa para comprobar c贸mo se ve.
  2. Para terminar de enriquecer nuestra imagen interactiva, vamos a a帽adir un 谩rea invisible que se encuentra en el men煤 鈥淓lementos interactivos鈥 de la barra izquierda. Simplemente arrastra el 谩rea al lienzo, a la zona que quieras convertir en interactiva. Puedes modificar su tama帽o para ajustarlo a tus necesidades.
驴C贸mo hacer una imagen interactiva?
  1. Haz clic en el icono de insertar imagen y selecciona la imagen desde tu dispositivo.

隆Ya tenemos lista nuestra imagen interactiva!

Tips

Comparte tu creaci贸n

Es el momento de compartir tu creaci贸n haciendo uso del bot贸n share icon compartir situado en la barra superior.

Genially permite cuatro v铆as principales para compartir:

  • Mediante enlace
  • Insertar en tu blog o web
  • Enviar por email
  • Compartir en redes sociales

Estas opciones te permiten mantener la originalidad, animaci贸n e interactividad de tu creaci贸n.

Tipos de Interactividad

Puedes dotar de interactividad a cualquier recurso (texto, imagen, icono, fotograf铆a,鈥). Para hacerlo tan solo tienes que tener seleccionado un objeto y pinchar en el icono que aparece en su parte superior o en la barra de la derecha. Existen 4 tipos de interactividad:

  • Etiquetas: Las etiquetas se usan para mostrar contenidos breves, se activan al pasar el rat贸n por encima del elemento; se desactivan al dejar de posar el rat贸n. Te recomendamos textos de menos de 300 caracteres en las etiquetas, para que su visualizaci贸n sea la m谩s 贸ptima.
  • Ventanas: Las ventanas est谩n indicadas para mayores cantidades de contenido que las etiquetas. Aun as铆, evita grandes cargas de texto en ventanas y etiquetas. Se activan al hacer clic sobre el elemento y se desactivan al cerrar la ventana clicando en el aspa.
  • Ir a p谩gina: esta funcionalidad te permite navegar entre p谩ginas mediante elementos. Es una funcionalidad especialmente pensada para gu铆as, microsites, juegos,鈥
  • Enlaces. Tambi茅n tienes la posibilidad de enlazar tu creaci贸n con un v铆nculo externo.

Ya est谩s preparado/a para crear im谩genes interactivas que dejen alucinada a tu audiencia. 隆Comienza a darle vida a tus contenidos!

Javi Rubio
Javi Rubio
"El mundo no es nuestro pero s铆 est谩 en nuestras manos."
Post relacionados

驴Quieres estar al tanto de las novedades del universo Genially?

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *