Share
En este rápido tutorial, te mostraré cómo hacer un gráfico de flecha listo para SVG usando Adobe XD.
Usaré un diseño de sitio web que es parte de un nuevo curso llamado "Diseño compatible con código con Adobe XD". Ya tiene el área de contenido principal en la parte superior de la página, y ahora quiero agregar un botón con una flecha que aliente a los usuarios a desplazarse hacia abajo para ver más contenido.
Adobe XD no es un programa de edición de vectores en toda regla, pero todavía hay mucho que puedes hacer con él. Al usar las herramientas vectoriales de XD donde sea que pueda, en lugar de mapas de bits planos (como JPG, PNG, etc.) cuando entregue el diseño a un desarrollador, podrán tomar esos gráficos vectoriales y convertirlos directamente en código SVG.
Comenzaremos con el Elipse Herramienta y utilícela para dibujar un círculo de aproximadamente 85 px de ancho. Eliminaremos el borde modificando la configuración de la mano derecha. Propiedades panel, luego cambiar el relleno a algo adecuado.
Luego usaremos el Rectángulo Herramienta para crear una forma que se superpone a la parte superior del círculo. Al redimensionarlo, notará que se ajusta perfectamente a la mitad del círculo. Luego podemos seleccionar ambas formas y, usando la Operadores booleanos en el Propiedades Panel, podemos restar la mitad superior del círculo..
Para crear la flecha vamos a restar. otro Forma de este semicírculo. Será un poco más delicado de lo que hemos hecho hasta ahora, 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, ciertamente podemos trabajar con lo que tenemos. Estoy optando por el Bolígrafo herramienta en combinación con el Rectángulo herramienta.
Obtenga más control sobre las rutas en sus formas haciendo clic derecho en la forma que desea editar, y luego vaya a Ruta> Convertir a ruta. Esto cambiará el objeto de una forma predefinida a un conjunto viable de rutas. Para editar los nodos en esa ruta, haga doble clic en el objeto.
Depende de usted cómo crear su ícono de flecha, pero una vez que esté listo, colóquelo sobre el objeto del semicírculo, seleccione ambos y reste la flecha con la Booleano Herramientas como hicimos antes. Deberías terminar con algo como esto:
¡Ya ha completado el ícono de flecha listo para SVG usando herramientas simples en Adobe XD! Para obtener detalles sobre lo que puede hacer con él a continuación, mantenga los ojos abiertos para el próximo curso.
Accentsconagua