Dans ce tutoriel Affinity Designer, on va voir comment créer un motif (ou pattern en anglais). On utilisera la notion de symboles dans Affinity Designer, tu verras l'intérêt de cette fonctionnalité pour créer des motifs répétitifs. Créer un pattern est intéressant si l'on souhaite créer une image de fond (un background) pour réaliser une maquette de site web. Une fois l'image exportée, tu pourras l'intégrer facilement dans une page web.
Sans plus tarder, je te laisse regarder le tuto en vidéo 😉
Salut les amis, aujourd'hui je vous propose de réaliser un petit pattern, un motif de manière à pouvoir après l'intégrer dans vos pages web.
Donc voici un petit peu le rendu final de ce que pourrait représenter ce petit pattern et je vous explique pas à pas comment réaliser ce magnifique motif.
Alors on va créer l'image qui va composer notre pattern, notre motif donc fichiers nouveau et je vais lui mettre une taille de 50 de pixels de côté et créer un plan de travail.
Je vais revenir en taille à 100%, j'ai donc ici un plan de travail c'est là où je vais dessiner mon pattern et finalement on va créer un autre plan de travail de manière à répéter ce pattern et voir comment ça réagit.
On va prendre cet outil « plan de travail » et je vais venir tracer ici un autre plan de travail dont je lui mets 300 par 300 pour faire notre essai.
Maintenant je vais agrandir mon espace et je vais venir travailler sur mon pattern ici sur le plan de travail numéro un.
Donc là on peut sélectionner les calques des différents plans de travail.
Voilà, je vais venir sur le 1 et je vais commencer par le verrouiller ici parce que sinon si je vais vouloir tracer je vais avoir les poignets qui vont un petit peu me gêner.
Je vais tracer une forme, un petit carré et à l'intérieur de ce petit carré je vais y mettre un petit triangle.
Je vais mettre sur la largeur de mon petit carré voilà et ce petit triangle je vais le mettre bien au centre.
Je vais lui mettre une couleur, qu'est-ce qu'on va lui mettre comme couleur ? On va mettre un niveau de gris à 25%.
Du coup mon carré ici je vais peut-être tout mettre sur un fond noir.
Ensuite, je vais reprendre mon triangle ici faire un contrôle J pour le dupliquer je vais le tourner et le placer au-dessus. Cette fois je vais lui mettre une couleur de niveaux de gris de 50%.
Toujours un contrôle J, je pivote et je vais mettre le triangle ici et cette fois 75%.
J’ai réalisé un petit motif assez rapidement à l'aide de formes simples et maintenant je vais vouloir créer un symbole de ce que j'ai fait. Pour ça je vais aller dans « studio » et venir ici dans symbole.
Je vais prendre l'ensemble de mes formes, faire un contrôle G pour grouper le tout. Maintenant que j'ai groupé le tout, je vais pouvoir ici cliquer sur « créer » et j'ai mon symbole qui est créé.
Cette fois, je vais prendre le symbole pour faire un glisser-déplacer, je vais venir dans mon plan de travail numéro 2.
Je vais le positionner dans le plan de travail numéro deux et puis je vais le dupliquer avec la touche alt.
Voilà, ensuite je répète mon contrôle J de manière à une recopie intelligente.
Je vais venir sélectionner l'ensemble de mes 2 symboles ici, pareil avec la touche alt je vais venir déplacer là et faire un contrôle J de manière à ce que j'ai une recopie intelligente.
J’obtiens de cette manière un petit fond grâce à mon petit pattern avec des motifs qui viennent se répéter.
Je vais revenir sur une taille à 100% donc là c'est la taille réelle de ce que pourrait représenter mon motif.
Maintenant on va pouvoir un peu améliorer ceci donc là je vais aller dans mon calque symbole.
Vous voyez que j'ai un calque plan de travail numéro deux, plan de travail numéro un et un calque symbole.
Je vais venir à l'intérieur et c'est là que je vais rajouter encore une nouvelle forme.
Vous voyez comme là ma forme est grise, donc du coup bah ça va se répéter partout d'où l'intérêt des symboles puisque là maintenant je vais pouvoir modifier l'opacité ici.
Voilà 80% et vous voyez que j'ai mon symbole qui va se répéter partout et j'ai une vue en temps réel en fait de ce que pourrait donner mon image, mon background à mon motif.
Maintenant, je n'ai plus qu'à changer ici la couleur par exemple de mon carré et en temps réel on va pouvoir faire des trucs sympas et voir un petit peu ce qui convient, tout ce qui conviendrait pour afficher, pour réaliser notre petit motif.
On pourrait rester là dessus par exemple si on veut et maintenant j'ai réalisé mon motif.
Bon c'est plutôt sympa et je n'ai plus qu'à exporter si je veux faire un jpeg : faire « fichier : exporter l'image de mon plan de travail un qui ne fait que 50 pixels le côté.
Du coup on va avoir une taille assez légère et c'est très bien pour intégrer ça dans une page web, comme ça on va pouvoir faire des petits trucs sympas.
Après vous allez faire un peu des essais avec différentes formes, vous allez pouvoir changer les couleurs, vous allez laisser libre cours à votre imagination pour faire un petit motif sympa avec affinity designer.
