DISEÑO GRÁFICO 08 SENSACIÓN 3D

Hola de nuevo, las imágenes vectoriales son de dos dimensiones, pero con algunos pequeños trucos de brillos y sombras, podemos dar la sensación de que la imagen tiene 3D

Crearemos un corazón, parecido al que hicimos en el ejercicio anterior.

Vamos a https://editor.method.ac

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:

Ahora lo pintamos de rojo:

La idea es imaginarnos que tenemos una luz en esa u otra posición.

Que pasaría entonces?

Que la parte izquierda del corazón, estaría más clara:

Hacemos esta figura, de un color rojo pálido:

Y la modificamos para que se adapte a la forma que tendría un brillo en una figura 3D

Y lo ponemos encima

Del mismo modo, en la parte opuesta del corazón, habrá una sombra. Así que crearemos una forma de color más oscuro.

Lo modificamos

Y lo ponemos encima

Podemos añadirmás sombras y brillos:

Aquí tenéis el código:

<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 x="-1" y="-1" width="646.445412" height="446.445111" id="canvas_background" fill="#fff"/>

  <g id="canvasGrid" display="none">

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

  </g>

 </g>

 <g>

  <title>Layer 1</title>

  <path fill="#ff0000" stroke="#000" stroke-width="1.5" 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" id="svg_1"/>

  <ellipse ry="25" rx="29" id="svg_3" cy="47.78125" cx="37.5" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#ffff00"/>

  <path id="svg_7" d="m167.5,97.78125c52,2 -42,33 -41,85c1,52 48,73 36,73c-12,0 -47,-55 -48,-69c-1,-14 1,-91 53,-89z" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#ffaaaa"/>

  <path id="svg_8" d="m368.5,100.78125c45,-3 85,64 40,93c-45,29 -127,103 -148,115c-21,12 124,-94 121,-151c-3,-57 -58,-54 -13,-57z" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#7f0000"/>

  <path transform="rotate(-40 233.33288574218736,129.73583984374997) " stroke="#000" id="svg_10" d="m226.032107,93.723384c22.149073,-1.625732 37.899525,26.011717 19.688065,50.397701c-18.21146,24.385985 -22.149073,21.13452 -31.008702,21.676431c-8.859629,0.541911 19.195863,-10.296305 17.719259,-41.185218c-1.476605,-30.888914 -28.547694,-29.263181 -6.398621,-30.888914z" stroke-opacity="null" stroke-width="1.5" fill="#7f0000"/>

  <path stroke="#000" transform="rotate(51 303.4101562499999,122.17413330078129) " id="svg_11" d="m310.989808,82.154236c21.035535,1.013408 -16.99024,16.721225 -16.58571,43.069822c0.40453,26.348597 19.417417,36.989376 14.563062,36.989376c-4.854354,0 -19.012887,-27.868708 -19.417417,-34.962561c-0.40453,-7.093853 0.40453,-46.110044 21.440064,-45.096637z" stroke-opacity="null" stroke-width="1.5" fill="#ffaaaa"/>

 </g>

</svg>

También, podríamos darle un aspecto menos cómico:

Copiar, pegar...

Añadimos un nodo aquí:

Lo arrastramos

Eliminamos el resto de nodos y dejamos solamente estos

Movemos los vectores.

Pintamos la nueva forma de un color más oscuro

Podemos hacer lo mismo con el brillo de la izquierda.

...y si le sacamos los bordes a las figuras que hacen de sombras y brillos, e igualamos un poco más los colores. El resultado es menos histriónico y más realista:

El código:

<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" id="canvasGrid">

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

  </g>

 </g>

 <g>

  <title>Layer 1</title>

  <ellipse fill="#ffff00" stroke="#000" stroke-width="1.5" stroke-opacity="null" cx="37.5" cy="47.78125" id="svg_3" rx="29" ry="25"/>

  <path fill="#ffaaaa" stroke="#000" stroke-width="1.5" stroke-opacity="null" d="m167.5,97.78125c52,2 -42,33 -41,85c1,52 48,73 36,73c-12,0 -47,-55 -48,-69c-1,-14 1,-91 53,-89z" id="svg_7"/>

  <path fill="#7f0000" stroke="#000" stroke-width="1.5" stroke-opacity="null" d="m368.5,100.78125c45,-3 85,64 40,93c-45,29 -127,103 -148,115c-21,12 124,-94 121,-151c-3,-57 -58,-54 -13,-57z" id="svg_8"/>

  <path fill="#7f0000" stroke-width="1.5" stroke-opacity="null" d="m226.03211,93.72338c22.14907,-1.62573 37.89952,26.01172 19.68806,50.3977c-18.21146,24.38599 -22.14907,21.13453 -31.0087,21.67644c-8.85963,0.54191 19.19586,-10.29631 17.71926,-41.18522c-1.47661,-30.88892 -28.5477,-29.26318 -6.39862,-30.88892z" id="svg_10" stroke="#000" transform="rotate(-40 233.33288574218736,129.73583984374997) "/>

  <path fill="#ffaaaa" stroke-width="1.5" stroke-opacity="null" d="m310.98981,82.15424c21.03553,1.0134 -16.99024,16.72122 -16.58571,43.06982c0.40453,26.34859 19.41741,36.98937 14.56306,36.98937c-4.85435,0 -19.01289,-27.8687 -19.41742,-34.96256c-0.40453,-7.09385 0.40453,-46.11004 21.44007,-45.09663z" id="svg_11" transform="rotate(51 303.41017150878906,122.17413330078125)" stroke="#000"/>

  <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="#ff0000"/>

  <path id="svg_5" d="m384.5,120.78125c-33.44739,-54.31305 56.55765,-22.43038 50.5,40.21875c-6.05765,62.64913 -163.33333,107.66667 -179,187c-1.41667,-20.08333 33.24374,-92.2973 72.28973,-110.16916c39.04599,-17.87186 89.65766,-62.73654 56.21027,-117.04959z" stroke-width="1.5" fill="#bf0000"/>

  <path id="svg_6" d="m130.97838,199.99343c3.34054,50.75219 132.85496,108.33991 125.02162,148.00657c-2.83334,-40.16666 -161.35834,-108.85587 -161.10712,-170.2857c0.25122,-61.42983 52.66852,-93.66167 98.10712,-92.7143c22.7193,0.47369 39.95865,8.47148 50.41448,20.98026c10.45583,12.50878 -24.98473,5.01262 -60.12348,15.13899c-35.13875,10.12637 -55.65316,28.12199 -52.31262,78.87418z" stroke-width="1.5" fill="#fc3c3c"/>

  <path id="svg_14" d="m248.60508,118.770542c3.974454,-0.532158 12.585772,16.496913 12.916976,26.075766c0.331205,9.578853 -6.955295,24.479291 -10.26734,23.947132c-3.312045,-0.532158 3.312045,-13.836121 3.312045,-22.350657c0,-8.514536 -9.936135,-27.140083 -5.961681,-27.672242z" stroke-width="1.5" fill="#bf0000"/>

  <path transform="rotate(-131 299.9573669433594,116.57462310791017) " id="svg_15" d="m292.065263,69.844579c5.232391,-0.994225 16.569223,30.820911 17.005261,48.716911c0.436031,17.896 -9.156681,45.734235 -13.517003,44.74001c-4.360321,-0.994225 4.360321,-25.849784 4.360321,-41.757353c0,-15.90755 -13.080964,-50.705343 -7.84858,-51.699569z" stroke-width="1.5" fill="#ff4949"/>

 </g>

</svg>

Y eso es todo por hoy.

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