Guía del usuario Cancelar

Crear y modificar degradados

  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. Gestión de color
    5. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    6. Conceptos básicos del espacio de trabajo
    7. Cambiar el idioma de la aplicación en Adobe XD
    8. Acceder a kits de diseño de interfaz de usuario
    9. Accesibilidad en Adobe XD
    10. Métodos abreviados de teclado
    11. Consejos y trucos
  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
    14. Hacer copias de seguridad de recursos de XD o transferirlos
  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

Cree, edite, importe y use degradados en Adobe XD. Añada paradas de color y controle la opacidad de los degradados usando el panel Degradados.

Un degradado es una fusión gradual entre dos o más colores o matices del mismo color o diferentes colores. Los degradados se pueden utilizar para crear fusiones de color, elaborar gráficos circulares, dar volumen a objetos vectoriales y añadir un efecto de luz y sombra a los diseños.

XD admite los degradados lineales, radiales y angulares.

Degradado lineal

XD ensombrece desde el punto inicial hasta el punto final, siguiendo una línea recta.

Degradado radial

XD ensombrece desde el punto inicial hasta el punto final, siguiendo un patrón circular.

Degradado angular

XD aplica un relleno con degradados de color que atraviesan una forma desde el centro de un círculo. 

Selector de color de degradado

Para acceder al Selector de color de degradado en XD, seleccione un objeto y haga clic en Rellenar en el Inspector de propiedades. Puede crear degradados lineales, radiales y angulares en XD.

Elija Degradado linealDegradado radial o Degradado angular en la lista desplegable de la parte superior del selector de color.

Selector de color de degradado
Selector de color de degradado

A. Editor de degradados B. Parada de color C. Regulador de opacidad D. Campo de color E. Guardar como muestra F. Editor de degradados en lienzo 

Puede usar el Selector de color de degradado para elegir los colores y establecer la opacidad de los degradados.

El Selector de color de degradado tiene un editor de degradados que muestra una vista previa rápida de todos los colores utilizados en un degradado. Los tableros estilo ajedrez indican las partes transparentes.

El editor de degradados también muestra las paradas de color de los degradados. Los círculos pequeños indican las paradas de color. Los colores cambian y se mezclan en función de lo próximas que estén las paradas de color entre sí. Las paradas de color también se muestran en el editor de degradados del lienzo que aparece en el objeto al que se aplica el degradado. 

Están disponibles dos paradas de color de forma predeterminada. Puede agregar más paradas de color haciendo clic en los editores de degradados. Puede arrastrar las paradas de color a lo largo de los editores de degradados para cambiar las posiciones de las paradas de color y variar la distribución de cada color. Para eliminar o quitar una parada de color, arrástrela desde el editor de degradados al Selector de color de degradado. O bien, haga clic en la parada de color en el editor de degradados del lienzo y presione Supr.

El editor de degradados del lienzo le ayudará a cambiar la dirección del degradado.

El controlador de esquina le ayudará a cambiar el punto de origen y el ángulo de los degradados radiales.

El regulador de la derecha del Selector de color de degradado le permite controlar la opacidad de la parada de color.

