Guía del usuario Cancelar

Ajustar trazo, relleno, sombra paralela y sombra interna de objetos

  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

Descubra cómo ajustar el trazo, el relleno, la sombra paralela y la sombra interna y cree efectos de mezcla en objetos en Adobe XD.

Aplicar un color de relleno a un objeto

  1. Seleccione el objeto.

  2. Haga clic en el rectángulo situado junto a Rellenar. Aparecerá el Selector de color.

    Selector de color
    Selector de color

    Nota:

    También puede usar la herramienta Cuentagotas para rellenar con colores. La tecla [i] activa el cuentagotas de relleno.

    • Al hacer clic una vez en la tecla se abrirá el cuentagotas de relleno.
    • Al volver a hacer clic en la tecla se cerrará el cuentagotas de relleno.
  3. Puede elegir lo siguiente:

    • Especifique los valores HSBA, RGB o hexadecimales si conoce los valores de color exactos. También puede cambiar entre los diferentes modos de color.
    • Ajuste el color usando el campo de color y el regulador de color. Al hacerlo, los valores numéricos HSBA, RGB y hexadecimales se ajustarán en consecuencia.  
    • Puede establecer el relleno y la opacidad del relleno utilizando el regulador de color o especificando un valor en porcentaje.
    • Use la Herramienta Cuentagotas para seleccionar un color de una mesa de trabajo.
    • También puede aplicar rellenos con degradado al objeto. Para obtener más información sobre gradientes, consulte Crear y modificar degradados.

    A medida que modifique las opciones del selector de color, podrá ir previsualizando los cambios en la mesa de trabajo.

    Nota:

    Adobe XD también admite abreviaturas para códigos hexadecimales. Por ejemplo, si escribe 0 y presiona Retorno, XD muestra automáticamente el color con código #000000.

  4. Puede guardar los colores como muestras, para su uso futuro. Para guardar un color como muestra, haga clic en el icono + de la parte inferior del selector de color.

    Añadir muestras
    Añadir muestras

    Puede reorganizar las muestras del selector de color arrastrándolas a su nueva ubicación. Para eliminar una muestra, arrástrela fuera del selector de color.

Aplicar relleno de imagen a objetos

Primero, active el relleno si aún no está activado (como se describe en Aplicar un color de relleno a un objeto). Luego, arrastre la imagen al objeto desde la ubicación donde lo hubiera guardado (por ejemplo, Finder o Explorador de Windows).

Recortar y colocar rellenos de imagen

Ahora puede hacer doble clic en las imágenes colocadas dentro de contenedores (Objeto > Máscara con forma) para recortar y reposicionar las imágenes (al arrastrarlas desde el escritorio) dentro de los rellenos de la imagen. Use el modo Recorte en un relleno de imagen para:

  •      Hacer doble clic y entrar en modo de recorte para un relleno de imagen
  •      Reposicionar la imagen dentro del modo de recorte, o
  •      Mover la imagen a cualquier lugar dentro del modo de recorte

Esta mejora también es aplicable para archivos importados desde Photoshop y Sketch. Los archivos importados conservan los rellenos de imagen y el recorte realizado en la aplicación de origen.

Pegar imágenes desde el Portapapeles

También puede copiar una imagen de fuera de Adobe XD en el Portapapeles del sistema operativo, seleccionar una forma y pegar la imagen como relleno de imagen desde el Portapapeles del sistema operativo. Las imágenes también rellenarán una forma si está seleccionada una forma y un usuario elige Archivo > Importar.

