Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Consejo rápido: diseña un gráfico de flecha SVG en Adobe XD

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este breve tutorial te voy a mostrar cómo hacer el gráfico de una flecha listo para SVG utilizando Adobe XD.

Mira el Screencast

Usaré el diseño de un sitio web que es parte de un nuevo curso llamado "Diseño amigable con Adobe XD". Ya se tiene el área del contenido principal en la parte superior de la página, y ahora quiero agregar un botón con una flecha que alentará a los usuarios a desplazarse hacia abajo para ver más contenido.

Adobe XD no es un programa de edición vectorial plenamente desarrollado, pero aún hay mucho que puedes hacer con él. Al utilizar las herramientas vectoriales de XD donde quiera que que puedas, en lugar de mapas de bits planos (como JPG, PNG, etc.) cuando le entreges el diseño a un desarrollador, ellos podrán tomar esos gráficos vectoriales y convertirlos directamente en código SVG.

Diseñando un icono de flecha

Empezaremos con la herramienta Elipse y la utilizaremos para dibujar un círculo de aproximadamente 85 píxeles de ancho. Eliminaremos el borde alterando las configuraciones en el panel de Propiedades de la derecha, luego cambiaremos el relleno a algo más apropiado.

Luego utilizaremos la herramienta Rectángulo para crear una forma que se superponga a la parte superior del círculo. Al redimensionarlo, notarás que se ajusta perfectamente al punto medio del círculo. A continuación, podemos seleccionar ambas formas y, utilizando los Operadores Booleanos en el panel Propiedades, podemos restar la mitad superior del círculo.

Para crear la flecha, vamos a restar otra forma de este semicírculo. Será un poco más complejo que lo que hemos hecho hasta el momento, porque Adobe XD está diseñado para ser una aplicación de creación de prototipos, no un programa de diseño vectorial dedicado. Sin embargo, indudablemente podemos trabajar con lo que tenemos. Voy a optar por la herramienta Pluma en combinación con la herramienta Rectángulo.

Consejo:

Obtén más control sobre el trazado en tus formas haciendo clic con el botón derecho sobre la forma que quieres editar, luego ve a Trazado> Convertir a Trazado. Esto cambiará el objeto de una forma predefinida a un conjunto viable de trazados. Para editar los nodos en ese trazado, haz doble clic en el objeto.

Depende de ti cómo crear tu icono de flecha, pero una vez que lo hayas realizado, colócalo encima del objeto de semicírculo, selecciona ambos y resta la flecha con la herramienta Booleana como lo hicimos anteriormente. Deberías terminar con algo como esto:

¡Has terminado el ícono de flecha listo para SVG utilizando herramientas simples en Adobe XD! Para más detalles sobre lo que puede hacer con él, manten tus ojos bien abiertos para el próximo curso.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.