Aplicar un relleno con degradado lineal, radial o angular

  1. Seleccione un objeto y haga clic en Rellenar en el Inspector de propiedades.

  2. En el selector de color, elija Degradado lineal, Degradado radial o Degradado angular en la lista desplegable.

    Selector de color

    Degradados lineales, radiales y angulares
    Degradados lineales, radiales y angulares

  3. Haga clic en las paradas de color del editor de degradados y seleccione los colores requeridos con el selector de color. 

    • Para agregar más paradas de color, haga clic en el editor de degradados.
    • Para modificar el color asignado a una parada de color, haga clic en la parada de color.
    • Para mover las paradas de color, arrástrelas a lo largo del editor de degradados.
      Nota: No pueden moverse las paradas de color en ninguno de los extremos del editor de degradados.
    • Para eliminar una parada de color, arrástrela fuera del editor de degradados. Si está usando el editor de degradados del lienzo, haga clic en la parada de color y presione Supr.
    • Para cambiar entre paradas de color, use la tecla de tabulador.
    • Para cambiar el punto de orientación y el ángulo de los degradados radiales, arrastre el controlador de esquina.
    Trabajo con degradados radiales
    Trabajo con degradados radiales

  4. Para cambiar la dirección del degradado, arrastre el segmento del editor de degradados del lienzo (sobre el objeto), según sea necesario.

    También puede arrastrar los puntos finales del segmento del editor de degradados del lienzo fuera de los límites del objeto. Si una parada de color se coloca fuera de los límites de un objeto, el color (asociado con la parada de color) no se muestra en el objeto.

    Nota:

    Puede mover el final del segmento del editor de degradados del lienzo utilizando las teclas de flecha y la tecla Mayús más las teclas de flecha. Una vez que seleccione una parada de color interna, puede moverla a lo largo del segmento utilizando las teclas de flecha y la tecla Mayús más las teclas de flecha. También puede presionar el tabulador para cambiar las paradas de color a lo largo del editor de degradados del lienzo. 

  5. Después de crear un degradado, puede guardarlo para reutilizarlo en el panel Activos. Haga clic en un objeto con el degradado y haga clic en el icono + junto a Colores en el panel Activos para guardarlo. 

    Degradados guardados en el panel Activos
    Degradados guardados en el panel Activos

Nota:

El degradado de color entre paradas de color en un degradado angular creado usando el código CSS en Especificaciones de diseño puede variar de la representación del degradado angular en el lienzo del diseño. 

Aplicar degradado angular a objetos

Con los degradados angulares se pueden crear ruedas cromáticas, gráficos circulares o indicadores de progreso. El degradado angular aplica un relleno con degradados de color que atraviesan una forma desde el centro de un círculo.

Siga estos pasos para aplicar un degradado angular a un círculo y crear una rueda cromática.

Aplicar degradado angular a un círculo

Crear rueda cromática

Seleccione un círculo en el lienzo, haga clic en Rellenar en el Inspector de propiedades y seleccione Degradado angular.

Añadir más colores

Crear rueda cromática

Haga clic en el editor de Degradado angular para añadir más paradas de color. Haga clic en las paradas de color y seleccione los colores que quiera.

Añadir una transición de colores perfecta

Transición de colores

Para crear una rueda cromática continua, use el mismo color para la última y la primera parada de color con la herramienta Cuentagotas. 

Añadir colores de contraste

colores de contraste

También puede crear una rueda cromática con colores de contraste nítido seleccionando diferentes colores para la última y la primera parada de color. 

Cuando haya terminado de crear una rueda cromática, puede copiar y reutilizar los efectos de degradado angular en otras formas como un rectángulo o un triángulo.

Ejemplos

Aquí puede ver algunas muestras creadas con el degradado angular

Indicadores de progreso

Crear rueda cromática

Gráficos circulares o ruedas cromáticas

Crear rueda cromática

Gráficos vectoriales mejorados

Crear rueda cromática

Elementos u objetos de panel

Crear rueda cromática

Tutorial

Los degradados angulares, que son diferentes de los degradados lineales y radiales, pueden ser muy útiles para diseños como indicadores de progreso y ruedas cromáticas. Vea este tutorial de Dani Beaumont, director principal de productos de Adobe XD, para saber cómo usar los degradados angulares.

Duración: 4 minutos y 7 segundos. 

Importar objetos con relleno de degradado

  1. Asegúrese de guardar el archivo en forma de archivo .svg antes de importarlo a Adobe XD.

  2. Haga clic en Archivo > Importar, seleccione el archivo SVG y haga clic en Importar.

Al importar un degradado como SVG, el selector de color muestra la opción Degradado de forma predeterminada. Al copiar y pegar un objeto en XD, también se copia el relleno de degradado. Puede modificar el color y las paradas de color del gradiente que importe.

Nota:

Los degradados radiales importados con puntos de origen descentrados no se pueden editar en XD.

Temas relacionados

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea