Cómo crear gráficos con Adobe XD: una guía para principiantes

Adobe XD es una poderosa herramienta que le permite crear diseños de UI/UX para software, aplicaciones, sitios web y más. Esto también incluye la creación de maquetas, prototipos y componentes de interfaz de usuario personalizados para una interfaz. Puede crear diseños simples y complejos con Adobe XD.

Aquí, describiremos cómo agregar gráficos simples que incluyen formas, imágenes y texto a un nuevo proyecto de Adobe XD. A esto le seguirá una guía sobre cómo convertir un grupo de formas en componentes y cómo reutilizar esos componentes en la página. Finalmente, el artículo también cubrirá cómo exportar sus gráficos. Saltemos directamente.

Creación de un proyecto de Adobe XD

Cuando crea un nuevo proyecto de Adobe XD, debe seleccionar un tamaño de diseño para su proyecto. Proporciona algunas plantillas para que elijas en función de algunos dispositivos populares.

Algunos ejemplos de esto incluyen el iPhone X/XS/11 Pro (375 px por 812 px), iPad (768 px por 1024 px) o Web 1920 (1920 px por 1080 px). Alternativamente, también tiene la opción de seleccionar un ancho y alto personalizados para su proyecto.

Una vez que haya creado un nuevo proyecto, Adobe XD abrirá una página en blanco. Aquí es donde puede comenzar a agregar imágenes, formas, texto u otros elementos de diseño. Según la versión de Adobe XD que tenga, es posible que pueda explorar algunas de las nuevas características que ofrece Adobe XD.

El elemento de diseño de nivel superior es la propia página de lienzo. Si lo resalta, puede usar el panel de la derecha para cambiar algunas de sus propiedades directamente, como el ancho o el alto del lienzo.

Cómo agregar imágenes

Hay varias formas de agregar imágenes a su proyecto de Adobe XD.

• La primera opción es hacer clic en el hamburguesa icono de menú en la parte superior de la columna de la izquierda. Haga clic en Importary abra el archivo que desea agregar.
• Otra opción es navegar hasta su imagen en el explorador de archivos y arrastrar el archivo directamente a Adobe XD.
• Una tercera opción es copiar y pegar tu imagen si la tienes abierta en otro software, como Microsoft Word.

Cómo cambiar el tamaño y la posición de una imagen

Puede cambiar de posición y cambiar el tamaño de una imagen ya sea directamente en el lienzo o cambiando sus propiedades.

1. Resalta la imagen. Cuando resalte un elemento de diseño en el lienzo, podrá ver sus propiedades en el panel de la derecha.
2. Cambia el ancho y alto de la imagen. Estos están representados por el W y H los campos.
3. También puede cambiar el X y Y coordenadas de donde comienza la parte superior izquierda de la imagen.
4. Para mover la imagen, haga clic y arrastre la imagen en el lienzo.
5. Para cambiar el tamaño, arrastre los puntos ubicados en los bordes de la imagen.

Cómo ajustar los bordes de una imagen

Puede ajustar las esquinas de la imagen para cambiar su forma.

1. Resalta la imagen.
2. Verás algunos puntos ubicados alrededor de la imagen. Además, también hay algunos puntos ubicados dentro de las esquinas de la imagen.
3. Haga clic y arrastre en un punto ubicado dentro de la imagen. Esto remodelará lentamente la imagen en una forma diferente.

Cómo agregar otros efectos a la imagen

Puede manipular aún más la imagen agregando efectos. Esto incluye opacidad, bordes, efectos de desenfoque y más.

1. Resalta la imagen y cambia el Opacidad en el panel de la derecha.
2. Mientras aún está en el panel de la derecha, cambie el color de la Bpedido. Aquí, también puede cambiar el grosor, estilo guión, y estilo de esquina de la frontera
3. Agregue un efecto de desenfoque a la imagen y cambie el Cantidad de desenfoque del objeto para aumentar o disminuir la intensidad del desenfoque.

Cómo agregar formas

Puede agregar formas en Adobe XD a través del panel de la izquierda.

1. En el panel de la izquierda, puede optar por crear varias formas básicas, incluidos un rectángulo, un círculo, un triángulo y una línea. Seleccione la forma que desea dibujar.
2. Haga clic en cualquier punto del lienzo y arrastre el cursor para comenzar a crear la forma.

Cómo agregar formas personalizadas

Puede utilizar la herramienta de forma personalizada para crear su propia forma.

1. En el panel de la izquierda, seleccione el bolígrafo icono.
2. Haga clic en cualquier parte del lienzo para agregar su primer punto, o "esquina", para la forma. Para cada punto de la forma, haga clic en el lienzo en el área donde le gustaría que estuviera.
3. Cuando haya terminado de crear la forma, presione el botón miCarolina del Sur clave en su teclado.

Cómo cambiar el color de una forma

Puede cambiar el color de la forma utilizando el panel de la derecha.

1. Resalta la forma.
2. En el panel de la derecha, cambie el Fenfermo.
3. Además, también puede agregar bordes, efectos de desenfoque y cambiar la opacidad de la forma de la misma manera que las imágenes.

Cómo agregar texto

Tú también puedes añadir y editar texto de la misma manera que añades formas.

1. Clickea en el Texto icono en el panel de la izquierda.
2. Haga clic en cualquier parte del lienzo para agregar un nuevo cuadro de texto. Escriba el texto deseado en el cuadro de texto.
3. Utilice el panel de la derecha para editar el Talla, Familia tipográfica, y alineación los campos.

Cómo crear componentes

Un componente es un grupo de elementos de diseño que se pueden reutilizar. Para crear y usar un componente, primero debe tener un grupo de formas u otros objetos de diseño.

1. Resalte el grupo de formas en el lienzo. Haga clic derecho en el grupo y seleccione Hacer componente.
2. En la parte inferior del panel izquierdo, haga clic en Activos. Se abrirá un nuevo menú que enumera los activos que tiene, incluido el componente que acaba de agregar.
3. Haga clic y arrastre el componente de la lista de componentes al lienzo. Al hacerlo, se creará exactamente el mismo grupo de elementos.

Cómo exportar artículos

Puede exportar elementos individuales, así como la página completa.

1. Si desea exportar un solo elemento, resalte el elemento que desea exportar.
2. Clickea en el hamburguesa icono de menú en la parte superior de la columna de la izquierda.
3. Seleccione Exportar, luego haga clic en Seleccionado.
4. Si desea exportar la página completa (o todas las páginas), seleccione Todas las mesas de trabajo en cambio.
5. Puede especificar el formato de archivo (PNG, JPG, SVG o PDF), para qué será el elemento exportado (como Web o iOS) y dónde le gustaría guardar su archivo.

Hágase experto en Adobe XD

Estos son solo los conceptos básicos. Algunas otras características incluyen la capacidad de agregar hipervínculos, símbolos, integraciones de aplicaciones y kits de interfaz de usuario. Adobe XD también presenta nuevas funciones de vez en cuando para ayudar a mejorar y agilizar la creación de sus maquetas y diseños de interfaz de usuario personalizados.

Hay varios cursos disponibles en línea para ayudarlo a llevar sus nuevas habilidades de diseño al siguiente nivel.

Estos cursos de Adobe lo convertirán en un maestro de Creative Cloud

Leer siguiente

Sobre el Autor