¿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

Una imagen vale más que mil palabras, y una imagen interactiva, más todavía 😀

Las imágenes interactivas tienen un tremendo potencial para mejorar la comunicación: permiten transmitir una historia de forma visual, creativa e innovadora. Son quizá el formato de contenido digital más eficaz para lograr la interacción de tu audiencia.

Puedes utilizarlas para crear contenidos corporativos, recursos formativos o para difundir cualquier idea, y puedes compartirla de diferentes formas, incluso insertar tu imagen interactiva en WordPress. 

Para que puedas ponerte manos a la obra, te contamos cómo crear una imagen interactiva de manera muy sencilla, y también todas las opciones que tienes para compartirla. Además, te mostramos una serie de ejemplos muy inspiradores para que les saques todo el partido posible.

Imagen estática VS imagen interactiva: ¿qué diferencias existen?

Imagen de las diferencias entre una imagen estática y un Imagen interactiva

Por último, las imágenes estáticas se consumen de forma pasiva. Y una imagen interactiva fomenta la exploración y la memorización.

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.

¿Cómo se hace?

Crear imágenes interactivas con Genially es muy sencillo: no necesitas dominar a la perfección el diseño, ni hace falta que sepas de programación. Solo necesitas tres pasos para crear tu imagen interactiva:

  • Colocar una imagen base como fondo del lienzo
  • Añadir los elementos interactivos que quieras utilizar  
  • ¡Dotar a los elementos de interactividad!

Para sacarle el máximo partido, lo ideal es que la imagen de base tenga valor por sí misma, ya sea porque es llamativa o porque  ilustra muy bien algún aspecto de lo que quieres transmitir. Así, cuando le añadas información, la harás aún más interesante y atractiva para tu audiencia. 

En Genially encontrarás un montón de elementos interactivos para añadir a tu imagen. ¡Hay para todos los gustos! Revísalos bien para escoger el que mejor se adapte a lo que necesitas comunicar.. Marcadores, botones… podrás añadir tantos como quieras.

La interactividad te permitirá añadir información de todo tipo: vídeos, otras imágenes, enlaces a sitios web, GIFs, tus perfiles en redes sociales o cualquier contenido que se te ocurra. Así, la información se articula en varias capas y tu audiencia la va descubriendo a medida que interactúa con la imagen.

Además, también podrás añadir efectos de animación a los elementos. La animación es muy eficaz para captar la atención y el interés de tu audiencia, y multiplica el potencial de la interactividad. ¡Es casi imposible que se resistan a hacer clic! 

¿Se te ocurren ideas para aplicar estos recursos tan efectivos? ¡Sigue adelante para inspirarte con los ejemplos!

6 ejemplos de imágenes interactivas

Las imágenes interactivas tienen aplicación en cualquier ámbito: educación, marketing, comunicación, diseño o formación. Puedes conseguir resultados tan sorprendentes como estos: 

Cartel informativo

Este recurso es muy útil para generar contenido informativo o storytelling. Elige una imagen base que te ayude a transmitir tu mensaje contando una historia, mostrando alguna curiosidad o resaltando algún detalle.

Póster educativo

Este es un recurso excelente para aprender, ya que mientras lo haces, vas buscando y memorizando información. Es una estupenda forma de estudiar ya que crear el gráfico te ayuda a recordar la información que vas añadiendo. Y también funcionará muy bien como recurso educativo. Una imagen de gran impacto visual captará de forma eficaz la atención del alumnado.  

Anuncio publicitario

Con un anuncio publicitario lograrás llamar la atención sobre el producto o servicio que quieras. Y lo mejor de todo es que puedes enlazar el contenido para que te lleve directamente a conocer mejor el producto o servicio o a la compra. 

De esta forma, con una simple imagen y algunos datos es muy sencillo atraer a tus clientes con contenido interactivo para cumplir los objetivos de tu campaña de publicidad o marketing. 

 Imagen curiosa

Es imposible saberlo todo, ¡siempre hay cosas nuevas que aprender! ¿Por qué no hacer una imagen que despierte la curiosidad de la audiencia? La interactividad estimula el aprendizaje.

Catálogo interactivo

Por supuesto podrás crear tu propio catálogo interactivo y añadir algo de información extra a cada artículo, como por ejemplo dónde comprarlo o de qué está hecho. Solo tienes que incluir lo que quieras en una etiqueta o ventana: un mapa, un vídeo, una breve explicación…  

GIF interactivo

Los GIFs animados son muy atractivos para casi cualquier audiencia, son divertidos y muy eficaces para captar la atención gracias al movimiento. Añadiendo interactividad a este formato podrás explorar nuevas posibilidades creativas y potenciar el engagement de tu público al máximo. 

