DISEÑO GRÁFICO 06 DIBUJEMOS UN CORAZÓN, SIN UTILIZAR CÓDIGO, (POR FIN)



Primer ejercicio hecho exclusivamente en interfaz gráfica.

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 06 DIBUJEMOS UN CORAZÓN, SIN UTILIZAR CÓDIGO, (POR FIN)

 

Hola de nuevo, ahora que ya entendemos cómo funciona el código de una imagen vectorial, ya estamos preparados para dibujar nuestra primera imagen sin utilizar para ello el código.

Crearemos un corazón, parecido al que hicimos en el ejercicio anterior, pero únicamente utilizando la interficie gráfica.

Vamos a https://editor.method.ac

Para ello, utilizamos la pluma, pero, en lugar de curvas haremos rectas con vértices.

Recta: Hago clic con el mouse, muevo y vuelvo a hacer click:

Mediante clicks, haremos la siguiente figura:

 

Ahora, hacemos doble click sobre cada uno de sus vértices. De esta forma, los convertimos en curvas, apareciendo en cada uno de ellos, dos vectores:

A continuación, en todos los vértices que deban convertirse en curvas, pondremos sus vectores formando una recta, de esta forma:

En los puntos donde no deben haber curvas, sino vértices, podemos hacerlos más agudos, juntando los extremos de los vectores:

En principio, la figura ya estaría:

Pero, si la observamos con atención, vemos que las curvas que se unen por un punto, no quedan del todo bien:

Esto ocurre porque, para que queden bien, los dos vectores deben formar una línea recta perfecta y, además, deben medir exactamente lo mismo.

Hacer esto a mano es muy complejo. Pero existe un truco para que la aplicación lo haga automáticamente. Debemos insertar un nuevo punto: pulsamos "Add Node"

El nuevo nodo tiene sus vectores del mismo tamaño exacto y formando una recta perfecta.

Lo curioso de este nodo es que, si ahora tocamos los vectores de todas las curvas, estos se "contagian" de este fenómeno:

Es muy importante que en esta "Fase de Contagio" no toquéis los vectores de los puntos donde no deben haber curvas, si no, generan una curva y es bastante complicado repararlo...

Normalmente, haciendo Ctrl + Z se arregla, pero no siempre...

Por último, debemos eliminar el nodo que hemos añadido de más:

Y ya tenemos nuestra figura acabada.

Ha quedado muy bien.

Pero, en ocasiones, nos interesa conseguir que la figura sea perfectamente simétrica y con las curvas exactas...

En ese caso, deberemos tocar el código:

  <path id="svg_6" d="m350,100c10,0 70,0 70,70c0,70 -40,110 -140,140c-90,-30 -140,-70 -140,-140c0,-70 60,-70 70,-70c10,0 70,0 70,70c0,-70 60,-70 70,-70z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>         

Ese es el resultado:

Aquí os dejo el código de la imagen que hemos dibujado:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">

 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->

 <g>

  <title>background</title>

  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>

  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">

   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>

  </g>

 </g>

 <g>

  <title>Layer 1</title>

  <path id="svg_1" d="m346.5,86.78125c32.55261,-0.31305 89.55765,9.56962 88.5,74.21875c-1.05765,64.64913 -163.33333,107.66667 -179,187c-2.83334,-40.16666 -161.35834,-108.85587 -161.10712,-170.2857c0.25122,-61.42983 52.66852,-93.66167 98.10712,-92.7143c45.4386,0.94737 65.66667,32 70,69c8.83333,-36.40625 50.94739,-66.9057 83.5,-67.21875z" stroke-width="1.5" stroke="#000" fill="#fff"/>

 </g>

</svg>

        

 

Y eso es todo por hoy.

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

Ver todos los demás