0. Présentation

Avec le nouvel outil Aligner/Distribuer, vous pouvez rapidement et précisément positionner et espacer les objets les uns par rapport aux autres. Ce guide vous donnera les étapes complètes pour sept scénarios d'utilisation différents où l'utilisation de cet outil rationalisera votre flux de travail et vous donnera des résultats bien organisés.

 

1. Comprendre l'outil

Avant de discuter des cas d'utilisation, nous devons comprendre le fonctionnement de l'outil. Ici, je vais expliquer comment accéder à la palette d'outils et quelles sont les fonctions de ses différentes sections.

 

1.1. Ouverture de la palette Aligner/Distribuer

Pour accéder à la palette d'alignement/distribution, vous devez utiliser Clip Studio Paint Version 2.0.

 

Allez dans [Window] et faites défiler jusqu'à l'option [Align/Distribute] et cliquez dessus.

 

Cela ouvrira la palette d'outils Aligner/Distribuer.

 

1.2. Sélection des calques ou des éléments vectoriels

Savoir comment effectuer des sélections plus rapides d'objets et de calques rationalisera votre processus d'alignement/distribution. Voici les quatre principales façons de sélectionner des éléments lorsque vous leur appliquez des actions d'alignement et de distribution.

 

1. Sélectionnez les calques souhaités dans la palette des calques ou avec l'outil [Objet]. Pour la palette de calques, cochez simplement tous les calques que vous souhaitez aligner et distribuer.

 

2. Lorsque vous utilisez l'outil [Objet] pour sélectionner le calque, cliquez sur l'objet et le calque dans lequel se trouve l'objet sera sélectionné. Maintenez la touche Maj enfoncée pour ajouter plus de calques à votre sélection de cette manière.

 

3. Vous pouvez également effectuer des sélections plus rapides en cliquant dans une zone transparente et en faisant glisser sur les objets dont vous souhaitez choisir les calques. Pour cela, rendez-vous dans la palette d'outils de l'outil [Objet] puis dans son menu [Fonctionnement de la partie transparente].

 

Cochez [Sélectionner la zone en faisant glisser] et sélectionnez [Calque] dans la sous-option.

 

 

4. Pour travailler à l'intérieur d'un calque vectoriel, vous pouvez choisir individuellement de sélectionner ou non les différents éléments à l'intérieur du calque et de les aligner et de les distribuer.

 

Pour effectuer cette sélection, modifiez le paramètre [Sélectionner la zone en faisant glisser] sur [Objets dans ce calque] dans le menu [Opération de la partie transparente] de la palette d'outils [Objet].

 

Si vous ne sélectionnez que les calques, tous les éléments de calque se déplaceront comme une seule unité, comme avec les calques raster.

 

1.3. Différence entre Aligner et Distribuer

Les options [Aligner] se trouvent dans la deuxième section de la palette Aligner/Répartir, tandis que les options [Répartir] se trouvent dans la troisième section.

 

[Aligner]:

 

[Aligner] aligne les objets le long d'une ligne droite de sorte qu'un côté, bord ou centre de chaque objet sélectionné touche cette ligne invisible ou visible. Les éléments peuvent se chevaucher ou avoir un espacement irrégulier entre eux.

 

Voici six options d'alignement dans la palette d'outils de gauche à droite :

 

1. [Aligner les bords gauches] : En utilisant cette option, nous pouvons aligner les bords gauches de tous les objets ou calques sélectionnés le long d'une ligne droite.

 

 

2. [Aligner les centres horizontaux] : Avec cette option, les centres horizontaux de tous les objets ou calques sélectionnés sont alignés le long d'une ligne droite.

 

 

3. [Aligner les bords droits] : cette option aligne les bords droits des objets ou calques sélectionnés le long d'une ligne droite.

 

 

4. [Aligner les bords supérieurs] : avec cette option, les bords supérieurs des objets ou calques sélectionnés sont alignés le long d'une ligne droite.

 

 

5. [Aligner les centres verticaux] : cette option aligne les centres verticaux des objets ou calques sélectionnés.

 

 

6. [Aligner les bords inférieurs] : grâce à cette option, vous pouvez aligner les bords inférieurs des objets ou calques sélectionnés.

 

[Distribuer]:

 

[Distribuer] espacera les éléments dans la zone autorisée. L'espacement sera égal sur tous les objets sélectionnés et selon les bords ou les centres des objets.

 

Par exemple, si je distribue les bords gauches, la distance entre les bords gauches du premier et du deuxième objet sera égale à la distance entre les bords gauches du deuxième et du troisième objet, et ainsi de suite.

 

Remarque : Vous devez sélectionner au moins trois objets ou calques pour utiliser les options [Distribuer].

 

Voici les six options de distribution de gauche à droite :

 

