Guía del usuario Cancelar

Aplicar efectos de mezclas

  1. Guía del usuario de Adobe XD
  2. Introducción
    1. Novedades de Adobe XD
    2. Preguntas habituales
    3. Diseñar, crear prototipos y compartir con Adobe XD
    4. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    5. Conceptos básicos del espacio de trabajo
    6. Cambiar el idioma de la aplicación en Adobe XD
    7. Acceder a kits de diseño de interfaz de usuario
    8. Accesibilidad en Adobe XD
    9. Métodos abreviados de teclado
    10. Consejos y trucos
    11. Opciones de suscripción de Adobe XD
    12. Cambios en el plan de inicio de XD
  3. Diseño
    1. Mesas de trabajo, guías y capas
      1. Empezar a usar mesas de trabajo
      2. Usar guías y cuadrículas
      3. Crear mesas de trabajo con desplazamiento
      4. Trabajar con capas
      5. Crear grupos de desplazamiento
    2. Formas, objetos y trazados
      1. Seleccionar, redimensionar y rotar objetos
      2. Mover, alinear, distribuir y organizar objetos
      3. Agrupar, bloquear, duplicar, copiar y voltear objetos
      4. Establecer el trazo, el relleno y las sombras paralelas de objetos
      5. Crear elementos repetidos
      6. Crear diseños en perspectiva con transformaciones 3D
      7. Editar objetos utilizando operaciones booleanas
    3. Texto y fuentes
      1. Trabajar con herramientas de dibujo y texto
      2. Fuentes en Adobe XD
    4. Componentes y estados
      1. Trabajar con componentes
      2. Trabajar con componentes anidados
      3. Añadir varios estados a componentes
    5. Máscaras y efectos
      1. Crear una máscara con formas
      2. Usar efectos de desenfoque
      3. Crear y modificar degradados
      4. Aplicar efectos de mezclas
    6. Maquetación
      1. Redimensionado interactivo y restricciones
      2. Establecer relleno fijo para componentes y grupos
      3. Crear diseños dinámicos con pilas
    7. Vídeos y animaciones de Lottie
      1. Cómo usar los vídeos
      2. Crear prototipos mediante vídeos
      3. Usar animaciones de Lottie
  4. Prototipo
    1. Crear prototipos interactivos
    2. Animar prototipos
    3. Propiedades de objetos compatibles con la animación automática
    4. Crear prototipos con teclado y mando de juego
    5. Crear prototipos utilizando comandos de voz y reproducción
    6. Crear transiciones temporizadas
    7. Añadir superposiciones
    8. Diseñar prototipos de voz
    9. Crear vínculos de anclaje
    10. Crear hipervínculos
    11. Previsualizar diseños y prototipos
  5. Compartir, exportar y revisar
    1. Compartir mesas de trabajo seleccionadas
    2. Compartir diseños y prototipos
    3. Establecer permisos de acceso de vínculos
    4. Usar prototipos
    5. Revisar prototipos
    6. Trabajar con especificaciones de diseño
    7. Compartir especificaciones de diseño
    8. Inspeccionar especificaciones de diseño
    9. Controles de las especificaciones de diseño
    10. Revisar y comentar especificaciones de diseño
    11. Exportar activos de diseño
    12. Exportar y descargar activos de especificaciones de diseño
    13. Grupos compartidos para empresas
  6. Sistemas de diseño
    1. Sistemas de diseño con Bibliotecas Creative Cloud
    2. Trabajar con activos de documentos en Adobe XD
    3. Trabajar con Bibliotecas Creative Cloud en Adobe XD
    4. Migrar activos vinculados a Bibliotecas Creative Cloud
    5. Trabajar con tokens de diseño 
    6. Usar activos de Bibliotecas Creative Cloud
  7. Documentos en la nube
    1. Documentos en la nube en Adobe XD
    2. Colaborar y coeditar diseños
    3. Coeditar documentos que compartan con usted
  8. Integraciones y complementos
    1. Trabajar con activos externos
    2. Trabajar con activos de diseño de Photoshop
    3. Copiar y pegar activos desde Photoshop
    4. Importar o abrir diseños de Photoshop
    5. Usar activos de Illustrator en Adobe XD
    6. Abrir o importar diseños de Illustrator
    7. Copiar vectores de Illustrator en XD
    8. Complementos para Adobe XD
    9. Crear y administrar complementos
    10. Integración de Jira para XD
    11. Complemento Slack para XD
    12. Complemento Zoom para XD
    13. Publicar diseño de XD en Behance
  9. XD para iOS y Android
    1. Vista previa en dispositivos móviles
    2. Preguntas frecuentes de Adobe XD para dispositivos móviles
  10. Solución de problemas
    1. Problemas conocidos y resueltos
      1. Problemas conocidos
      2. Problemas resueltos
    2. Instalación y actualizaciones
      1. XD aparece como incompatible en Windows
      2. Código de error 191
      3. Código de error 183
      4. Problemas al instalar complementos de XD
      5.  Solicitud para desinstalar y volver a instalar XD en Windows 10
      6. Problemas con la migración de preferencias
    3. Inicio y cierre inesperado
      1.  XD se cierra al iniciar la aplicación en Windows 10
      2.  XD se cierra al cerrar sesión en Creative Cloud
      3. Problema con el estado de suscripción en Windows
      4. Aviso de aplicación bloqueada al iniciar XD en Windows
      5. Generación de volcados de fallos en Windows
      6. Recopilación y uso compartido de registros de errores
    4. Documentos en la nube y bibliotecas Creative Cloud
      1. Problemas con documentos en la nube de XD
      2. Problemas con componentes vinculados
      3. Problemas con bibliotecas y enlaces
    5. Crear prototipos, publicar y revisar
      1. No se pueden grabar interacciones de prototipos en macOS Catalina
      2. Problemas con flujos de trabajo de publicación
      3. Los vínculos publicados no aparecen en los navegadores
      4. Los prototipos no se renderizan correctamente en los navegadores.
      5. El panel de comentarios aparece repentinamente en los vínculos compartidos
      6. No es posible publicar bibliotecas
    6. Importar, exportar y usar otras aplicaciones
      1. Importar y exportar en XD
      2. Archivos de Photoshop en XD
      3. Archivos de Illustrator en XD
      4. Exportar a After Effects desde XD
      5. Archivos de Sketch en XD
      6. Aplicaciones de terceros que no aparecen en Exportar

