Cómo hacer un árbol de Navidad isométrico SVG en Affinity Designer

En este tutorial vamos a estar en la ovación de la temporada creando una ilustración de árbol de Navidad SVG que puede usar en cualquier sitio web. Vamos a crear la ilustración en Affinity Designer y luego aprovechar la funcionalidad de exportación específica de SVG del programa.

Nota: los pasos siguientes suponen que tiene un nivel básico de familiaridad con Affinity Designer. Si no, puede comenzar a rodar con nuestro curso Affinity Designer Quick Start.

La creación de gráficos SVG en Affinity Designer es un asunto bastante directo, con solo un par de "errores" para evitar. Una en particular es asegurarse de no utilizar modos de fusión que no sean "Normal" en ningún lugar de su documento. Si lo hace, su imagen se rasterizará parcialmente, lo que frustrará el propósito de los gráficos SVG (la "S" significa "escalable"). Dicho esto, si bien no puedes usar diferentes modos de fusión, puedes usar diferentes configuraciones de opacidad.

Otra cosa a tener en cuenta es tratar de mantener sus formas lo más simple posible para minimizar el tamaño del archivo. Por ejemplo, el uso de tipos de trazos de fantasía o texturas dará lugar a un enorme tamaño de archivo. Mantendremos nuestras técnicas de ilustración básicas a lo largo de este tutorial para ser tan amigables con SVG como podamos.

¡Vamos a empezar!

1. Configure el documento y la cuadrícula isométrica

Cree un nuevo documento y seleccione Web en el menú desplegable Tipo en el cuadro de diálogo de creación de documento. Establezca tanto el ancho de la página como el alto de la página para que sea de 1024 px.

A continuación, sigamos adelante y configuremos nuestra grilla isométrica. En el menú que se encuentra en la parte superior de Affinity Designer, ve a Vista > Asistente de Cuadrícula y ejes y verás un cuadro de configuración de cuadrícula. Cambiar estas configuraciones:

• Marca Mostrar cuadrícula
• Desmarca Usar cuadrícula automática
• Cambiar el modo de grilla de Básico a Avanzado
• En el menú desplegable Tipo de cuadrícula, seleccione Isométrico
• Deje la configuración de Espaciado a 64 px
• Cambia las Divisiones a 8

Cómo describiremos la cuadricula isométrica

A lo largo de este tutorial, colocaremos nodos de ruta en la cuadrícula isométrica para crear y ajustar las formas que formarán nuestro árbol de Navidad. Como tal, definiremos algunos términos para describir nuestra cuadrícula de modo que cuando especifique el tamaño que debe tener una forma, o la distancia que un nodo debe moverse en la cuadrícula, sabrá de lo que estoy hablando.

Cuando miras la rejilla verás que tiene varias líneas más gruesas que forman grandes diamantes, y dentro de esos diamantes hay líneas más delgadas que forman diamantes más pequeños. Nos referiremos a los diamantes formados por líneas más gruesas en la cuadrícula como diamantes de rejilla grande, y sus contrapartes más pequeñas como diamantes de rejilla pequeña. Cuando nos referimos a un solo lado de uno de estos diamantes grandes, usaremos la unidad de grilla grande o la línea de grilla grande. Utilizaremos una pequeña unidad de cuadrícula o una pequeña línea de cuadrícula para la medición de cuadrícula más pequeña.

Tenga en cuenta que, mientras trabaje con la cuadrícula isométrica, para colocar nodos con precisión en ella, deberá asegurarse de que el ajuste esté activo presionando el ícono del imán que se encuentra en la barra de herramientas superior del Affinity Designer.

2. Crea la sección del primer árbol

Como puede ver en la imagen de vista previa de nuestro árbol completo al comienzo de este tutorial, el área de la hoja estará compuesta por cuatro secciones distintas de verde. Comenzaremos dibujando la parte superior del árbol, que también es la más pequeña.

Use la herramienta Rectángulo (tecla de método abreviado M) para dibujar un rectángulo de aproximadamente el tamaño que ve en la imagen a continuación. Esto se puede hacer de forma bastante aproximada, ya que vamos a modificar el nodo de forma por nodo. Para permitirle modificar los nodos del rectángulo, seleccione el rectángulo y haga clic en el botón Convertir a Curva que verá en la barra de herramientas de contexto sobre su lienzo.

Asegúrese de que el rectángulo no tenga borde y configure el color de relleno en #2F5628.

Para poder pegar los códigos de color hexadecimales, necesitará tener el selector de color RGB Hex activo en el panel Color studio. Este panel debe estar abierto y en el lado derecho de la interfaz por defecto, pero si no puede abrirlo vaya a Vista > Estudio > Color. Haga clic en el pequeño menú desplegable en la parte superior derecha del panel Color, elija controles deslizantes, luego en la lista desplegable dentro del panel seleccione RGB Hex.

Tenga en cuenta que, mientras manipula formas, es posible que le resulte más fácil trabajar en la vista de esquema para que pueda ver más claramente sus nodos y rutas. Para activar esto, vaya a Vista > Modo vista > Dibujar Contorno. Para volver a la vista normal, elija Vector en el mismo menú.

Con la herramienta de nodo, (tecla de acceso directo A), seleccione uno de los dos nodos superiores del rectángulo. Este nodo se convertirá en el nodo superior de nuestra primera sección de árbol. Arrástrelo a un punto de intersección entre los grandes diamantes de cuadrícula a mitad de camino a través del lienzo, y tres y media diamantes de rejilla grande desde la parte superior del lienzo.

A continuación, seleccione el nodo opuesto al que acaba de mover: este se convertirá en el nodo inferior de la sección del árbol. Arrastre el nodo seleccionado para que esté directamente debajo del nodo superior verticalmente, pero dos diamantes de cuadrícula más grandes más bajos.

Ahora mire ese nodo inferior y siga la gran línea de la cuadrícula hacia arriba y hacia la izquierda con una gran unidad de cuadrícula. Mueva el nodo izquierdo a ese punto. Haga lo mismo en el lado derecho para el nodo derecho. Deberías terminar con la forma que se muestra a continuación. Presta atención a dónde caen los nodos en la cuadrícula y asegúrate de que tu forma se vea igual.

Y verifique que esté ubicado en relación con la esquina superior izquierda del documento como se ve aquí:

Ahora vamos a agregar un color de resaltado en el lado derecho de esta sección de árbol para que parezca que la luz está golpeándolo. Seleccione su forma existente y active el botón Insertar dentro de selección a la derecha de la barra de herramientas superior. Luego dibuje un rectángulo sin borde en un tamaño que cubra la mitad derecha de la sección del árbol y establezca el color de relleno en #386925. El rectángulo debe estar anidado dentro de la forma de la sección del árbol, como puede ver en el panel Capas de la imagen a continuación:

Para terminar esta sección de árbol vamos a agregar un poco de recorte de nieve en la parte inferior. Use la herramienta Pluma para dibujar una forma que sea una sola unidad de cuadrícula pequeña alta, y se extiende a lo largo del lado inferior izquierdo de la sección. Debe estar anidado dentro de la sección del árbol para que cualquier desbordamiento quede recortado. Llénalo con el color #A8BCA7.

Tenga en cuenta que estamos haciendo que este borde de nieve sea de color verde claro, no completamente blanco, por lo que no se fusiona con ningún fondo blanco en el que pueda colocarse.

Agregue algunos nodos adicionales a la línea superior de la forma del borde de nieve y arrástrelos hacia arriba o hacia abajo ligeramente para agregar algunas curvas de esa manera. Probablemente necesite deshabilitar el ajuste temporal mientras lo hace, haciendo clic en el ícono del imán en la barra de herramientas superior del Affinity Designer.

Ahora duplique esta forma de corte de nieve y gírela horizontalmente, lo que puede hacer haciendo clic en el botón Voltear horizontal de la barra de herramientas superior. Colóquelo en una posición espejada en el lado derecho de los tres. Luego, seleccione ambas formas y presione el botón Agregar en la barra de herramientas superior para combinarlas en una sola forma.

3. Crea las Secciones de Otro Árbol

La sección del árbol superior ahora está terminada para que podamos duplicarla y hacer algunos pequeños cambios para crear las otras tres secciones. Duplique la sección y muévala hacia abajo con una cuadrícula y media de diamantes grandes. Asegúrese de que esté detrás de la sección superior en el panel de capas.

Ahora manipularemos los nodos de esta segunda sección de árbol para que sea más grande que la primera sección. Primero, arrastre su nodo superior hacia arriba para que quede la mitad de una gran unidad de grilla debajo del nodo superior de la primera sección de árbol. A continuación, arrastre el nodo izquierdo hacia arriba y hacia la izquierda, a lo largo de la línea de la cuadrícula en la que ya está activado, hasta que llegue a la línea de cuadrícula grande que se intersecta más cercana. Haga lo mismo con el nodo derecho también.

Los bordes de la segunda sección del árbol deben ejecutarse en el mismo ángulo que la primera sección. Puede verificar que este sea el caso confirmando que la línea atraviesa un punto de intersección de cuadrícula cada dos diamantes de cuadrícula pequeña.

Verifique y asegúrese de que su rectángulo anidado de color más claro cubra por completo el lado derecho; de lo contrario, podría necesitar agrandarlo un poco. Ajuste el borde de la nieve para cubrir la parte inferior de la sección del segundo árbol arrastrando los nodos exteriores a los bordes de la forma y luego agregue más nodos a la forma para insertar curvas adicionales.

Repita el proceso dos veces más para crear las secciones de árbol tercero y cuarto. Cada vez que debe:

• Mueva la sección hacia abajo por una cuadrícula y media de diamantes grandes
• Arrastre el nodo superior hasta que sea un diamante de cuadrícula medio más grande que el nodo superior de la sección anterior
• Arrastre los nodos izquierdo y derecho a lo largo de sus líneas de cuadrícula hasta que llegue a la línea de cuadrícula grande que se intersecta más cercana
• Asegúrese de que el rectángulo de luz cubra todo el lado derecho de la sección del árbol
• Ajuste el borde de la nieve para cubrir la parte inferior de la sección del árbol en ambos lados

4. Crea el Tronco

La forma principal de la sección de la hoja de nuestro árbol ahora está lista para que podamos pasar a la creación del tronco. Con la herramienta Pluma, dibuje un rectángulo que tenga la mitad de una cuadrícula grande de diamante, aproximadamente una cuadrícula y media de diamantes grandes, centrado horizontalmente respecto del árbol y posicionado detrás de todas las otras formas existentes.

Agregue un nodo adicional en el borde más bajo que pueda usar para crear un fondo puntiagudo. Este nodo inferior debe colocarse un diamante de rejilla grande debajo del punto más bajo del árbol, y los dos bordes inferiores de la forma del tronco deben correr a lo largo de las líneas de la cuadrícula. Establezca el color de relleno del tronco en #322B1E. Finalmente, anidado dentro de la forma del tronco, cree un rectángulo para cubrir su mitad derecha con un color de relleno de #41351E.

Su resultado final debería verse así:

5. Agrega sombras

A continuación, vamos a crear sombras que se proyectan en cada sección de árbol, así como en el tronco, por la sección de árbol que se encuentra encima.

En el lado izquierdo del árbol, use la herramienta Pluma para dibujar tres rectángulos inclinados, uno debajo de cada una de las tres secciones superiores del árbol. Estos rectángulos deben ser dos pequeños diamantes de cuadrícula altos a lo largo de su longitud y rellenos con el color #203F1A. Duplica las formas, voltéalas horizontalmente y colócalas en posición de espejo en el lado derecho. Cambie el color de relleno de estas formas a # 12510E.

Esto debería darte sombras debajo de cada sección de árbol, así:

Utilizando el mismo enfoque, cree dos formas de rectángulo inclinadas en el tronco, cada una y media unidades de cuadrícula altas. La forma más a la izquierda debe tener el color #231D13 y la forma más a la derecha #302511.

Tenga en cuenta que originalmente determiné los colores que se verían bien como sombras aquí al configurar las formas con el mismo color de relleno que el lado del árbol en el que se encontraban y luego establecerlas en el modo de fusión Multiplicar. Sin embargo, como se mencionó anteriormente, no podemos usar Multiplicar en una imagen SVG. Para evitar esto utilicé el selector de color para probar el color que parecían ser las sombras. Luego cambié el color de relleno de las formas de las sombras a este color muestreado, y establecí el modo de fusión nuevamente en Normal, logrando el mismo aspecto al final pero de una manera amigable para SVG.

Ahora para la sombra proyectada en el suelo junto al árbol. Debajo de todas las otras formas, crea un diamante del mismo ancho que la sección inferior del árbol. Sus bordes deben seguir todos a lo largo de las líneas de la cuadrícula, y debe estar centrado tanto horizontal como verticalmente en relación con el tronco. Haga que su color sea negro y ajústelo al 20% de opacidad. De nuevo, aunque no podemos usar Multiply para crear sombras en nuestra ilustración SVG, podemos usar la opacidad de manera segura.