1. [Distribuer les bords supérieurs] : cette option espace les objets ou les calques de manière à ce que la distance entre leurs bords supérieurs devienne égale.

 

 

2. [Répartir les centres verticaux] : grâce à cette option, vous pouvez égaler la distance entre les centres verticaux des objets ou calques sélectionnés.

 

 

3. [Distribuer les bords inférieurs] : Avec cette option, les bords inférieurs des objets ou des calques deviennent équidistants.

 

4. [Distribuer les bords gauches] : cette option crée une distance égale entre les bords gauches des objets ou calques sélectionnés.

 

 

5. [Répartir les centres horizontaux] : Avec cette option, l'espacement entre les centres horizontaux des objets ou calques sélectionnés devient égal.

 

 

6. [Répartir les bords droits] : cette option vous permet de répartir les objets ou les calques sélectionnés de manière à ce que la distance entre leurs bords droits devienne égale.

 

 

Si vos objets sont de tailles différentes, vous remarquerez peut-être que l'espace vide entre les objets n'est pas égal. Nous aborderons cet événement dans la section ci-dessous.

 

1.4. Différence entre répartir et répartir uniformément

[Distribuer] espace les objets en fonction des coordonnées des objets, telles que leurs bords ou leurs centres. De ce fait, la taille des objets a un impact sur l'espace vide visuel entre eux.

 

Le plus grand objet semblera plus proche de l'objet à côté de lui et le plus petit objet semblera plus éloigné de l'objet à côté de lui (flèches violettes), même si la distribution est égale (flèches rouges).

 

Pour répartir uniformément l'espace vide entre les objets sans se soucier de leur taille, nous devons utiliser [Répartir uniformément]. Il s'agit de la quatrième section de la palette [Aligner/Répartir].

 

[Répartir uniformément] crée un espacement égal entre le début et la fin des objets et les répartit sur la zone autorisée.

 

Voici les deux options [Répartir uniformément] :

 

