DISEÑO GRÁFICO 02 HAGAMOS UN DIBUJO VECTORIAL



Hoy utilizaremos un editor On Line para crear nuestra primera imagen vectorial.

Video Explicativo

Ver en YouTube

Para ver el video más lento: Configuración - Velocidad - 0,5...



Explicación paso a paso:

DISEÑO GRÁFICO 02 HAGAMOS UN DIBUJO VECTORIAL

 

Hola de nuevo, hoy vamos a crear y modificar una imagen vectorial.

Vamos a https://editor.method.ac

Cambiamos el tamaño del documento:

Y el color del fondo:

Para empezar, dibujaremos una figura simple:

Una hoja realizada con dos líneas curvas:

Seleccionamos la herramienta "Estilográfica"

Pulsamos el Mouse en la parte superior central de la imagen. Y arrastramos, sin soltar, hacia la derecha. De la forma más horizontal posible.

Aparece un elemento que nos indica el ángulo con el que saldrá la línea que dibujaremos.

Cuanto más larga, más horizontal tenderá a ser.

Suelto y busco el punto final de la curva.

Aquí podemos ver la diferencia entre dos curvas debido a la amplitud del segmento:

Cuando llego al punto donde debe acabar la primera línea, pulsamos y arrastramos hacia la izquierda de la forma más horizontal posible:

Ya hemos acabado la primera línea.

Ahora soltamos y vamos a buscar el origen de la primera línea

Pulsamos justo en él y, ya tenemos la figura hecha con dos líneas curvas:


 

Vamos a ver su código:

  <path id="svg_2" d="m98.71428,25.84379c69.42854,0 57.42854,119.71422 3.14286,120.57137c-54.28569,0.85714 -72.57139,-120.57137 -3.14286,-120.57137z" stroke-width="1.5" stroke="#000" fill="#fff"/>

Podemos modificarlo para que sus valores sean números redondos:

<path fill="#fff" stroke="#ffffff" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" d="m100,25c50,0 50,150 0,150c-50,0 -50,-150 0,-150z" id="svg_100"/>

...y ahora la pregunta: Te atreves a intentar hacer un círculo tocando los números de colores?

La solución al final:



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Efectivamente. Este es el código:

<path fill="#fff" stroke="#ffffff" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" d="m100,25c100,0 100,150 0,150c-100,0 -100,-150 0,-150z" id="svg_100"/>

Conseguido.


 

Así pues, los siguientes valores representan, según sus colores:

<path fill="#fff" stroke="#ffffff" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" d="m100,25c100,0 100,150 0,150c-100,0 -100,-150 0,-150z" id="svg_100"/>

<path fill="#fff" stroke="#ffffff" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" d="m100,25c100,0 100,150 0,150c-100,0 -100,-150 0,-150z" id="svg_100"/>

 

 

Y eso es todo por hoy.

Espero que os haya gustado y, hasta la próxima...

Ver todos los demás