6. Globo decorativo

Nuestra forma general de árbol ya está terminada y estamos listos para decorarla. Para hacer eso vamos a crear una forma de globo que podamos redimensionar para usarla en la parte superior de la decoración del árbol y para decoraciones más pequeñas alrededor del árbol. Inicialmente lo crearemos en doble tamaño, por lo que será más fácil usar la cuadrícula para alinear todas las formas que conformarán el globo.

Preste mucha atención a dónde caen los nodos en la cuadrícula a medida que crea las siguientes formas.

En primer lugar, cree una forma de diamante de un cuarto del tamaño de un diamante de rejilla grande, con el color de relleno #FFEF00. Esto formará la parte superior plana del globo.

Agregue estas dos formas para crear la curva debajo de la parte superior del globo: el color de la forma izquierda es #F1C906 y el color de la forma correcta es #FFE300.

Cree los lados del globo con estas formas: el lado izquierdo tiene el color #E9BE1F y el lado derecho es de color #FFDB1F.

Agregue las curvas inferiores con estas dos formas, coloreadas #DCAF2E a la izquierda y #ECCA3C a la derecha.

Finalmente, use la herramienta Pluma para dibujar una forma única que coincida con la forma de todo el globo. Dale el color de relleno #FFDB1F y luego ponlo detrás de todas las otras formas. Esto asegura que no verá ningún color de fondo que se muestre en espacios pequeños entre las formas que componen el globo.

7. Decoración de árbol superior

Ahora que su globo terráqueo está terminado, puede redimensionarlo y colocarlo en la parte superior de su árbol. Seleccione todas las formas y agrúpelas para cambiar el tamaño fácilmente. Puede hacer un duplicado de este grupo antes de cambiar el tamaño si desea mantenerlo como copia de seguridad.

Queremos reducir el globo a la mitad del tamaño, de modo que seleccione el grupo que acaba de crear y ubique el panel Transformar en el lado derecho de la interfaz de Affinity Designer. Si aún no está abierto, vaya a Vista > Estudio > Transformar. En el campo W (ancho) del panel Transformar, escriba /2 al final del valor actual y luego presione ENTER. Esto reducirá a la mitad el ancho actual.

Haga lo mismo en el campo H (altura) para reducir a la mitad la altura.

Tu globo de tamaño medio está listo para usar, así que céntralo en la parte superior del árbol.

8. Decoraciones más pequeñas del globo

Duplique la decoración que acaba de colocar en la parte superior del árbol y reduzca a la mitad su tamaño utilizando el mismo método de agregar /2 al final de los campos H y W del panel Transformar. Ahora tenemos un globo amarillo más pequeño que podemos colocar en el cuerpo principal de nuestro árbol, y todo lo que necesitamos son algunos colores adicionales para que nuestras decoraciones sean más animadas. Haz tres duplicados adicionales del globo más pequeño para que podamos convertirlos en versiones azules, moradas y rojas.

Cambia los colores de tres nuevos globos para que obtengas lo siguiente:

El globo azul usa estos colores:

• Arriba: #23BEDA
• Curva superior izquierda: #0099B4
• Curva superior derecha: #22AED3
• Lado izquierdo: #18809C
• Lado derecho: #1E98B0
• Curva inferior izquierda: #1A6883
• Curva inferior derecha: #0D8197
• Respaldo: #18809C

El globo púrpura usa estos colores:

• Arriba: #9B23DA
• Curva superior izquierda: #7100B4
• Curva superior derecha: #8B22D3
• Lado izquierdo: #52189C
• Lado derecho: #721EB0
• Curva inferior izquierda: #401A83
• Curva inferior derecha: #670D97
• Respaldo: #33189C

El globo rojo usa estos colores:

• Superior: #DA3623
• Curva superior izquierda: #B4001B
• Curva superior derecha: #D33522
• Lado izquierdo: #9C1B18
• Lado derecho: #B01E1F
• Curva inferior izquierda: #831C1A
• Curva inferior derecha: #97250D
• Respaldo: #9C1B18

Con estos globos más pequeños ahora hechos, puedes colocarlos alrededor de tu árbol para decorarlos así:

9. Pequeñas decoraciones cuadradas

Ahora vamos a agregar algunas decoraciones más pequeñas para traer más detalles. Utilice la herramienta Pluma para dibujar esta forma con el color de relleno #FFDB1F:

