Fotos, GIFs y códigos QR en Designer

En este artículo, cubriremos cómo agregar y editar Fotos, GIFs y Códigos QR en Designer.

• Fotos
  • Fondo
  • Filtro
  • Recortar
  • Máscara
  • Reemplazar
  • Removedor de fondo
  • Enlace
  • Configuración
  • Efectos
  • Animar
  • Posición
  • Bloquear / Copiar estilo
• GIPHY
• Códigos QR

Usando Designer, puede usar una amplia gama de fotos de stock, GIFs de GIPHY y códigos QR personalizables para hacer sus diseños más dinámicos.

Para obtener información más general sobre la aplicación Designer, consulte nuestra guía Comenzando con Designer.

Se puede acceder a estas opciones desde el Menú lateral de Designer:

Fotos

Al seleccionar la opción Fotos aparecerá la sección de Fotos del Menú lateral:

Aquí puede buscar cualquier tipo de foto de stock que desee usar. Una vez seleccionada, se colocará en el diseño.

Para editar la foto, selecciónela. Las opciones del Menú superior cambiarán:

Revisaremos cada una de estas opciones a continuación.

Fondo

La opción Fondo le permite alterar la capa de fondo de la foto.

Filtro

La opción Filtro abre el Menú lateral, permitiéndole seleccionar diferentes filtros para agregar a su foto:

Recortar

La opción Recortar le permite recortar la foto o imagen seleccionada.

El área de recorte se puede arrastrar, expandir y retraer, con opciones de Relación de aspecto y la capacidad de voltear y rotar la imagen. Una vista previa de la imagen recortada está presente en la esquina superior derecha de la pantalla, y se indica el tamaño de la imagen. Por último, el área de recorte se puede cambiar para ser un Rectángulo o Círculo.

Máscara

Al hacer clic en la opción Máscara se abrirá la opción de Máscara en el Menú lateral.

Al seleccionar una forma del menú Máscara se aplicará automáticamente una máscara de esa forma a la imagen. La imagen aún se puede mover una vez que se aplica la máscara.

Al hacer clic en Editar máscara le permitirá mover la máscara misma alrededor de la imagen. Al hacer clic en Invertir intercambiará las áreas que se están enmascarando. Al hacer clic en Aplicar máscara volverá a aplicar la máscara en la imagen.

Reemplazar

La opción Reemplazar le permite reemplazar la imagen o foto con una imagen del dispositivo actual. Se puede acceder a esto a través del Menú superior o la barra de acciones rápidas:

Removedor de fondo

La opción Removedor de fondo detecta y elimina automáticamente los fondos de las imágenes. Actualmente, solo admite la eliminación automática y no es posible borrar o restaurar el fondo de forma personalizada.

Deberá esperar a que termine un icono de carga:

Una vez hecho, haga clic en Guardar, y el fondo habrá desaparecido.

Enlace

Al seleccionar la opción Enlace le permite convertir su foto o imagen en un elemento interactivo, utilizado principalmente para quioscos. Se abrirá la sección Opciones de enlace en la Barra de navegación izquierda:

Al hacer clic en Agregar enlace se le pedirá que ingrese una URL o seleccione un activo:

Una vez que se haya elegido un enlace o activo, aparecerán más opciones en la sección Opciones de enlace:

Al expandir la sección Escala proporcionará esta opción para su activo:

Aquí, elija cómo se escalará la imagen. Hay tres opciones:

• Ajustar (predeterminado) - Ajusta la imagen a la pantalla.
• Estirar - Estira la imagen para llenar toda la pantalla.
• Zoom - Amplía la imagen para llenar toda la pantalla. No se recomienda para imágenes pequeñas en pantallas grandes, ya que esto creará borrosidad.

Al expandir la sección Configuración proporcionará estas opciones para su enlace:

• Duración (segundos) - Cuando se hace clic o se toca el enlace, cuánto tiempo se mostrará el enlace o activo antes de volver al diseño principal. Esto comienza desde el último toque en la pantalla o el momento en que se hizo clic en el enlace.
• Precargar - Cuando está marcado, el sitio web se cargará cuando se cargue el diseño. Esto reduce la cantidad de tiempo que tarda el sitio web en aparecer cuando se hace clic en el enlace. Sin embargo, tener numerosos enlaces que necesitan cargarse puede causar retraso.