Conozca cómo trabajar mejor con efectos de mezclas para mejorar sus diseños.

Cuando trabaje con imágenes en sus diseños, es posible que desee ir más allá de una simple foto para crear efectos interesantes y únicos. Por ejemplo, puede que desee agregar el color de su marca como un efecto en sus imágenes para crear un diseño visualmente atractivo. 

Los modos de fusión le permiten crear automáticamente activos de imagen compuesta combinando una capa de imagen con otra capa usando un conjunto de modos predefinidos. 

Aquí se muestran algunos efectos de ejemplo creados usando los modos de fusión Multiplicar, TramaLuz fuerte, exclusión y luminosidad.

Modos de fusión
¡Use efectos de mezclas para crear magia con colores!

¿Tiene curiosidad por las terminologías de color de fusión?

  • El color de fusión es el color original del objeto, el grupo o la capa seleccionada.

  • El color base es el color subyacente de la ilustración.

  • El color resultante es el color que resulta de la fusión.

La mezcla de color base y color de fusión dependen del modo de fusión seleccionado.

Términos de fusión

A. Color de fusión B. Color base C. Color resultante 

Grupos Modo de fusión Resultados de diseño
Normal Normal Este es el modo predeterminado y no se aplica el modo de fusión.
Oscurecer Oscurecer Busca la información de color de cada imagen y selecciona el color base o el de fusión, el que sea más oscuro, como color resultante. Los píxeles más claros que el color de fusión se reemplazarán y los más oscuros no cambiarán.
  Multiplicar Busca la información de color de cada imagen y multiplica el color base por el color de fusión. El color resultante siempre es un color más oscuro.
  Subexponer color Busca la información de color de cada imagen y oscurece el color base para reflejar el color de fusión mediante el aumento del contraste entre ambos. 