Tenga en cuenta que sus bordes siguen el mismo ángulo que los bordes exteriores de las secciones del árbol.

Como hicimos con nuestro globo terráqueo, esta forma se dibuja en doble tamaño, lo que hace que sea más fácil colocar nodos en la cuadrícula. Utilice el panel Transformar para reducir a la mitad su tamaño como lo hicimos anteriormente agregando /2 al final de los campos H y W. Los bordes superior e inferior de la forma ahora deben ser una pequeña unidad de rejilla larga.

Haga tres duplicados de la forma y coloreéelos #1E98B0 para azul, #721EB0 para púrpura y #831C1A para rojo. Duplica las cuatro formas y voltéalas horizontalmente. Ahora deberías tener ocho formas en total.

Toma estas formas y espárcelas alrededor de tu árbol. Usa formas cuyos ángulos coincidan con el borde exterior del lado del árbol donde los colocas.

¡Y eso es! Nuestra imagen de árbol de Navidad está hecha.

10. Exportar como SVG

Ahora que nuestro diseño está terminado, lo vamos a preparar para su uso en la Web como SVG.

Primero, tenemos que cambiar el documento a las mismas dimensiones que nuestro árbol para que el parámetro viewbox de nuestro SVG se configure con el tamaño correcto. Si exportamos ahora mismo, viewbox se establecerá en 1024x1024, lo que significa que en cualquier lugar que use el SVG del árbol de Navidad, tendrá grandes espacios, tanto de tamaño como lo hace nuestro documento ahora.

Asegúrese de no tener nada en el lienzo seleccionado, luego mire la barra de herramientas de contexto en la parte superior de la interfaz de Affinity Designer y debería ver el botón Configurar documento. Haga clic en él y aparecerá un cuadro donde puede cambiar las dimensiones de su documento. Establezca 280 px para el ancho y 568 px para la altura. Siempre que haya colocado sus formas cuidadosamente estas dimensiones del documento deberían funcionar para usted. Asegúrese de seleccionar Anclar a la página y no Reescalar, luego presione OK.

Inmediatamente después de volver a escalar su árbol, probablemente no estará centrado. Para solucionarlo, seleccione todo en el documento con CTRL + A, agrúpelo con CTRL + G, seleccione ese grupo y luego arrástrelo a una posición centrada.

Ahora vaya a Archivo > Exportar y en el cuadro que aparece seleccione la pestaña SVG. Asegúrese de que esté seleccionado el SVG preestablecido (para web).

También asegúrese de ver el mensaje (Nada se rasterizará). Si, en cambio, el mensaje te dice que algo se rasterizará, revisa tu trabajo y asegúrate de no haber configurado accidentalmente ninguna forma en un modo de fusión que no sea Normal.

Cuando esté listo, haga clic en Exportar y guarde su SVG.

11. Usando tu SVG

Ahora que tiene listo su archivo SVG, veamos un par de maneras en que puede usarlo.

La forma más fácil es simplemente cargarlo en su HTML como lo haría con cualquier otra imagen, con un código como este:

1

<img width="500" src="xmastree.svg" alt="Christmas Tree">

Sin embargo, la belleza de SVG es que también puede tomar los contenidos del archivo SVG y pegarlo directamente en su HTML para usar la imagen en línea.

Para hacerlo, abra su archivo SVG en un editor de texto y copie todo desde <svg... hasta el final del archivo. Pegue Pegue ese código en cualquier lugar de la sección del cuerpo de un documento HTML y la imagen aparecerá allí. Tenga en cuenta que también puede desear envolver el SVG con un div que pueda modificar para controlar el tamaño y la posición de la imagen.

Para ver este enfoque en acción, consulte este ejemplo en CodePen:

Terminando

¡Así es como puedes hacer una ilustración SVG usando Affinity Designer! El proceso no es muy diferente de cualquier otro tipo de diseño realizado en Affinity Designer, con las salvedades que debe tener en cuenta para modos de fusión no predeterminados y formas demasiado complejas. La necesidad de colores planos y la preferencia por formas simples hace que las ilustraciones isométricas sean especialmente adecuadas para SVG.

Para obtener más información sobre el uso de Affinity Designer, consulte nuestros tutoriales y cursos y, mientras lo hace, consulte también nuestros tutoriales y cursos de SVG.

Enlaces relacionados:

• Affinity Designer