Share
Ce que vous allez créerDans ce didacticiel, nous allons nous réjouir de la saison en créant une illustration d'arbre de Noël SVG que vous pourrez utiliser sur n'importe quel site Web. Nous allons créer l'illustration dans Affinity Designer, puis tirer parti des fonctionnalités d'exportation SVG du programme spécifiques au Web..
Remarque: les étapes ci-dessous supposent que vous connaissez bien Affinity Designer. Sinon, vous pouvez commencer avec notre cours Affinity Designer Quick Start.
La création de graphiques SVG dans Affinity Designer est une affaire assez simple, avec juste quelques «pièges» à éviter. L'une d'entre elles consiste à vous assurer que vous n'utilisez aucun autre mode de fusion que le mode «Normal» dans votre document. Si vous le faites, votre image sera partiellement pixellisée, ce qui ira à l'encontre de l'objectif graphique SVG (le «S» signifie «Scalable»). Cela dit, même si vous ne pouvez pas utiliser différents modes de fusion, vous pouvez utiliser différents paramètres d'opacité..
Une autre chose à prendre en compte est d'essayer de garder vos formes aussi simples que possible afin de réduire la taille du fichier. Par exemple, l’utilisation de types de traits fantaisistes ou de textures conduit à une taille de fichier énorme. Tout au long de ce tutoriel, nous allons garder nos techniques d’illustration de base afin de nous familiariser le plus possible avec SVG..
Commençons!
Créez un nouveau document et sélectionnez Web du Type liste déroulante dans la boîte de dialogue de création de document. Définir les deux Largeur de page et Hauteur de la page être 1024px.
Ensuite, allons de l'avant et établissons notre grille isométrique. Dans le menu situé en haut de Affinity Designer, allez à Vue> Gestionnaire de grille et d'axes et vous verrez une boîte de paramètres de grille apparaître. Modifiez ces paramètres:
Accentsconagua
64px 8 
Grille isométrique dans le concepteur d'affinitéTout au long de ce tutoriel, nous allons placer des nœuds de chemin sur la grille isométrique afin de créer et d’ajuster les formes qui formeront notre arbre de Noël. En tant que tel, nous définirons une terminologie décrivant notre grille. Ainsi, lorsque je spécifie la taille d’une forme ou la distance qu’un nœud doit parcourir sur la grille, vous saurez de quoi je parle..
Lorsque vous regardez la grille, vous remarquerez qu’elle comporte plusieurs lignes plus épaisses qui forment de gros diamants, et à l'intérieur de ces diamants, se trouvent des lignes plus minces qui forment des diamants plus petits. Nous nous référerons aux diamants formés par des lignes plus épaisses sur la grille comme diamants grande grille, et leurs homologues plus petits que diamants de petite grille. Quand on parle d'un seul côté de l'un de ces gros diamants, on utilisera le phrasé grande unité de grille ou grande ligne de grille. Nous allons utiliser petite unité de grille ou petite ligne de grille pour la plus petite mesure de grille.
Notez que lorsque vous utilisez la grille isométrique, vous devez vous assurer que la capture est active en plaçant avec précision les nœuds dessus en appuyant sur l'icône de l'aimant située dans la barre d'outils supérieure d'Affinity Designer..
Comme vous pouvez le voir dans l'aperçu de notre arborescence terminée au début de ce didacticiel, la zone des feuilles comprendra quatre sections de vert distinctes. Nous commencerons par dessiner la partie la plus haute de l’arbre, qui est aussi la plus petite..
Utilisez le Outil Rectangle, (touche de raccourci M), pour dessiner un rectangle de la taille de l’image ci-dessous. Cela peut être fait assez grossièrement car nous allons modifier la forme noeud par noeud. Pour vous permettre de modifier les nœuds du rectangle, sélectionnez le rectangle et cliquez sur le bouton. Convertir en courbe bouton que vous verrez sur la barre d'outils contextuelle au-dessus de votre toile.
Assurez-vous que le rectangle n’a pas de bordure et définissez la couleur de remplissage sur # 2F5628.
Pour pouvoir coller des codes de couleur hexagonaux, vous devez disposer du Hex RVB sélecteur de couleur actif dans le Couleur panneau de studio. Ce panneau devrait être ouvert et du côté droit de l'interface par défaut, mais sinon vous pouvez l'ouvrir en allant à Vue> Studio> Couleur. Cliquez sur le petit menu déroulant en haut à droite de la Couleur panneau, choisissez curseurs, puis dans la liste déroulante à l'intérieur du panneau sélectionnez Hex RVB.
Notez que lorsque vous manipulez des formes, il peut être plus facile de travailler en mode Plan afin de voir plus clairement vos nœuds et vos chemins. Pour l'activer, allez à Affichage> Mode d'affichage> Contour. Pour revenir à la vue normale, choisissez Vecteur sous le même menu.
Avec l’outil noeud, (touche de raccourci UNE), sélectionnez l’un des deux nœuds supérieurs du rectangle. Ce nœud va devenir le nœud supérieur de notre première section d’arbre. Faites-le glisser jusqu'à un point d'intersection entre les gros diamants de la grille, situés à peu près à mi-chemin de la toile, et trois gros diamants de la grille et demi du haut de la toile.
Ensuite, sélectionnez le nœud opposé à celui que vous venez de déplacer. Ce nœud deviendra le nœud inférieur de la section arborescente. Faites glisser le nœud sélectionné de sorte qu'il se trouve directement sous le nœud supérieur verticalement, mais que deux gros diamants de la grille soient inférieurs.
Maintenant, regardez ce nœud du bas et suivez la grande ligne de la grille qui est en haut et à gauche par une grande unité de la grille. Déplacez le noeud gauche à ce point. Faites la même chose du bon côté pour le bon noeud. Vous devriez vous retrouver avec la forme illustrée ci-dessous. Faites attention à l'endroit où les nœuds tombent sur la grille et assurez-vous que votre forme a la même apparence.
Et vérifiez qu'il est positionné par rapport au coin supérieur gauche du document, comme indiqué ici:
Nous allons maintenant ajouter une couleur de surbrillance à droite de cette section de l’arbre pour lui donner l’impression que la lumière le frappe. Sélectionnez votre forme existante et activez le Insérer dans la sélection bouton situé à droite de la barre d’outils supérieure. Ensuite, tracez un rectangle sans bordure d’une taille qui couvre la moitié droite de la section de l’arbre et réglez la couleur de remplissage sur # 386925. Le rectangle doit être imbriqué dans la forme de la section de l’arbre, comme vous pouvez le voir dans Couches panneau de l'image ci-dessous:
Pour finir cette section d’arbre, nous allons ajouter un peu d’élimination de neige au fond. Utilisez l'outil Plume pour dessiner une forme qui est une petite unité de grille élevée et qui s'étend le long du côté inférieur gauche de la section. Il doit être imbriqué dans la section de l'arborescence pour éviter tout débordement. Remplissez-le avec la couleur # A8BCA7.
Notez que nous fabriquons cette neige en vert clair et non en blanc, elle ne se fond donc pas avec le fond blanc sur lequel elle pourrait être placée..
Ajoutez quelques noeuds supplémentaires à la ligne supérieure de la forme enneigée et faites-les glisser légèrement vers le haut ou le bas pour ajouter des courbes. Pour ce faire, vous devrez probablement désactiver la capture temporairement en cliquant sur l'icône de l'aimant dans la barre d'outils supérieure d'Affinity Designer..
À présent, dupliquez cette forme de moulure à neige et retournez-la horizontalement, ce que vous pouvez faire en cliquant sur le bouton Retourner horizontalement bouton sur la barre d'outils supérieure. Placez-le dans une position en miroir sur le côté droit des trois. Ensuite, sélectionnez les deux formes et appuyez sur le bouton Ajouter bouton de la barre d’outils supérieure pour les combiner en une seule forme.
La partie supérieure de l'arborescence est maintenant terminée. Nous pouvons donc la dupliquer et apporter de petites modifications pour créer les trois autres sections. Dupliquez la section et déplacez-la d'un demi-diamant en quadrillage. Assurez-vous qu'il se trouve derrière la section supérieure du panneau des calques..
Nous allons maintenant manipuler les nœuds de cette deuxième section arborescente pour la rendre plus grande que la première section. Tout d’abord, faites glisser son nœud supérieur vers le haut afin qu’il forme une demi-grande unité de grille sous le nœud supérieur de la première section de l’arbre. Ensuite, faites glisser le nœud gauche vers le haut et vers la gauche, le long de la ligne de la grille sur laquelle il est déjà allumé, jusqu'à ce que vous atteigniez la grande ligne de la grille qui se croise la plus proche. Faites la même chose pour le bon noeud également.
Affichage de la deuxième section de l'arborescence en mode d'affichage "Contour"Les bords de la deuxième section de l’arbre doivent former le même angle que la première section. Vous pouvez vérifier que c'est bien le cas en confirmant que la ligne passe par un point d'intersection de la grille tous les deux petits losanges de la grille..
Points d'intersection de la grilleVérifiez et assurez-vous que votre rectangle imbriqué de couleur plus claire recouvre encore complètement le côté droit - sinon, vous devrez peut-être l'élargir un peu. Ajustez la neige pour couvrir le bas de la deuxième section en faisant glisser les nœuds les plus extérieurs vers les bords de la forme, puis en ajoutant des nœuds supplémentaires à la forme pour insérer des courbes supplémentaires..
Répétez l'opération deux fois plus pour créer les troisième et quatrième sections d'arborescence. Chaque fois que vous devriez:
La forme principale de la section des feuilles de notre arbre est maintenant terminée, nous pouvons donc commencer à créer le tronc. A l'aide de l'outil Plume, tracez un rectangle d'un demi-losange large, d'une hauteur d'un demi et demi, centré horizontalement par rapport à l'arbre et positionné derrière toutes les autres formes existantes..
Ajoutez un nœud supplémentaire sur le bord le plus bas que vous pouvez utiliser pour créer un bas pointu. Ce nœud inférieur doit être placé dans un grand losange en-dessous du point le plus bas de l’arbre, et les deux bords inférieurs de la forme du tronc doivent s’aligner le long des lignes de la grille. Définissez la couleur de remplissage du coffre sur # 322B1E. Enfin, imbriqué dans la forme du tronc, créez un rectangle recouvrant sa moitié droite avec une couleur de remplissage de # 41351E.
Votre résultat final devrait ressembler à ceci:
Ensuite, nous allons créer des ombres qui sont projetées sur chaque section de l'arbre, ainsi que sur le tronc, par la section de l'arbre située au-dessus de celle-ci..
Sur le côté gauche de l’arbre, utilisez l’outil Plume pour dessiner trois rectangles inclinés, un en dessous de chacune des trois sections supérieures de l’arbre. Ces rectangles doivent être deux petits losanges quadrillés hauts sur leur longueur et remplis de la couleur # 203F1A. Dupliquez les formes, retournez-les horizontalement et placez-les dans une position de miroir sur le côté droit. Changez la couleur de remplissage de ces formes en # 12510E.
Cela devrait vous donner des ombres sous chaque section de l’arbre comme ceci:
En utilisant la même approche, créez deux formes de rectangle incliné sur le tronc, chacune d’une hauteur et demie. La forme la plus à gauche doit être colorée # 231D13 et la forme la plus à droite # 302511.
Remarque J'ai initialement déterminé les couleurs qui ressembleraient à des ombres en définissant les formes sur la même couleur de remplissage que le côté de l'arbre sur lequel elles étaient placées, puis en les plaçant en mode Fusion. Multiplier. Cependant, comme mentionné précédemment, nous ne pouvons pas utiliser Multiplier dans une image SVG. Pour résoudre ce problème, j'ai utilisé le sélecteur de couleur pour échantillonner la couleur que les ombres semblaient être. J'ai ensuite changé la couleur de remplissage des formes d'ombre en cette couleur échantillonnée, puis j'ai redéfini le mode de fusion sur Ordinaire, atteindre le même aspect à la fin mais de manière conviviale avec SVG.
Maintenant pour l'ombre portée sur le sol par l'arbre. Sous toutes les autres formes, créez un diamant de la même largeur que la section d'arbre la plus inférieure. Ses bords doivent tous suivre les lignes de la grille et il doit être centré à la fois horizontalement et verticalement par rapport au tronc. Faites sa couleur noire et réglez-le sur 20% opacité. Encore une fois, alors que nous ne pouvons pas utiliser Multiplier pour créer des ombres dans notre illustration SVG, nous pouvons utiliser l'opacité en toute sécurité.
Notre forme générale d'arbre est maintenant terminée et nous sommes prêts à le décorer. Pour ce faire, nous allons créer une forme de globe que nous pouvons redimensionner pour le haut de la décoration de l’arbre et pour les plus petites décorations autour de l’arbre. Nous le créerons initialement en double taille, ce qui facilitera l’utilisation de la grille pour aligner toutes les formes qui composeront le globe..
Faites très attention aux endroits où les nœuds tombent sur la grille lorsque vous créez les formes suivantes.
Tout d’abord, créez un diamant de la taille d’un quart de la taille d’un losange de grande grille, avec la couleur de remplissage # FFEF00. Cela formera le sommet plat du globe.
Ajoutez ces deux formes pour créer la courbe en dessous du sommet du globe - la couleur de la forme de gauche est # F1C906 et la couleur de la bonne forme est # FFE300.
Créez les côtés du globe avec ces formes - le côté gauche est coloré # E9BE1F et le côté droit est coloré # FFDB1F.
Ajoutez les courbes du bas avec ces deux formes colorées # DCAF2E à gauche et # ECCA3C sur la droite.
Enfin, utilisez l'outil Plume pour dessiner une forme unique correspondant à la forme du globe entier. Lui donner la couleur de remplissage # FFDB1F puis placez-le derrière toutes les autres formes. Cela garantit que vous ne verrez aucune couleur d'arrière-plan n'apparaissant dans aucun écart minime entre les formes qui composent le globe..
Maintenant que votre globe est terminé, vous pouvez le redimensionner pour le placer au sommet de votre arbre. Sélectionnez toutes les formes et regroupez-les pour faciliter le redimensionnement. Vous pouvez créer une copie de ce groupe avant le redimensionnement si vous souhaitez le conserver en tant que sauvegarde..
Nous voulons réduire la taille du globe à la moitié de sa taille. Sélectionnez le groupe que vous venez de créer et localisez le Transformer panneau situé à droite de l'interface d'Affinity Designer. Si ce n'est pas déjà ouvert, allez à Voir> Studio> Transformer. Dans le panneau Transformer W (largeur) type de champ / 2 à la fin de la valeur actuelle, appuyez sur ENTRER. Cela réduira de moitié la largeur actuelle.
Faire la même chose dans le H (hauteur) champ pour réduire de moitié la hauteur.
Votre globe de taille réduite est prêt à être utilisé. Vous devez donc le centrer sur le dessus de l’arbre,.
Dupliquez la décoration que vous venez de placer sur le sommet de l’arbre et divisez de nouveau sa taille en deux en utilisant la même méthode d’ajout. / 2 à la fin de la Transformer du panneau H et W des champs. Maintenant, nous avons un globe jaune plus petit que nous pouvons mettre sur le corps principal de notre arbre, et nous avons seulement besoin de quelques couleurs supplémentaires pour rendre nos décorations plus vivantes. Créez trois copies supplémentaires du petit globe afin que nous puissions les transformer en versions bleue, violette et rouge.
Changez les couleurs de trois nouveaux globes pour obtenir ce qui suit:
Le globe bleu utilise ces couleurs:
# 23BEDA # 0099B4 # 22AED3 # 18809C # 1E98B0 # 1A6883 # 0D8197 # 18809C Le globe violet utilise ces couleurs:
# 9B23DA # 7100B4 # 8B22D3 # 52189C # 721EB0 # 401A83 # 670D97 # 33189C Le globe rouge utilise ces couleurs:
# DA3623 # B4001B # D33522 # 9C1B18 # B01E1F # 9C1B18 Avec ces petits globes terminés, vous pouvez les placer autour de votre arbre pour les décorer comme ceci:
Nous allons maintenant ajouter quelques décorations finales plus petites pour apporter des détails supplémentaires. Utilisez l'outil Plume pour dessiner cette forme avec la couleur de remplissage # FFDB1F:
Notez que ses bords suivent le même angle que les bords extérieurs des sections de l'arbre.
Comme nous l'avons fait avec notre globe terrestre, cette forme est en fait dessinée à double taille, ce qui facilite encore le placement de nœuds sur la grille. Utilisez le Transformer panneau de réduire de moitié sa taille, comme nous l'avons fait plus tôt en ajoutant / 2 à la fin de la H et W des champs. Les bords supérieur et inférieur de la forme doivent maintenant comporter une petite unité de grille.
Faites trois copies de la forme et colorez-les # 1E98B0 pour le bleu, # 721EB0 pour le violet et # 831C1A pour le rouge. Dupliquez les quatre formes et retournez-les horizontalement. Vous devriez maintenant avoir huit formes au total.
Prenez ces formes et dispersez-les autour de votre arbre. Utilisez des formes dont les angles correspondent au bord extérieur du côté de l’arbre sur lequel vous les placez.
Et c'est tout! Notre image d'arbre de Noël est tout fait.
Maintenant que notre design est terminé, nous allons le préparer pour une utilisation sur le Web en tant que SVG.
Tout d’abord, nous devons changer le document aux mêmes dimensions que notre arbre pour que nos SVG viewbox paramètre sera réglé à la taille correcte. Si nous exportons maintenant le viewbox serait réglé sur 1024x1024, ce qui signifie que partout où vous utiliseriez le fichier SVG pour arbre de Noël, il y aurait de grandes lacunes soit dans la taille, comme le fait notre document.
Assurez-vous que rien n’est sélectionné sur le canevas, puis examinez la barre d’outils contextuelle en haut de l’interface du concepteur Affinity. Configuration du document bouton. Cliquez dessus et une boîte apparaîtra où vous pourrez changer les dimensions de votre document. Ensemble 280px pour la largeur et 568px pour la hauteur. Tant que vous avez soigneusement placé vos formes, ces dimensions de document doivent fonctionner pour vous. Assurez-vous que vous avez Ancre à la page sélectionné et non Remettre à l'échelle, puis appuyez D'accord.
Immédiatement après le redimensionnement, votre arbre ne sera probablement pas centré. Pour résoudre ce problème, sélectionnez tout dans le document avec CTRL + A, le grouper avec CTRL + G, sélectionnez ce groupe, puis faites-le glisser dans une position centrée.
Maintenant, allez à Fichier> Exporter et dans la boîte qui apparaît sélectionnez le SVG languette. Assurez-vous que le préréglage SVG (pour le web) est sélectionné.
Assurez-vous également de voir le message (Rien ne sera pixellisé). Si au lieu de cela le message vous dit quelque chose volonté rastérisé, continuez votre travail et assurez-vous que vous n'avez pas accidentellement défini de formes sur un mode de fusion autre que Ordinaire.
Lorsque vous êtes prêt, cliquez sur Exportation et économisez votre SVG.
Maintenant que votre fichier SVG est prêt, examinons différentes manières de l’utiliser..
Le plus simple est de le charger dans votre code HTML comme vous le feriez avec n'importe quelle autre image, avec un code comme celui-ci:
Cependant, la beauté de SVG est que vous pouvez également prendre le contenu du fichier SVG et le coller directement dans votre code HTML pour utiliser l'image en ligne..
Pour ce faire, ouvrez votre fichier SVG dans un éditeur de texte et copiez tout à partir de div vous pouvez styler pour contrôler la taille et la position de l'image.
Pour voir cette approche en action, consultez cet exemple sur CodePen:
Vous pouvez donc créer une illustration SVG avec Affinity Designer! Le processus n'est pas très différent de tout autre type de conception réalisé dans Affinity Designer. Toutefois, vous devez faire attention aux modes de fusion non définis par défaut et aux formes trop complexes. Le besoin de couleurs plates et la préférence pour les formes simples rendent les illustrations isométriques particulièrement bien adaptées à SVG..
Pour en savoir plus sur l'utilisation d'Affinity Designer, consultez nos didacticiels et nos cours et, pendant que vous y êtes, consultez nos didacticiels et nos cours SVG..