Aclarar Aclarar Busca la información de color de cada imagen y selecciona el color base o el de fusión, el que sea más claro, como color resultante.
  Trama Busca la información de color de cada imagen y multiplica el inverso de los colores de fusión y base. El color resultante siempre es un color más claro. 
  Sobreexponer color Busca la información de color de cada imagen e ilumina el color base para reflejar el color de fusión mediante la disminución del contraste entre ambos.
Contraste Superponer Multiplica o trama los colores, dependiendo del color base. Los motivos o los colores se superponen sobre los píxeles existentes al mismo tiempo que se mantienen las iluminaciones y las sombras del color base. 
  Luz suave Oscurece o aclara los colores, dependiendo del color de fusión. El efecto es similar al que se obtiene al iluminar la imagen con un foco difuso.
  Luz fuerte Multiplica o trama los colores, dependiendo del color de fusión. El efecto es similar al que se obtiene al iluminar la imagen con un foco intenso. 
Inversión Diferencia Busca la información de color de cada imagen y resta el color de fusión del color base, o al contrario, dependiendo de cuál tenga mayor valor de brillo. 
  Exclusión Crea un efecto similar pero más bajo de contraste que el modo Diferencia.
Componente Tono Crea un color resultante con la luminancia y la saturación del color base y el tono del color de fusión.
  Saturación Crea un color resultante con la luminancia y el tono del color base y la saturación del color de fusión. 
  Color Crea un color resultante con la luminancia del color base y el tono y la saturación del color de fusión. 
  Luminosidad Crea un color resultante con el tono y la saturación del color base y la luminancia del color de fusión.

¿Desea crear un efecto de mezclas?

  1. Antes de comenzar, use estas simples reglas para comprender cómo se manejan los objetos cuando se aplican o modifican modos de fusión:

    • Apariencia: aplica y afecta a todo el objeto.
    • Componente maestro: aplica y afecta a todas las instancias en su proyecto de diseño. Por ejemplo, si cambia el color de un objeto en el componente maestro, el cambio se aplica en cascada en todas las instancias de su proyecto de diseño.

    • Instancia de componentes: anula los modos de fusión aplicados en instancias de componentes.
    • Repetir cuadrícula: se aplica a todas las celdas.
    • Interoperabilidad: conserva el efecto de mezclas cuando se trabaja con Photoshop, Illustrator, Sketch y After Effects.
  2. Seleccione una imagen u objeto (incluidas formas, capas de texto, grupos, máscaras o componentes) en el lienzo de diseño. En el Inspector de propiedades, seleccione y aplique el modo de fusión de su elección. 

    También puede usar Opción Mayús + / -  en MAC y Alt Mayús + / - en WIN para alternar entre los niveles de apariencia de los modos de fusión aplicados.

  3. Para obtener una vista previa del efecto del modo de fusión aplicado, seleccione .

Limitaciones

Los modos de fusión no son compatibles con estos comportamientos de objetos:

  • Los efectos de mezclas usados en una animación automática cambian al comienzo de la transición sin ninguna animación.
  • No puede aplicar efectos de fusión en rellenos, bordes o sombras.

Ejemplos y archivos de muestra

¿Desea crear un póster con efectos de mezclas? Seleccione una imagen en el lienzo, y desde el Inspector de propiedades, seleccione y aplique las siguientes opciones de mezclas para crear estos impresionantes resultados:

  • Luz fuerte
  • Diferencia
  • Trama
  • Subexponer color
Imagen original
Subexponer color Luz fuerte
Diferencia Trama

Tutoriales

Mire este Vídeo para aprender a mezclar el color de un objeto con el color de fondo de una mesa de trabajo o mezcle los colores de varios objetos superpuestos. 

Duración: 1 minuto.

¿Qué viene después?

Comencemos con los modos de fusión en Adobe XD. La interfaz de Adobe XD es intuitiva y seguro que le resultará fácil dar rienda suelta a su creatividad con colores, desenfoquesmucho más.

¿Tiene alguna pregunta o idea?

Pregunte a la comunidad

Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría que nos dejara sus comentarios y ver sus creaciones.

Logotipo de Adobe

Inicia sesión en tu cuenta