Share
Lo que vas a crearEn este tutorial vamos a entrar en la alegría de la temporada mediante la creación de una ilustración del árbol de Navidad SVG que puede utilizar en cualquier sitio web. Vamos a crear la ilustración en Affinity Designer y luego aprovecharemos la funcionalidad de exportación SVG específica para la web..
Nota: los pasos a continuación suponen que tiene un nivel básico de familiaridad con Affinity Designer. Si no es así, puede comenzar a rodar la pelota con nuestro curso Inicio rápido de Affinity Designer.
Crear gráficos SVG en Affinity Designer es un asunto bastante sencillo, con solo un par de "errores" para evitar. Una en particular es asegurarse de que no utilice modos de fusión distintos de "Normal" en cualquier parte del documento. Si lo hace, su imagen se rasterizará parcialmente, anulando todo el propósito de los gráficos SVG (la "S" significa "escalable"). Dicho esto, aunque 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 simples posible para minimizar el tamaño del archivo. Por ejemplo, el uso de tipos de trazos sofisticados o texturas conducirá a un tamaño de archivo enorme. Mantendremos nuestras técnicas de ilustración básicas a lo largo de este tutorial para que sea lo más compatible con SVG que podamos.
Vamos a empezar!
Crea un nuevo documento y selecciona Web desde el Tipo desplegable en el cuadro de diálogo de creación de documentos. Establecer tanto el Ancho de página y Altura de página ser 1024px.
A continuación, sigamos adelante y configuremos nuestra cuadrícula isométrica. En el menú a lo largo de la parte superior de Affinity Designer vaya a Ver> Grid y Axis Manager y verás aparecer un cuadro de configuración de cuadrícula. Cambie estos ajustes:
Accentsconagua
64px 8 
Cuadrícula isométrica en Affinity DesignerA 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 una terminología para describir nuestra cuadrícula, de modo que cuando especifique el tamaño que debe tener una forma, o la distancia que un nodo tiene para moverse en la cuadrícula, sabrá de qué estoy hablando..
Cuando miras la cuadrícula, verás que tiene varias líneas más gruesas que forman diamantes grandes, y dentro de esos diamantes hay líneas más finas 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 pequeños diamantes de rejilla. Al referirnos a un solo lado de uno de estos diamantes grandes, usaremos el fraseo unidad de rejilla grande o gran línea de cuadrícula. Nosotros usaremos unidad de rejilla pequeña o pequeña línea de cuadrícula para la medida de rejilla más pequeña.
Tenga en cuenta que mientras trabaja con la cuadrícula isométrica, para colocar nodos en ella con precisión, deberá asegurarse de que el ajuste está activo presionando el icono del imán que se encuentra en la barra de herramientas superior de Affinity Designer.
Como puede ver en la imagen de vista previa de nuestro árbol completado al comienzo de este tutorial, el área de la hoja estará compuesta por cuatro secciones distintas de color verde. Comenzaremos dibujando la sección más alta del árbol, que también es la más pequeña..
Utilizar el Herramienta rectangular, (tecla de acceso directo METRO), para dibujar un rectángulo de aproximadamente el tamaño que se ve en la imagen de abajo. Esto se puede hacer aproximadamente, ya que vamos a modificar la forma nodo por nodo. Para permitirle modificar los nodos del rectángulo, seleccione el rectángulo y haga clic en el Convertir a Curva botón que verá en la barra de herramientas de contexto sobre su lienzo.
Asegúrese de que el rectángulo no tenga borde y establezca el color de relleno # 2F5628.
Para poder pegar códigos de color hexadecimales, necesitará tener el RGB Hex selector de color activo en el Color panel de estudio Este panel debe estar abierto y en el lado derecho de la interfaz por defecto, pero si no puede abrirlo, vaya a Ver> Estudio> Color. Haga clic en el pequeño menú desplegable en la parte superior derecha de la Color panel, elegir deslizadores, Luego, en la lista desplegable dentro del panel, seleccione RGB Hex.
Tenga en cuenta que mientras manipula formas, puede que le resulte más fácil trabajar en la vista de esquema, de modo que pueda ver más claramente sus nodos y rutas. Para activar esto vaya a Ver> Modo de vista> Esquema. Para volver a la vista regular elija Vector bajo el mismo menu.
Con la herramienta de nodo, (tecla de acceso directo UNA), 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 diamantes de rejilla grandes aproximadamente a la mitad del lienzo, y tres diamantes de rejilla grandes y medio desde la parte superior del lienzo.
A continuación, seleccione el nodo opuesto al que acaba de mover: 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 rejilla grandes más abajo.
Ahora mire el nodo inferior y siga la línea de cuadrícula grande que está arriba y a la izquierda por una unidad de cuadrícula grande. Mueve 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 abajo. Preste atención a dónde caen los nodos en la cuadrícula y asegúrese de que su forma se vea igual.
Y verifique que esté posicionado 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 del árbol para que parezca que la luz lo está golpeando. Seleccione su forma existente y active la Insertar dentro de la selección. Botó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 # 386925. El rectángulo debe estar anidado dentro de la forma de la sección del árbol, como se puede ver en la Capas Panel de la imagen de abajo:
Para terminar esta sección de árbol vamos a agregar un poco de recorte de nieve en la parte inferior. Use la herramienta Lápiz para dibujar una forma que sea una unidad de cuadrícula pequeña y alta, y que se extienda por el lado inferior izquierdo de la sección. Debería estar anidado dentro de la sección del árbol para que cualquier desbordamiento se recorte. Rellénalo con el color. # A8BCA7.
Tenga en cuenta que estamos haciendo que el borde de la nieve sea verde claro, no completamente blanco, por lo que no se combina con ningún fondo blanco en el que se pueda colocar.
Agregue algunos nodos adicionales a la línea superior de la forma de recorte de nieve y arrástrelos hacia arriba o hacia abajo para agregar algunas curvas como esta. Probablemente deba deshabilitar el ajuste temporalmente mientras hace esto, haciendo clic en el icono del imán en la barra de herramientas superior de Affinity Designer.
Ahora duplique esta forma de recorte de nieve y gírela horizontalmente, lo que puede hacer haciendo clic en el botón Flip horizontal Botón en la barra de herramientas superior. Colóquelo en una posición de espejo en el lado derecho de los tres. Luego selecciona ambas formas y pulsa el botón Añadir Botón en la barra de herramientas superior para combinarlos en una sola forma..
La sección superior del árbol ya está terminada, por lo que podemos duplicarla y hacer algunos pequeños cambios para crear las otras tres secciones. Duplica la sección y muévela hacia abajo con uno y medio de diamantes de cuadrícula grandes. Asegúrate 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 hacerla más grande que la primera sección. Primero, arrastre su nodo superior hacia arriba para que sea la mitad de una unidad de cuadrícula grande debajo del nodo superior de la primera sección de árbol. Luego arrastre el nodo izquierdo hacia arriba y hacia la izquierda, a lo largo de la línea de cuadrícula en la que ya está, hasta que llegue a la línea de cuadrícula grande más cercana que se interseca. Haz lo mismo para el nodo correcto también.
Mostrando la segunda sección del árbol en el modo de vista "Esquema"Los bordes de la segunda sección del árbol deben correr en el mismo ángulo que la primera sección. Puede verificar que este sea el caso confirmando que la línea pasa por un punto de intersección de la cuadrícula cada dos pequeños diamantes de cuadrícula.
Puntos de intersección de cuadrículaCompruebe y asegúrese de que su rectángulo anidado de color más claro aún cubra completamente el lado derecho; de lo contrario, es posible que necesite agrandarlo un poco. Ajuste el borde de nieve para cubrir la parte inferior de la segunda sección del árbol arrastrando los nodos más externos hacia los bordes de la forma, luego agregue algunos nodos más a la forma para insertar curvas adicionales.
Repita el proceso dos veces más para crear las secciones de árbol tercera y cuarta. Cada vez que usted debe:
La forma principal de la sección de hojas de nuestro árbol ahora está hecha para que podamos avanzar en la creación del tronco. Con la herramienta de la pluma, dibuje un rectángulo que tenga la mitad de una gran cuadrícula de diamante de ancho, alrededor de un diamante y medio de cuadrícula grande de alto, centrado horizontalmente con respecto al árbol, y colocado detrás de todas las otras formas existentes.
Agregue un nodo adicional en el borde inferior que puede 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. Establecer el color de relleno del maletero a # 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 debe verse así:
A continuación vamos a crear sombras que se proyectan en cada sección del árbol, así como en el tronco, por la sección del árbol que está arriba..
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 de árbol superiores. Estos rectángulos deben ser dos pequeños diamantes de rejilla altos a lo largo de su longitud y rellenos con el color # 203F1A. Duplique las formas, gírelas horizontalmente y colóquelas en una posición de espejo en el lado derecho. Cambia el color de relleno de estas formas para # 12510E.
Esto debería darte sombras debajo de cada sección de árbol de la siguiente manera:
Utilizando el mismo enfoque, cree dos formas de rectángulo inclinado en el tronco, cada una de las unidades de una cuadrícula pequeña y media. La forma más izquierda debe ser coloreada. # 231D13 y la forma mas correcta # 302511.
Nota: originalmente determiné los colores que se verían como sombras al configurar las formas con el mismo color de relleno que el lado del árbol en el que estaban, y luego configurarlas en modo de fusión Multiplicar. Sin embargo, como se mencionó anteriormente, no podemos usar Multiplicar en una imagen SVG. Para solucionar 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 sombra a este color muestreado y configuré el modo de fusión de nuevo en Normal, logrando el mismo aspecto al final, pero de una manera amigable para SVG.
Ahora para la sombra arrojada en el suelo por el árbol. Debajo de todas las otras formas, crea un diamante del mismo ancho que la parte inferior de la sección de árbol. Sus bordes deben seguir todos a lo largo de las líneas de la cuadrícula, y deben estar centrados horizontal y verticalmente en relación con el tronco. Haz su color negro y ponlo a 20% opacidad. De nuevo, mientras no podamos usar Multiplicar Para crear sombras en nuestra ilustración SVG, podemos usar la opacidad de forma segura..
Nuestra forma general de árbol ya está terminada y estamos listos para decorarla. Para hacer eso, vamos a crear una forma de globo que podemos 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 tamaño doble para que sea más fácil usar la cuadrícula para alinear todas las formas que conformarán el globo..
Preste mucha atención a donde los nodos caen en la cuadrícula al crear las siguientes formas.
Primero, 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..
Agrega 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.
Crea los lados del globo con estas formas: el lado izquierdo está coloreado # E9BE1F y el lado derecho esta coloreado. # FFDB1F.
Añade las curvas inferiores con estas dos formas, coloreadas. # DCAF2E a la izquierda y # ECCA3C a la derecha.
Finalmente, use la herramienta de lápiz para dibujar una forma única que coincida con la forma de todo el globo. Dale el color de relleno # FFDB1F luego póngalo detrás de todas las otras formas. Esto garantiza que no verá ningún color de fondo que se muestre en espacios pequeños entre las formas que forman el globo..
Ahora que tu globo está terminado, puedes redimensionarlo listo para colocarlo encima de tu á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 una copia de seguridad..
Queremos reducir el globo a la mitad del tamaño, así que seleccione el grupo que acaba de crear y localice el Transformar Panel en el lado derecho de la interfaz de Affinity Designer. Si aún no está abierto ve a Ver> Estudio> Transformar. En el panel Transformar. W tipo de campo (ancho) / 2 al final del valor actual, presione ENTRAR. Esto reducirá a la mitad el ancho actual.
Haz lo mismo en el H campo (altura) para reducir a la mitad la altura.
Su globo de tamaño medio está listo para usar, así que céntrelo en la parte superior del árbol, de manera que.
Duplique la decoración que acaba de colocar en la parte superior del árbol y reduzca su tamaño de nuevo a la mitad utilizando el mismo método de adición. / 2 hasta el final de la Transformar panel de H y W campos. Ahora tenemos un globo amarillo más pequeño que podemos poner en el cuerpo principal de nuestro árbol, y todo lo que necesitamos son algunos colores adicionales para hacer que nuestras decoraciones sean más vivas. Haz tres duplicados adicionales del globo más pequeño para que podamos convertirlos en versiones azul, púrpura y roja.
Cambia los colores de tres nuevos globos para que obtengas lo siguiente:
El globo azul usa estos colores:
# 23BEDA # 0099B4 # 22AED3 # 18809C # 1E98B0 # 1A6883 # 0D8197 # 18809C El globo morado usa estos colores:
# 9B23DA # 7100B4 # 8B22D3 # 52189C # 721EB0 # 401A83 # 670D97 # 33189C El globo rojo usa estos colores:
# DA3623 # B4001B # D33522 # 9C1B18 # B01E1F # 9C1B18 Con estos globos más pequeños ya hechos, puedes colocarlos alrededor de tu árbol para decorar así:
Ahora vamos a agregar algunas decoraciones finales más pequeñas para traer algunos detalles adicionales. Usa 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, esta forma realmente se dibuja en tamaño doble, lo que nuevamente facilita la colocación de nodos en la cuadrícula. Utilizar el Transformar Panel para reducir a la mitad su tamaño como lo hicimos anteriormente, añadiendo / 2 hasta el final de la H y W campos. Los bordes superior e inferior de la forma ahora deben tener una unidad de rejilla pequeña..
Haz tres duplicados de la forma y coloréalos. # 1E98B0 para azul, # 721EB0 para morado y # 831C1A para el rojo Duplica las cuatro formas y voltéalas horizontalmente. Ahora deberías tener ocho formas en total..
Toma estas formas y dispersa alrededor de tu árbol. Use formas cuyos ángulos coincidan con el borde exterior del lado del árbol donde los coloca..
¡Y eso es! Nuestra imagen del árbol de Navidad está hecha..
Ahora que nuestro diseño está terminado, lo vamos a tener listo para su uso en la web como SVG.
En primer lugar, debemos cambiar el documento a las mismas dimensiones que nuestro árbol para que nuestros SVG cuadro de vista El parámetro se ajustará al tamaño correcto. Si exportamos ahora mismo el cuadro de vista se establecería en 1024x1024, lo que significa que en cualquier lugar donde use el árbol de Navidad SVG tendría grandes huecos en cualquier tamaño, al igual que 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 Configuración de documentos botón. Haga clic en él y aparecerá un cuadro donde podrá cambiar las dimensiones de su documento. Conjunto 280px por el ancho y 568px por la altura. Mientras haya colocado sus formas cuidadosamente, estas dimensiones del documento deberían funcionar para usted. Asegúrate de tener Ancla a la pagina seleccionado y no Rescale, entonces presione DE ACUERDO.
Inmediatamente después de volver a escalar su árbol probablemente no estará centrado. Para solucionar esto, seleccione todo en el documento con CTRL + A, agruparlo con CTRL + G, seleccione ese grupo, luego arrástrelo a una posición centrada.
Ahora ve a Archivo> Exportar y en el cuadro que aparece, seleccione el SVG lengüeta. Asegúrese de que el preajuste SVG (para web) esta seleccionado.
También asegúrate de ver el mensaje. (Nada será rasterizado). Si por el contrario el mensaje te dice algo será se rasteriza, revisa tu trabajo y asegúrate de que no hayas configurado accidentalmente ninguna forma en un modo de fusión que no sea Normal.
Cuando estés listo, haz clic Exportar y salva tu SVG.
Ahora que tiene listo su archivo SVG, veamos un par de maneras en que puede usarlo.
La forma más sencilla es simplemente cargarlo en su HTML como lo haría con cualquier otra imagen, con un código como este:
Sin embargo, la belleza de SVG es que también puede tomar el contenido del archivo SVG y pegarlo directamente en su HTML para usar la imagen en línea..
Para hacer esto, abra su archivo SVG en un editor de texto y copie todo a partir de div Puedes diseñar para controlar el tamaño y la posición de la imagen..
Para ver este enfoque en acción, vea este ejemplo en CodePen:
¡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 advertencias de que solo hay que tener cuidado con los modos de fusión no predeterminados y las formas excesivamente complejas. La necesidad de colores planos y la preferencia por formas simples hace que las ilustraciones isométricas sean particularmente adecuadas para SVG.
Para obtener más información sobre el uso de Affinity Designer, consulte nuestros tutoriales y cursos..