Al expandir la sección Cerrar y estilizador de barra de navegación proporcionará estas opciones para su enlace:

Esta sección se refiere al botón que aparecerá en sus pantallas cuando se envíe a ellas. Al hacer clic o tocar este botón, volverá al diseño original.

• Posición del icono - Muestra dónde aparecerá este icono. Por defecto es Centro inferior, pero se puede colocar en cualquier lugar a lo largo de la parte superior o inferior, o apagarse por completo.
• Estilo del icono - Le permite establecer el estilo del icono. Elija entre Etiqueta, Sólido, Redondo o Predeterminado (ver arriba)
• Tamaño del icono - Le permite cambiar el tamaño del icono. Elija entre Pequeño, Mediano, Grande o Predeterminado (ver arriba)
• Color del icono - Cambie el color HTML hexadecimal del icono para que se ajuste mejor a su diseño.
• Color de fondo - Cambie el color HTML hexadecimal del fondo del icono para que se ajuste mejor a su diseño.
• Opacidad - El control deslizante le permite cambiar qué tan opaco o transparente es el fondo del icono.
• Mostrar barra de navegación - Cuando está marcado, agrega pequeñas flechas de navegación al icono. Le permite navegar rápidamente a través de múltiples enlaces. Se ve así:

Configuración

Al seleccionar el botón Configuración se abrirá la sección Mapeo de datos en el Menú lateral:

Al hacer clic en Crear mapeo de datos le permite hacer que el texto seleccionado sea dinámico, asignado a uno de sus DataSources existentes. Consulte nuestro artículo sobre DataSources dinámicos con OptiSync para obtener más información.

Efectos

Al seleccionar la opción Efectos le permite cambiar varios aspectos diferentes de su texto. Se abrirá la sección Efectos en el Menú lateral:

Aquí tiene numerosas opciones. Revisaremos cada una de ellas a continuación.

Al expandir la sección Color le permite agregar color a la foto o imagen.

Seleccione entre colores preestablecidos, colores usados en este diseño o a través del selector de color.

Al expandir la sección Fondo le permite establecer un color de fondo específico para que la foto o imagen se asiente. Esto es funcionalmente lo mismo que la opción Fondo del menú superior.

Al expandir la sección Opacidad le permite variar la opacidad del área seleccionada: fondo y texto juntos.

Esto se puede ajustar mediante el control deslizante. A continuación se muestra la mitad de opacidad:

Al expandir la sección Contorno le permite agregar un contorno a la foto o imagen. Puede seleccionar un color de un menú desplegable o usar el selector de color, y usar el control deslizante para cambiar su grosor.

Al expandir la sección Sombra le permite crear una sombra en la foto o imagen. Por defecto, todos los controles deslizantes serán blancos.

Aplicar un color creará una sombra, y cambiar los controles deslizantes le permite cambiar el desenfoque y desplazar la sombra a lo largo del eje X o Y.

Al expandir la sección Degradado presentará varias opciones de degradado para su texto. Al hacer clic en cualquiera de estas opciones de degradado se aplicará a su texto.

La sección Textura es similar a la de Degradado. Presentará varias opciones de textura para su texto. Al hacer clic en cualquiera de estas opciones de textura se aplicarán a su texto.

Animar

Al seleccionar el botón Animar le permitirá agregar animaciones a sus fotos o imágenes. Al hacer clic en él se abrirá el área Animar en el Menú lateral:

Hay numerosas opciones para agregar animaciones a su diseño. Para obtener más información sobre esto, consulte nuestro artículo Animaciones.

Posición

Al seleccionar la opción Posición se abrirá la sección Posición del Menú lateral. Esto le permite colocar con precisión la foto o imagen, o cambiar su disposición en capas.

• Traer al frente - Lleva la foto o imagen seleccionada a la capa superior
• Traer adelante - Lleva la foto o imagen seleccionada una capa hacia arriba
• Enviar al fondo - Lleva la foto o imagen seleccionada a la capa inferior
• Enviar hacia atrás - Lleva la foto o imagen seleccionada una capa hacia abajo
• Alinear a la página - Opciones para cambiar la alineación de la foto o imagen seleccionada
  • Izquierda
  • Centro
  • Derecha
  • Superior
  • Medio
  • Inferior