1. [Distribuer l'espacement vertical] : utilisez cette option pour obtenir un espace vertical égal entre les objets.

 

 

2. [Distribuer l'espacement horizontal] : utilisez cette option pour un espace horizontal égal entre les objets.

 

Parfois, la zone autorisée est trop petite pour que les objets aient un espace vide entre eux après avoir été distribués. Dans de tels cas, la distance négative entre les extrémités et les débuts des objets est égale.

 

1.5. Choisir une base d'alignement

La base d'alignement est la zone que vous autorisez pour l'alignement et la distribution. Les objets sont alignés et répartis dans cette zone. Il peut s'agir de la totalité du canevas ou d'une zone définie par des repères ou des sélections.

 

[Base d'alignement] est la première section de la palette [Aligner/Répartir].

 

Ses options sont les suivantes de gauche à droite :

 

1. [Objet d'alignement] : Lorsque cette option est utilisée, l'alignement et la distribution se produisent dans la zone couverte par les objets sélectionnés. Cette zone peut changer lorsque vous appliquez diverses options d'alignement/distribution.

 

 

2. [Canvas] : avec cette option, les objets sont alignés et répartis sur l'ensemble du canevas.

 

 

3. [Zone de sélection] : Vous pouvez faire une sélection avec l'outil [Zone de sélection] et l'alignement et la distribution de votre objet resteront dans cette zone (si aucune sélection n'est faite, la zone couverte par les objets sélectionnés est la zone sélectionnée ).

 

4. [Guide] : vous pouvez utiliser des guides avec cette option pour limiter la zone couverte lors de l'alignement et de la distribution. Sur les côtés où il n'y a pas de guides, le bord de l'objet le plus éloigné déterminera le bord de la zone autorisée.

 

5. [Auto] : Cette option tient compte du contexte. Si des guides sont actifs, il s'alignera selon le [Guide].

 

Si plusieurs objets sont sélectionnés, il s'alignera selon [Objet d'alignement]. S'il y a une sélection, elle s'alignera sur la [Zone de sélection] et s'il n'y a pas de sélection d'une zone ou de plusieurs objets et pas de guides, elle s'alignera sur [Canevas].

 

Utilisation 1 : Accrochage au centre pour les motifs complexes

Outre le simple alignement et la distribution de vos objets, vous pouvez également utiliser cet outil pour créer des motifs complexes à partir d'éléments plus simples.

 

Tout d'abord, créez les éléments du motif. Ils doivent de préférence varier en taille. Une fois fait, sélectionnez tous leurs calques.

 

Maintenant, cliquez sur [Aligner les centres horizontaux] puis sur [Aligner les centres verticaux] ou vice versa. Cela alignera le centre de chaque élément sur le centre de la toile ou de la zone sélectionnée et le chevauchement résultant créera un motif complexe.

 

Vous pouvez également essayer différentes variantes de votre motif en modifiant l'ordre des calques.

 

Vous pouvez également utiliser cette méthode pour aligner avec précision un objet singulier au centre du canevas ou à une zone spécifique.

 

Utilisation 2 : Ajustements pour la création de pinceaux

Lors de la création d'un nouveau pinceau, vous pouvez aligner et répartir avec précision les éléments de votre pointe de pinceau sans avoir à regarder les choses.

 

Aligner/Distribuer vous aidera également à expérimenter rapidement plusieurs variations pour votre pinceau.

 

Remarque : Pour les étapes complètes de création de pinceaux, vous pouvez vous référer à la section 3 de l'un de mes précédents conseils :

 

Utilisez 3 : Aligner le texte (et [Aligner sur les pixels du texte])

L'alignement du texte présent dans différentes couches a été rendu très facile grâce à l'outil Aligner/Distribuer. Par exemple, lorsque je travaille sur une vignette, je peux essayer rapidement mes options d'alignement du texte et de distribution de l'espacement dans la zone sélectionnée pour le texte (avec la base d'alignement [Zone de sélection] ).

 

Aligner sur les pixels du texte :

 

Vous remarquerez peut-être que parfois le texte ne s'aligne pas parfaitement (particulièrement visible dans le texte de différentes tailles).

 

Pour résoudre ce problème, cochez [Aligner sur les pixels du texte] dans la palette [Aligner/Répartir] et cela supprimera toute déviation indésirable du texte par rapport à l'alignement précis.

 

Utilisation 4 : distribution diagonale

Si vous souhaitez répartir vos objets en diagonale, c'est très simple à faire avec l'outil aligner/distribuer.

 

Tout d'abord, sélectionnez tous vos objets ou calques et cliquez sur [Aligner les bords gauches] et [Aligner les bords supérieurs].

 

Choisissez ensuite [Distribuer l'espacement vertical] et [Distribuer l'espacement horizontal] ou vice versa. Cela répartira vos objets dans une diagonale régulièrement espacée.

 

L'objet dans le calque le plus bas commencera la diagonale vers le bas à partir du coin supérieur gauche. Les objets dans les couches ci-dessus continueront la diagonale vers le bas selon la séquence de couches jusqu'à ce que l'objet dans la couche supérieure termine la diagonale dans le coin inférieur droit.

 

En réorganisant les calques et en répétant les étapes ci-dessus, vous pouvez ajuster la position de vos objets dans la distribution diagonale.

 

Utilisation 5 : création de motifs

Créons un motif simple. Pour créer un motif avec Aligner/Distribuer, placez d'abord les éléments du motif ou les motifs dans leurs positions approximatives avec chaque élément dans son propre calque. Définissez la [Base d'alignement] sur [Objet d'alignement] dans la palette d'outils.

 

Sélectionnez l'outil [Objet] et accédez à [Fonctionnement de la zone transparente] dans sa palette de propriétés d'outil. Cochez [Sélectionner la zone en faisant glisser] et sélectionnez [Calque] dans la sous-option.

 

Faites ensuite glisser le curseur sur la première ligne pour sélectionner les calques dans lesquels se trouvent les objets de la ligne. Alignez la rangée avec [Aligner les centres verticaux], puis cliquez sur [Distribuer l'espacement horizontal] pour espacer uniformément les objets de la rangée.

 

Répétez l'opération pour les autres rangées.

 

De même, alignez et distribuez chaque colonne individuellement avec [Aligner les centres horizontaux] et [Distribuer l'espacement horizontal] après avoir sélectionné les objets de la colonne avec l'outil [Objet].

 

Maintenant, notre motif est aligné et réparti uniformément, mais il n'est pas aligné au centre de la toile. Pour déplacer l'ensemble du motif, nous allons regrouper les couches d'éléments dans un nouveau dossier. Pour ce faire, sélectionnez les calques, faites un clic droit, puis choisissez [Créer un dossier et insérer un calque].

 

Astuce : Si vous travaillez à l'intérieur d'un calque vectoriel, sélectionnez le calque vectoriel au lieu des objets qu'il contient.

 

 

Une fois le dossier de motifs sélectionné, remplacez [Base d'alignement] par [Canevas]. Ensuite, cliquez sur [Aligner les centres verticaux] et [Aligner les centres horizontaux].

 

Votre motif est maintenant terminé et aligné au centre de votre toile !

 

Utilisation 6 : Création de feuilles de sprites

Les feuilles de sprite sont souvent utilisées pour les animations de jeux de personnages ou d'objets. Il est crucial qu'ils soient parfaitement alignés ou cela pourrait gâcher votre animation.

 

Même si les feuilles de sprite peuvent nécessiter des ajustements d'alignement personnalisés en fonction du mouvement créé, Aligner/Distribuer peut vous aider à atteindre le résultat final plus rapidement.

 

Voyons comment créer rapidement une feuille de sprite précise à l'aide de l'outil Aligner/Répartir. Je vais démontrer les étapes avec une feuille de sprite pour une animation de déroulement du cœur :

 

ÉTAPE 1 : Ouvrez la grille en allant sur [View] puis sur [Grid]. Ensuite, ouvrez les [Paramètres de grille/règle] dans le menu [Affichage].

 

Ajustez les pixels [Gap] de sorte que votre plus grande image puisse tenir dans l'une des plus grandes cellules de la grille qui ont des contours plus épais.

 

ÉTAPE 2 : Alignez vos sprites dans les positions approximatives que vous voulez pour eux, chacun dans sa propre cellule.

 

ÉTAPE 3 : Réglez la [Base d'alignement] sur [Zone de sélection]. Sélectionnez la zone couverte par la première rangée avec l'outil rectangle [Zone de sélection] (maintenez [Aligner sur la grille] dans la rangée d'icônes supérieure) et sélectionnez les objets sprite de la rangée avec l'outil [Objet].

 

Cliquez sur [Aligner les bords inférieurs] (ou [Aligner les centres verticaux], selon vos besoins) dans la palette [Aligner/Répartir].

 

Répétez l'opération pour toutes les autres rangées.

 

ÉTAPE 4 : Nous devons maintenant aligner les centres horizontaux de tous les sprites. Nous allons d'abord sélectionner la zone couverte par la première colonne avec notre outil [Zone de sélection] et le [Accrocher à la grille] actif.

 

Ensuite, sélectionnez tous les sprites de la première colonne avec l'outil [Objet] et cliquez sur [Aligner les centres horizontaux] dans la palette [Aligner/Répartir].

 

Répétez l'opération pour toutes les autres colonnes de feuille de sprite.

 

L'alignement principal de votre feuille de sprites est maintenant terminé. Pour ma feuille de sprites, les sprites individuels sont de taille et de forme trop variables pour que les pointes du cœur s'alignent parfaitement. Avec l'aide visuelle de la grille et l'outil [Objet], j'ajusterai les pointes du cœur afin qu'elles tombent systématiquement en un seul point.

 

Comme il est évident, grâce à l'aide de l'outil Aligner/Distribuer, je n'ai qu'à faire des ajustements mineurs à ma feuille de sprite alignée au lieu d'essayer de l'aligner manuellement à partir de zéro.

 

Utilisation 7 : Création d'objets contenant des composants alignés (et [Align to vector paths] )

Lors du dessin (scènes et arrière-plan notamment), nous pouvons rencontrer des objets composés d'éléments alignés ou uniformément répartis. Il peut s'agir de portails, de clôtures, d'armoires, de cadres, d'oeils de bœuf, etc.

 

Aligner/Distribuer est l'outil parfait à utiliser dans de tels cas. Par exemple, je dessine une double porte grillée. Tout d'abord, je veux connaître le centre de la double porte où les deux portes se rencontrent. Pour cela, j'utilise la méthode « aligner au centre » décrite dans la section Utilisation 1.

 

Pour le gril, je dessine une seule unité de gril dans un nouveau calque et copie-colle le calque une quinzaine de fois. Maintenant, je sélectionne les calques avec l'outil Objet. Avec l'outil [Zone de sélection], je sélectionne la zone d'une des portes.

 

Avec la [Base d'alignement] définie sur [Zone de sélection], je clique sur [Distribuer l'espacement horizontal].

 

Aligner sur les chemins vectoriels :

 

Le gril est uniformément réparti mais il y a un espace vide aux deux extrémités qui ne devrait pas être là. Cela peut arriver si vous utilisez des calques vectoriels et vous pouvez facilement le corriger en sélectionnant [Aligner sur les chemins vectoriels] dans la palette [Aligner/Répartir].

 

Maintenant, je sélectionne à nouveau [Distribuer l'espacement horizontal] et la grille de la porte a été parfaitement répartie dans la zone de sélection.

 

Les calques sont toujours sélectionnés, donc je clique avec le bouton droit sur l'un d'eux et sélectionne [Fusionner les calques sélectionnés] afin que la grille complète soit dans un calque au lieu d'être dispersée sur plusieurs calques.

 

Après avoir dupliqué la couche de grille pour l'autre porte, effectué quelques ajustements de conception et transformé la perspective d'une porte, voici le résultat final :

 

Dernières pensées

C'est tout pour le tutoriel. J'espère que cet article vous aidera à tirer le meilleur parti de cette nouvelle fonctionnalité impressionnante d'alignement/distribution et des vastes possibilités de son utilisation.

 

Merci pour la lecture. N'hésitez pas à me faire part de vos questions ou commentaires !