¿Quieres probar? ¡Seguro que consigues unos resultados impactantes con tu imagen interactiva!

Crea tu imagen interactiva con Genially

Veamos un ejemplo práctico: convertiremos esta foto de la muralla china en una genial imagen interactiva. Es recomendable preparar antes de empezar lo que vas a añadir a tu imagen: textos, vídeos, fotos, mapas… Te resultará mucho más sencillo si tienes a mano un documento o una carpeta con toda la información. 

¿Aún no conoces Genially? ¡Mira este tutorial!

Lo primero que tendrás que hacer será seleccionar la imagen de base. En la sección “Crear Imagen Interactiva”,  tendrás opción de subir una desde tu equipo, pegar una URL o elegir una imagen de Unsplash sin salir de Genially. 

En el menú del editor de genially hay un apartado dedicado enteramente a los elementos interactivos. ¡Elige los que más te gusten! Un elemento interactivo es simplemente una composición de iconos y formas que sirve para indicar una acción. Además, los elementos interactivos son personalizables: puedes modificar su tamaño y su color.  

 ¿Cómo añadir interactividad a los elementos de tu imagen interactiva?

Al seleccionar el elemento que quieres hacer interactivo  aparecerán dos iconos sobre él: el de la mano es el de la interactividad. Al hacer clic sobre él se abrirá un selector para elegir el tipo de interactividad.

Tipo de interactividad en Genially

Según el contenido que quieras añadir, necesitas un tipo de interactividad u otro. Estos son los 4 tipos de interactividad de Genially:

  • Etiquetas: las etiquetas se usan para mostrar contenidos breves. Se activan al pasar el ratón por encima del elemento y se desactivan al dejar de pasar el ratón. Para una buena visualización, es recomendable que el texto no supere los 300 caracteres. Si necesitas más, elige una ventana.  
  • Ventanas: las ventanas están indicadas para mayores cantidades de contenido que las etiquetas. Aun así, te recomendamos evitar grandes cargas de texto en ventanas y etiquetas. Se activan al hacer clic sobre el elemento.Las ventanas te permitirán enriquecer tu imagen añadiendo cualquier formato de contenido: PDFs, vídeos, textos… 
  • Ir a página: esta funcionalidad te permite llevar a tu audiencia a otra página dentro del mismo genially.  Así puedes complementar la información de la imagen con contenido adicional que tu audiencia podrá ver sin necesidad de salir del recurso.
  • Enlaces: para enlazar tu creación con cualquier sitio externo. Puedes añadir la URL de tu blog o web, o de la página que quieras.

Completa tu imagen interactiva

¿Quieres añadir más explicaciones o destacar otros puntos de interés de la imagen? Vuelve a la sección “elementos interactivos” y añade todos los que quieras. 

Otra forma de añadir interactividad es utilizar el recurso “área invisible”. Así puedes añadir interactividad a cualquier zona de la imagen sin que se vea el elemento que la contiene. Para ello, simplemente arrastra el área invisible al lienzo y sitúala en la zona que quieres hacer interactiva. Puedes modificar el tamaño para ajustarlo a tus necesidades. 

¡Ya tienes lista tu imagen interactiva!

¡Comparte tu creación!

Una vez publicada, es el momento de compartir tu imagen interactiva con tu público haciendo uso del botón compartir (situado en la barra superior). Una ventaja genial es que toda la información de tu imagen interactiva está contenida en un link, lo que hará mucho más fácil compartirla en multitud de plataformas. 

En su versión gratuita, Genially te ofrece cinco opciones para compartir tu creación sin perder la animación ni la interactividad:

  • Enlace de acceso
  • Código para insertarla en tu blog o web
  • Enviar por email
  • Compartir en redes sociales
  • Compartir a través de Google Classroom o Microsoft Teams 

Y si dispones de un plan premium, puedes descargar tu creación en varios formatos: JPG, PDF (en estos casos se pierde la interactividad) o también en HTML (se mantienen la interactividad y la animación aunque no tengas conexión a internet).  

Ya puedes empezar a crear una imagen interactiva que deje 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

8 respuestas

  1. Buenas, una consulta: yo ya creé mi imagen interactiva, pero al cambiar el tamaño del lienzo l imagen y todo desaparece aunque en las capas dice que allí está no se ve. Además, aunque retrocedo y selecciono todo y pongo copiar y luego de recortar el lienzo pongo pegar (CTRL+V) igual no sale nada.

  2. Excelente!
    Mis estudiantes permanecen mas interesados.
    Es una herramienta innovadora de mucha utilidad en la docencia.

  3. Es una herramienta muy interesante, porque nos ayuda a crear una serie de presentaciones muy dinámicas que nos ayudarán en todo el proceso de enseñanza – aprendizaje.

Deja una respuesta

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