¿Cómo hacer una imagen interactiva?

7 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 ‘una 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 ‘sube una imagen’ y posteriormente ‘establecer 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 “Crear 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 “Crear Genially” y elige “Imagen interactiva”.
  3. A continuación, pulsa en “Crear 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 “Etiqueta” 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 “ventana”. 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 “compartir” y la pegamos en la ventana ¡casi magia! Pulsa el botón “guardar” 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ú “Elementos 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."

Aprende todo sobre la comunicación interactiva en Genially Academy

Post relacionados
5 respuestas

Deja una respuesta

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