Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. International Women's Day

Cree un logotipo SVG animado para el Día Internacional de la Mujer 2019

by
Difficulty:BeginnerLength:LongLanguages:

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

Para conmemorar el Día Internacional de la Mujer 2019, crearemos una versión SVG animada del logotipo del evento que puede usar junto con el hashtag de este año #BalanceforBetter.

En el proceso, aprenderemos a usar Figma y sus operaciones booleanas, así como la animación SVG en línea a través del elemento animateTransform.

Esto es lo que va creando:

Para que la cabeza más Figma, crear un archivo nuevo para trabajar en y vamos a empezar!

Crear el Logo de la Figma

Operaciones booleanas

La manera que va creando nuestra ilustración insignia es dibujar varias formas y luego los combina mediante operaciones booleanas. Encontrarás las operaciones booleanas en medio de la barra de herramientas superior de Figma. Usaremos las operaciones de unión de la selección y restar de la selección, y lo que cada uno de estos verás como nos paso con el tutorial.

El círculo principal

Inicie la herramienta de elipse y sacar un círculo 300px ancho por 300px, con un color de relleno de #46296E.

Crear otro círculo, esta vez 180px por 180px.

Seleccione su primer y segundo círculo haciendo clic en una forma, manteniendo presionada la tecla Mayús y luego haciendo clic en la otra forma. Use las herramientas de alineación en la parte superior de la barra lateral derecha para alinear verticalmente y horizontalmente los dos círculos de manera que sus centros estén en la misma posición.

Entonces, con ambas formas aún seleccionados, seleccione restar de la selección en el menú de operaciones booleanas.

Cuando se utiliza la operación booleana de restar, se restará la forma del elemento más superior de la forma del elemento inferior. Esto crea un centro hueco en nuestra original forma de círculo.

El recorte izquierdo parte inferior

Ahora vamos a crear la sección de corte rectangular delgado en la parte inferior izquierda del logo.

Utilizando la herramienta Rectángulo, dibujar un rectángulo 14px ancho de 100px de alto.

Girar el rectángulo-45 grados. Puede hacerlo introduciendo la cifra correcta en el campo de rotación de la forma en la barra lateral derecha.

Luego coloque el rectángulo en la esquina inferior izquierda del círculo.

Seleccione el rectángulo y el círculo y elegir otra vez restar de la selección en el menú de operaciones booleanas para generar el efecto de recorte.

Los triángulos de la cabeza de flecha

A continuación vamos a hacer la cabeza triangular de la forma de la flecha y el recorte triangular correspondiente

Para asegurar que terminan con un triángulo que tiene un ángulo recto perfecto, en lugar de utilizar la herramienta polígono, usaremos la herramienta rectángulo. Dibujar un cuadrado que es 72px por 72px. Debe compartir el mismo color púrpura de #46296E que hemos estado usando hasta ahora.

Tenemos que eliminar uno de los nodos de la plaza a fin de convertirlo en un triángulo de ángulo recto. Ir al nodo en modo de edición por doble clic en el cuadrado, o elegir la opción de menú Editar objeto de la misma sección del menú superior en la que se encuentran las operaciones booleanas.

Una vez en modo de edición de nodos, utilice la herramienta mover para seleccionar el modo correcto de la parte inferior. Porque necesitamos eliminar este nodo puede pensar debe pulsar la tecla de retroceso o el botón delete, pero si sólo dejará los tres nodos restantes abiertos con sin relleno.

Por el contrario, pulse Mayús + retroceso para usar el borrar y sanar función de selección, que se cerrará la forma cuando se elimina el nodo.

Haga clic en el botón azul hecho a la izquierda del menú superior para terminar esta forma de edición.

Pasar del triángulo en la parte superior derecha de nuestra forma de círculo.

Vamos a necesitar un triángulo para formar la punta de la flecha y otro para cortar una forma de triángulo del círculo. Para ello, duplique el triángulo seleccionándolo y luego presionando Ctrl + D. Mueva el duplicado hacia arriba y hacia la izquierda aproximadamente 6 píxeles.