Crear trazos y especificar el color de trazo

  1. Seleccione el objeto.

  2. La anchura predeterminada de trazo es 1. Para especificar un valor diferente, cambie el valor Borde.

  3. Haga clic en el trozo de color rectangular situado junto a Borde. Aparecerá el selector de color.

    Selector de color
    Selector de color

  4. Puede elegir lo siguiente:

    • Especifique los valores HSBA, RGB o hexadecimales si conoce los valores exactos.
    • Ajuste el color usando el campo de color y el regulador de color. Al hacerlo, los valores numéricos HSBA, RGB y hexadecimales se ajustarán en consecuencia.  
    • Use la Herramienta Cuentagotas para seleccionar un color de una mesa de trabajo.
    • Establezca la opacidad del borde utilizando el regulador de color o escribiendo un valor en porcentaje.
    • Edite el tamaño del borde y cree líneas punteadas.
    • Especifique topes finales (Romo, Redondo, Saliente) y uniones (Inglete, Redonda, Biselada) y trazos internos y externos.

    A medida que modifique las opciones del selector de color, podrá ir previsualizando el color de los trazos del objeto.

  5. Puede guardar los colores como muestras, para su uso futuro. Para guardar un color como muestra, haga clic en el icono + de la parte inferior del selector de color.

    Añadir muestras
    Añadir muestras

    Puede reorganizar las muestras del selector de color arrastrándolas a una nueva ubicación. Para eliminar una muestra, arrástrela al exterior del selector de color.

  6. Si el objeto es un trazado cerrado, puede especificar la anchura de trazo. Para alinear el trazo a lo largo del trazado, elija una de las siguientes opciones enumeradas en la siguiente Ilustración.

    De manera predeterminada, XD alinea el trazo por el interior de los trazados cerrados.

    Estilos de trazo
    Estilos de trazo

    A. Trazo interior B. Trazo exterior C. Trazo central D. Extremo romo E. Extremo redondeado F. Extremo proyectado G. Unión en inglete H. Unión redonda I. Unión biselada 

    Nota:

    El cambio de la anchura o la alineación del trazo no cambia el tamaño real del objeto (en términos del cuadro delimitador). Sin embargo, al exportar el objeto, es probable que las dimensiones del objeto cambien según el tipo de trazo utilizado.

    SVG solo soporta trazos centrales. Si exporta un objeto con trazos internos o externos como SVG, el tamaño de la imagen exportada será el que tendría si tuviera un trazo central.

Convertir trazos en formas con Dar contorno a trazado

Cree formas vectoriales editables a partir de líneas, trazados, formas, texto, imágenes y grupos booleanos con la herramienta Dar contorno a trazado. Después de crear la forma, puede modificarla más utilizando los controles o cambiando las propiedades en el Panel Propiedades.

Realice este procedimiento para crear un icono tal y como aparece aquí con un trazo con contorno. 

  1. Escriba cualquier letra, por ejemplo, una S, con la herramienta Texto en el lienzo.

  2. Seleccione la letra S y elija Objeto > Trazado > Dar contorno a trazado.
    Verá dos capas en el panel Capas: 1. S - Contorno y 2. S.

    Usar un trazo con contorno en la letra de un texto.
    Usar un trazo con contorno en la letra de un texto.

  3. Haga doble clic en el rectángulo para añadirle los puntos de ancla.

  4. Haga clic y arrastre los puntos de ancla para crear una forma personalizada. 

  5. Después de crear la forma, puede modificarla en el panel Propiedades cambiando, por ejemplo, el color en Rellenos y Degradados.

    Añadir colores y estilos para crear una forma personalizada
    Añadir colores y estilos para crear una forma personalizada

Añadir sombras

Puede aplicar sombras paralelas y sombras internas a objetos como controles deslizantes, botones, reguladores e ilustraciones.

  1. Añada un objeto a la mesa de trabajo.

  2. Haga clic en el objeto y luego en Sombra paralela o Sombra interna en el Inspector de propiedades.

  3. En el selector de color,

    a. Para añadir un color a la sombra, realice una de las tareas siguientes:

    • Indique el valor HSB, RGB o hexadecimal del color. Podrá cambiar fácilmente entre los modos de color.
    • Ajuste el color usando el campo de color y el regulador de color. Al hacerlo, el valor HSB, RGB o hexadecimal se ajustará automáticamente.  
    • Use la Herramienta Cuentagotas para seleccionar un color de una mesa de trabajo.

    b. Ajuste la opacidad de la sombra mediante el regulador de opacidad o escriba un valor de opacidad en forma de porcentaje.

     Para guardar una muestra, haga clic en el icono + de la parte inferior del selector de color. Puede reorganizar las muestras del selector de color arrastrándolas a una nueva ubicación. Para eliminar una muestra, arrástrela al exterior del selector de color.

  4. Indique lo siguiente en el Inspector de propiedades:

    Desplazamiento X y desplazamiento Y: indique la distancia que desee que se desplace la sombra paralela con respecto al objeto.

    (Desenfoque): indique la distancia desde el borde de la sombra en la que desee que se produzca el desenfoque.

Sombra interna

Aplicar Sombra interna a un objeto
Aplicar Sombra interna a un objeto

Sombra paralela

Aplicar Sombra paralela a un objeto
Aplicar Sombra paralela a un objeto

Aplicar efectos de mezclas

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 que prefiera. Para obtener más información, consulte Aplicar efectos de mezcla.

Eliminar un relleno, sombra o trazo de un objeto

Seleccione el objeto. A continuación, haga clic en la casilla próxima a Borde, Relleno o Sombra del Inspector de propiedades. Si desea reponer el relleno, el trazo o la sombra, vuelva a hacer clic en la casilla.

Temas relacionados

Logotipo de Adobe

Inicia sesión en tu cuenta