• Espaciar uniformemente - Alinea la foto o imagen dentro de la selección más grande
  • Verticalmente
  • Horizontalmente
• Voltear - Voltea la foto o imagen seleccionada
  • Horizontal
  • Vertical
• Posición - Permite la colocación específica de la foto o imagen en el diseño
• Cambiar tamaño - Permite el cambio de tamaño preciso del elemento de foto o imagen seleccionado
• Mantener relación de aspecto - Cuando está marcado, mantiene la relación de aspecto al cambiar el tamaño

Bloquear / Copiar estilo

Al hacer clic en el botón Bloquear bloqueará la foto o imagen seleccionada en su lugar, evitando que se realicen cambios en ella.

Esto es útil cuando se trata de muchos elementos en un diseño.

El botón Copiar estilo le permite aplicar rápidamente el estilo de la foto seleccionada a otra.

Esto es útil para dar estilo rápidamente a numerosas fotos.

GIPHY

La opción GIPHY en el Menú lateral le permite elegir entre una variedad de Stickers, GIFs, Emojis y opciones de texto animado para colocar en su diseño.

La función Buscar le permite encontrar el GIF, Sticker, Emoji o texto animado que desea usar de GIPHY. Una vez seleccionados, se colocarán en su diseño y se animarán automáticamente:

Estos se pueden ajustar aún más usando el botón Posición.

Al hacer clic en esto mientras el GIF está seleccionado, se abrirá la pestaña Posición en el Menú lateral:

• Traer al frente - Lleva el GIF seleccionado a la capa superior
• Traer adelante - Lleva el GIF seleccionado una capa hacia arriba
• Enviar al fondo - Lleva el GIF seleccionado a la capa inferior
• Enviar hacia atrás - Lleva el GIF seleccionado una capa hacia abajo
• Alinear a la página - Opciones para cambiar la alineación del GIF seleccionado
  • Izquierda
  • Centro
  • Derecha
  • Superior
  • Medio
  • Inferior
• Espaciar uniformemente - Alinea el GIF dentro del cuadro más grande
  • Verticalmente
  • Horizontalmente
• Voltear - Voltea el GIF seleccionado
  • Horizontal
  • Vertical
• Posición - Permite la colocación específica del GIF en el diseño
• Cambiar tamaño - Permite el cambio de tamaño preciso del GIF

Mantener relación de aspecto - Cuando está marcado, mantiene automáticamente la relación de aspecto al cambiar el tamaño.

Usar como fondo - Cuando está marcado, permite que el GIF se use como fondo en el diseño.

Código QR

La opción Código QR en el Menú lateral le permite agregar un código QR a cualquier diseño. Al presionar Agregar código QR le da numerosas opciones:

Elija:

• URL del sitio web - Envía al usuario al sitio web cuando se escanea el código QR
• Correo electrónico - Envía un correo electrónico a una dirección especificada cuando se escanea el código QR.
• Texto - Muestra texto cuando el usuario escanea el código QR
• Llamar - Hace una llamada telefónica cuando el usuario escanea el código QR
• SMS - Envía un mensaje de texto a un número específico cuando se escanea el código QR
• App Store - Envía al usuario a Apple Store o Google Play store cuando se escanea el código QR.
• Facebook - Envía al usuario a la página de Facebook cuando se escanea el código QR.
• Instagram - Envía al usuario a la página de Instagram cuando se escanea el código QR.
• X - Envía al usuario al perfil de X cuando se escanea el código QR.
• WiFi - Da al usuario acceso a una red WiFi cuando se escanea el código QR.
• WhatsApp - Envía un mensaje en WhatsApp cuando se escanea el código QR.
• Activo - Elija un activo de OptiSigns para que el usuario vea cuando se escanea el código QR.

Al hacer clic en Actualizar código QR le permite cambiar el tipo de código QR o actualizar cualquier información.

Finalmente, se pueden agregar numerosos códigos QR al diseño si se desea.

¡Eso es todo!

OptiSigns es el líder en software de señalización digital. Si tiene alguna pregunta adicional, inquietud o comentario sobre OptiSigns, no dude en comunicarse con nuestro equipo de soporte en support@optisigns.com.