Ocultar temporalmente el primer triángulo, (uno inferior), haciendo clic en el icono ojo del panel capas para que podamos ver más claramente el triángulo duplicado.

Seleccione el triángulo duplicado y la forma de círculo principal y utilice el sustraer de selección desde el menú de operaciones booleanas para crear este efecto de recorte:

Coloque el triángulo original para volver a mostrar, seleccionar y la forma de círculo principal, luego combinar los dos eligiendo Unión selección desde el menú de operaciones booleanas. Esto completa el área de la cabeza de flecha.

El recorte de parte inferior derecha

Ahora podemos pasar a crear el extremo pequeño, redondeado, Cruz en forma de recorte en la parte inferior derecha del círculo.

En primer lugar, dibujar un rectángulo 12px amplia por 80px de alto y aumentar la esquina redondeo mediante campo de radio de la esquina de la forma en la barra lateral derecha hasta que vea que las esquinas no están obteniendo cualquier todoterreno. (6px o superior). Esto crea tapas perfectamente redondeados en ambos extremos del rectángulo.

Duplicar el rectángulo redondeado, cambiar su altura 50px y gírelo 90 grados. Seleccione ambas formas y alinéelas horizontalmente presionando el botón Alinear centros horizontales en la parte superior de la barra lateral derecha. Coloque este nuevo rectángulo cerca de la parte inferior del primer rectángulo de manera que:

Combinar las dos formas seleccionándolos y eligiendo Unión selección desde el menú de operaciones booleanas. Luego seleccione la forma recién unificada y girarla 45 grados.

Coloque la forma sobre nuestra forma de círculo principal en la parte inferior derecha, como se ve a continuación:

Con la forma de Cruz y principal círculo seleccionada, seleccione restar de la selección en el menú de operaciones booleanas para hacer el corte final.

Su insignia completa debería parecerse a esto:

Nota en "Aplanar" y SVG

En este punto usted tendrá una serie de formas anidados en el panel capas, combinado por varias operaciones booleanas. Opcionalmente puede haga clic en la ilustración, elija aplane y esa jerarquización se colapsó en una sola capa. En muchos casos esto será preferible a tener varias formas anidados.

Sin embargo, en nuestro caso crearía dos separadas las secciones, la parte superior izquierda y mitad derecha inferior, y los que a su vez se convertirían en dos elementos de la ruta en código SVG. Así, dejaremos nuestros perfiles anidados como es, porque cuando nosotros convertirlo a código poco Figma nos dará una ruta única, que es más fácil de animar.

Traducción a código

Con la ilustración completa ahora estamos listos para convertirlo en SVG e incrustar en una página HTML para animación.

Configurar el HTML

Vamos a empezar por crear el documento HTML. Crear un archivo llamado index.html y agregue este código:

Esto es sólo una cáscara básica donde tenemos un conjunto de etiquetas de estilo listos para algunos CSS, y nos estamos cargando en una fuente de Google que va a utilizar en un momento.

Convertir a SVG

Figma hace conversión de nuestra ilustración a SVG extremadamente rápido y fácil. Simplemente haga clic derecho sobre la imagen y elija Copiar como > Copiar como SVG.

Luego pegar el código resultante en la sección body de tu HTML.

Entre el <style>...</style> etiquetas añadir este CSS vertical centro nuestro SVG y hacer un pequeño espacio por encima de él.

Previsualizar el archivo en el navegador y debe aparecer tu imagen SVG:

Agregar animación

Ahora podemos seguir adelante y animar el SVG a girar lentamente. Vamos a estar haciendo esto con el elemento animateTransform, que puede ser colocado entre las etiquetas de apertura y cierre de una forma SVG.

Nuestro código pegado tiene actualmente un auto cierre elemento de ruta de acceso, es decir, así:

<path...></path...>

Tendremos que cambiar esto para tener un par de etiquetas<path></path>  a las que podamos agregar nuestro elemento animateTransform. Elimine la barra diagonal (/) al final de la etiqueta de ruta actual, luego agregue una etiqueta de cierre </path> también detrás de ella.

Nuestro elemento de ruta de acceso está ahora listo para ser animado. Pegue el código siguiente antes de la etiqueta de  </path> cierre:

