Helice - Impulso digital

Imagen Interactiva

Imagen Base


Consejos para elegir la mejor imagen base:

- Los archivos deben tener buena calidad.

- Preferiblemente en formato .Psd por capas para poder mover o editar ningún elemento si fuera necesario.

- La imagen debe ser libre de derechos de autor para evitar denuncias o bloqueos por parte de los propietarios.

- Los elementos deben verse desde frente para evitar los elementos de perfil, que dificultan realizar las composiciones.

- En una exposición comercial o feria virtual, si hay diferentes tipos de espacios, buscar imágenes que se vean visualmente diferentes para destacar más o menos importancia, en función del tipo de espacio que contraten.
Crear stand virtual interactivo

Para crear un stand de patrocinio, incluiremos en nuestro proyecto un módulo de “Imagen Interactiva”.


1. Para ello iremos a Menú Lateral: Contenido > Añadir Nuevo > Multimedia > Imagen Interactiva


 image


2. Rellenaremos la ficha del módulo, con el nombre con el que queramos crearlo, o directamente haremos clic sobre el botón “ Añadir nueva sección" sin incluir ningún nombre; de este modo, el módulo se creará por defecto con el nombre "Imagen Interactiva”.


3. Al acceder al panel del módulo, visualizaremos dos apartados:

  1. Imagen
  2. Capas


1) En “Imagen interactiva” se visualizará la imagen que será utilizada como diseño del stand de patrocinio, es decir, sobre la que se trabajará, añadiendo acciones interactivas que permitirán al usuario acceder al contenido que configuremos más adelante:


image


Por defecto aparecerá un mockup (imagen base de ejemplo) que podrá ser reemplazado por cualquier imagen que queramos añadir en su lugar.

Para ello, solo tendremos que hacer click sobre la imagen que aparece, y el sistema abrirá una pestaña que permitirá elegir cualquier imagen desde nuestro PC.


En la parte derecha, encontraremos los pasos para definir el área de actuación.


Notas a tener en cuenta:

*El diseño de la imagen del stand deberá ser proporcionado por el cliente, pudiéndose utilizar la imagen base como referencia.

Esta imagen deberá contar con secciones cuadradas o rectangulares, con o sin contenido, sobre las que se configurarán las acciones (clicks) que enlazarán con la visualización de contenido. Estas secciones siempre deben tener una posición frontal y sin elementos superpuestos. Se recomienda seleccionar el área de interacción en base a los bordes del elemento seleccionado.

Una vez se guarde la capa configurada, las medidas del área serán mostradas en formato píxel, este dato resulta muy útil cuando queremos personalizar el área con una imagen corporativa, ya que conoceremos las medidas exactas que deberá tener el contenido. Ejemplo: Capa LOGO ( 169 x 69 )


Selección de área correcta:

 image


Selección de área no recomendada:

image



2) En el apartado de “Capas”: se definirán las acciones de interacción que integrará el stand. Cada acción deberá ser configurada en una capa. De manera que, si queremos que un usuario pueda consultar la información de contacto, haciendo click sobre un punto concreto de la imagen, lo configuraremos en una capa. Si también queremos que pueda descargar un archivo PDF, tendremos que generar una nueva capa, donde configurar, en qué punto de la imagen se deberá clickar y qué documento se descargará o visualizará, en esta acción.


Esto implica por lo tanto, generar tantas capas como acciones de interacción queramos añadir al stand.

Pasos para crear las capas de nuestro stand de patrocinio:


  • Hacer click sobre “Añadir Nueva Capa”.
  • Sobre la imagen que aparece, vamos a hacer click con el cursor del ratón y nos creará un punto o vértice. Igualmente, seguiremos seleccionando el área de acción que queremos configurar, a partir de los vértices que vayamos marcando. Al finalizar el marcado, habremos configurado una zona sombreada sobre nuestra imagen, que será el área sobre la que el usuario podrá interactuar.


image


  • Una vez tenemos seleccionado el área, configuraremos los siguientes parámetros.
  • Nombre de la capa: (no será público para el usuario, es un nombre que internamente permitirá diferenciar el contenido cuando se creen todas las capas)
  • Acción: tendremos un desplegable con todas las opciones de acciones interactivas disponibles.


image


Abrir en: cuando seleccionemos una opción de enlace, aparecerá una nueva opción desplegable, que nos permitirá configurar la apertura del contenido que se quiere mostrar:


image


Relleno de área: en el desplegable se podrá elegir entre 3 opciones: no modificar la imagen incluyendo el área sombreada creada, rellenar el área sombreada con un color, superponer una imagen diferente a la que aparece en el diseño del stand. Color del borde del área: este parámetro permite seleccionar el color del borde del área de interacción, cuando el usuario pase el cursor por encima.


Al finalizar la configuración, guardaremos los cambios aplicados y nuestra capa se habrá generado correctamente.

Se podrá visualizar el resultado de la capa en: Imagen Interactiva > Integración (menú superior del módulo, icono enlace) > Ver versión web de la sección:


image


Al abrir este enlace, veremos cómo ha quedado la capa sobre nuestra imagen de stand, y lo más importante, probar si funciona correctamente la acción interactiva configurada.