Seleccione el objeto.
Última actualización el
8 jun 2021
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
Haga clic en el rectángulo situado junto a Rellenar. Aparecerá el 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.
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.
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.
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
Seleccione el objeto.
La anchura predeterminada de trazo es 1. Para especificar un valor diferente, cambie el valor Borde.
Haga clic en el trozo de color rectangular situado junto a Borde. Aparecerá el selector de color.
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.
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.
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.
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.
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.
Crear formas vectoriales editables a partir de líneas, rutas, formas, texto, imágenes y grupos booleanos usando Contornear trazo.Después de crear la forma, puede modificarla aún más usando controles o cambiando sus propiedades en el panel Propiedades.
Sigue estos pasos para crear un icono usando Contornear trazo.
Tutorial
Con la función Dar contorno a trazado en Adobe XD, puede personalizar fácilmente trazados, bordes y formas modificando su tamaño y exportándolos como SVG para web con total comodidad. Vea este tutorial de Dani Beaumont, director principal de productos de Adobe XD, para saber cómo usar la función Dar contorno a trazado.
Duración: 2 minutos y 50 segundos.
Las sombras internas y sombras paralelas hacen que los objetos de diseño se vean más realistas al simular efectos de iluminación.
Sombra interna
Las sombras internas se pueden usar para simular profundidad 3D en una imagen 2D. Por ejemplo, las sombras internas pueden ayudar a simular el estado presionado de un botón.
Sombra paralela
Las sombras paralelas, además de proporcionar un efecto 3D a los objetos, también pueden proporcionar una sensación de límite sin aplicar un trazo de borde.
Sigue estos pasos para aplicar una sombra interna o paralela a un objeto de diseño:
Haga clic en el objeto y, a continuación, haga clic en Sombra paralela o Sombra interna en el Inspector de propiedades.
En el selector de color, agregue un color y establezca la opacidad de la sombra:
a. Para añadir un color a la sombra, realice una de las siguientes acciones:
- Indique el valor HSB, RGB o hexadecimal del color. Puedes cambiar fácilmente entre estos modos de color usando el menú.
- 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. Para establecer la opacidad de la sombra: Usa el regulador de opacidad o escribe el valor de opacidad en porcentaje.
Para guardar un color elegido y opacidad como una muestra de color, haz clic en el icono + en la parte inferior del selector de color.Puede reorganizar las muestras en el selector de color arrastrándolas.Para eliminar una muestra, arrástrela al exterior del selector de color.
Indique lo siguiente en el Inspector de propiedades:
- Desplazamiento en X e Y: Especifica la extensión desde el borde del objeto hasta donde desea que se desplace la sombra.
- B (Desenfocar): Especifica la extensión desde el borde de la sombra hasta donde desea que ocurra cualquier desenfoque.
Puede copiar fácilmente las sombras aplicadas a un objeto a otros objetos mediante Pegar apariencia. Presione Ctrl+ C en el objeto que tiene la sombra aplicada y, a continuación, presione Ctrl+Alt+V (Pegar apariencia) en el objeto de destino.
Al generar especificaciones de diseño, las sombras de estas se convierten a CSS que los desarrolladores pueden usar fácilmente.
Ejemplos
Neomorfismos
?$png$&jpegSize=200&wid=901)
Colección de objetos con sombras aplicadas
?$png$&jpegSize=200&wid=900)
Tutorial
Cuando busque añadir profundidad a su diseño, la función Sombra interna de Adobe XD puede suponer una verdadera revolución.Vea este tutorial de Dani Beaumont, gerente principal de productos de Adobe XD, para aprender a usar sombras internas.
Duración: 3 minutos.
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
Diseñar prototipos de experiencia de usuario con Adobe XD
Crea bocetos interactivos para sitios web y aplicaciones móviles.