El código SVG resultante debería parecerse a esto:

Echemos un vistazo rápido a las propiedades de nuestro elemento de animateTransform qué a través de los valores que hemos creado:

  • tipo = "girar"
    Animar rotación, a diferencia de la escala o la traducción de
  • de = "0 150 150"
    Las coordenadas del punto de inicio de la animación. El primero de los tres valores son los grados iniciales de rotación, mientras que los valores segundo y tercero son las posiciones x e y del centro. Comenzamos con 0 grados de rotación y establecemos el centro en 150 en ambas direcciones ya que esa posición está justo en el medio de nuestra forma de 300 por 300.
  • a = "-360 150 150"
    Las coordenadas de la animación de punto de llegada, representando otra vez grados de rotación y x del centro y posición. Dejamos el centro en la misma posición y establece los grados de acabado de la rotación en -360 de una rotación completa. El valor negativo hace que la rotación gire hacia la izquierda, en la dirección que apunta la flecha.
  • comenzar = "0s"
    Ajuste este valor a los medios de 0 segundos la animación comenzará inmediatamente. Si se utiliza un número positivo que causaría un retraso en el inicio de la animación.
  • Dur = "10s"
    Aquí fijamos la duración a 10 segundos por lo que la animación tiene un ritmo bastante lento.
  • repeatCount = "indefinido"
    Este valor significa indefinido que la animación será lazo sin fin

Cuando actualices el navegador deberías ver el logo girando.

Ajustar viewBox para evitar el recorte

Como puede ver en la imagen de arriba, cuando la punta de la flecha gira cerca de los bordes exteriores del SVG, se corta. Para solucionar esto ajustaremos el viewBox. Al ajustar el viewBox, básicamente podemos alejar un poco nuestra imagen vectorial.

Ajuste los valores de viewBox en la etiqueta de apertura svg a -20 -20 340 340, de esta manera

Los dos primeros números controlan el "panorama" de la forma, y los dos últimos números controlan el "zoom".

Mediante el establecimiento de los dos últimos números y 340 340, efectivamente estamos contando los SVG para mostrarnos el equivalente de 340px por 340px de imagen de 300px por 300px de espacio para las propiedades width y height. Para lograr esto el SVG tiene que ser reducido, o "zoom out", que nos da algo de espacio alrededor de la insignia.

Luego, "desplazamos" la imagen hacia abajo y hacia la derecha 20px con los dos primeros números. Si no hiciéramos esto, la imagen se quedaría arriba en la esquina superior izquierda del viewBox y continuaría recortándose en su parte superior e izquierda al girar. Este "desplazamiento" nos da un espacio vacío a nuestro alrededor, y cuando la imagen gira, la flecha ya no se recorta.

El SVG animado terminado se ve así:

Añadir texto

Ahora vamos a añadir un pequeño texto debajo de la animación, con etiqueta de día internacional de las mujeres de 2019. Pegue el código siguiente debajo de su SVG:

Y dale estilo agregando el siguiente CSS a tus etiquetas de estilo:

Con este CSS hacemos lo siguiente:

  • Centro de alinear el texto a través de la etiqueta body.
  • Establecer su fondo en color púrpura y el texto a blanco a través de la etiqueta h1.
  • Ajustar la visualización en línea-bloque - la parte de "en línea" significa que todavía se comportan como texto, pero la parte del "bloque" nos da un mayor control de su espaciado y alineación.
  • Establece la familia de fuentes a "Open Sans", con un montón de fuentes de reserva.
  • Establecer el tamaño de fuente.
  • Añadir un acolchado en el interior para que el fondo morado no es al ras con los bordes del texto.
  • Establezca el margen en 0 por lo que no hay demasiado espacio entre el SVG y el texto.

Actualización y su página completa deben tener este aspecto:

Terminando

El código final debe ser:

¡Mira esto!

Ojala que recogió algunos consejos útiles para el uso Figma, crear SVGs y animar a través de animateTransform.

Para más información sobre Figma, SVG y animateTransform disfrutan de estos recursos de aprendizaje adicionales:

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.