0. Introduction

Avec le nouvel outil Aligner/Distribuer, vous pouvez positionner et espacer rapidement et précisément les objets les uns par rapport aux autres. Ce guide vous expliquera les étapes complètes pour sept scénarios d'utilisation différents où l'utilisation de cet outil simplifiera 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 comment l'outil fonctionne. Ici, je vais expliquer comment accéder à la palette d'outils et quelles sont les fonctions de ses différentes sections.

 

1.1. Ouvrir la palette Aligner/Distribuer

Pour accéder à la palette aligner/distribuer, vous devez utiliser Clip Studio Paint Version 2.0.

 

Allez dans [Fenêtre], faites défiler jusqu'à l'option [Aligner/Distribuer] et cliquez dessus.

 

Ceci ouvrira la palette d'outils Aligner/Distribuer.

 

1.2. Sélectionner les calques ou les éléments vectoriels

Savoir comment effectuer des sélections plus rapides d'objets et de calques simplifiera votre processus d'alignement/distribution. Voici les quatre principales façons de sélectionner des éléments lors de l'application d'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 des 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 d'autres 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 la souris sur les objets dont vous souhaitez choisir les calques. Pour cela, allez dans la palette d'outils de l'outil [Objet], puis dans son menu [Opération de la partie transparente].

 

Cochez [Sélectionner la zone en la 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 sélectionner de cette manière, modifiez le paramètre [Sélectionner la zone en la faisant glisser] en [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 du 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/Distribuer, tandis que les options [Distribuer] se trouvent dans la troisième section.

 

[Aligner]:

 

[Aligner] aligne les objets le long d'une ligne droite de sorte qu'un côté, un bord ou le 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] : Grâce à 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 sur la zone autorisée. L'espacement sera égal sur tous les objets sélectionnés et en fonction des bords ou des centres des objets.

 

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

 

Note : 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. [Distribuer les centres verticaux] : Grâce à cette option, vous pouvez égaliser 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 calques deviennent également espacés.

 

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

 

 

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

 

 

6. [Distribuer les bords droits] : Grâce à cette option, vous pouvez distribuer les objets ou 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 ce phénomène dans la section ci-dessous.

 

1.4. Différence entre Distribuer et Distribuer uniformément

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

 

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

 

Pour distribuer uniformément l'espace vide entre les objets sans tenir compte de leurs tailles, nous devons utiliser [Distribuer uniformément]. C'est la quatrième section de la palette [Aligner/Distribuer].

 

[Distribuer uniformément] crée un espacement égal entre les débuts et les fins des objets et les distribue sur la zone autorisée.

 

Voici les deux options [Distribuer uniformément] :

 

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

 

 

2. [Distribuer l'espacement horizontal] : Utilisez cette option pour un espacement 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 distribués dans cette zone. Il peut s'agir de l'ensemble de la toile ou d'une zone définie par des guides ou des sélections.

 

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

 

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. [Toile] : Avec cette option, les objets sont alignés et distribués sur toute la toile.

 

 

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 restreindre 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, elle s'alignera selon le [Guide].

 

Si plusieurs objets sont sélectionnés, elle s'alignera selon l'[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 de zone ou de plusieurs objets et pas de guides, alors elle s'alignera sur la [Toile].

 

Utilisation 1 : Ancrage au centre pour des motifs complexes

En plus de l'alignement et de la distribution simples 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 devraient de préférence varier en taille. Une fois créés, 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 au 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 variations de votre motif en modifiant l'ordre des calques.

 

Vous pouvez également utiliser cette méthode pour aligner précisément un objet singulier au centre de la toile ou d'une zone spécifique.

 

Utilisation 2 : Ajustements pour la création de pinceaux

Lorsque vous créez un nouveau pinceau, vous pouvez aligner et distribuer précisément les éléments de la pointe de votre pinceau sans avoir à les estimer à l'œil.

 

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

 

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

 

Utilisation 3 : Alignement du texte (et [Aligner sur les pixels du texte])

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

 

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

 

Pour corriger cela, cochez [Aligner sur les pixels du texte] dans la palette [Aligner/Distribuer] et cela supprimera tout écart indésirable du texte par rapport à un alignement précis.

 

Utilisation 4 : Distribution diagonale

Si vous souhaitez distribuer vos objets en diagonale, c'est très facile à 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].

 

Ensuite, choisissez [Distribuer l'espacement vertical] et [Distribuer l'espacement horizontal] ou vice versa. Cela distribuera vos objets en diagonale, uniformément espacés.

 

L'objet du calque le plus bas commencera la diagonale descendante depuis le coin supérieur gauche. Les objets des calques supérieurs continueront la diagonale descendante selon la séquence des calques jusqu'à ce que l'objet du calque supérieur 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éer des motifs

Créons un motif simple. Pour créer un motif avec Aligner/Distribuer, placez d'abord les éléments ou motifs du motif dans leurs positions approximatives, 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 allez dans [Opération de la zone transparente] dans sa palette de propriétés d'outil. Cochez [Sélectionner la zone en la faisant glisser] et sélectionnez [Calque] dans la sous-option.

 

Ensuite, faites glisser la souris sur la première rangée pour sélectionner les calques dans lesquels se trouvent les objets de la rangée. 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 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 distribué uniformément, mais il n'est pas aligné au centre de la toile. Pour déplacer l'ensemble du motif, nous allons regrouper les calques d'éléments dans un nouveau dossier. Pour ce faire, sélectionnez les calques, cliquez avec le bouton droit de la souris, 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 motif sélectionné, modifiez la [Base d'alignement] en [Toile]. Ensuite, cliquez sur [Aligner les centres verticaux] et [Aligner les centres horizontaux].

 

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

 

Utilisation 6 : Créer des feuilles de sprites

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

 

Même si les feuilles de sprites 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 sprites précise à l'aide de l'outil Aligner/Distribuer. Je vais vous montrer les étapes avec une feuille de sprites pour une animation de cœur qui se déploie :

 

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

 

Ajustez les pixels de l'[Espacement] de manière à ce que votre plus grande image puisse tenir à l'intérieur de l'une des cellules de grille plus grandes qui ont des contours plus épais.

 

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

 

ÉTAPE 3 : Définissez 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 [Magnétisme de la grille] activé 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/Distribuer].

 

Répétez 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 [Magnétisme de 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/Distribuer].

 

Répétez pour toutes les autres colonnes de la feuille de sprites.

 

L'alignement principal de votre feuille de sprites est maintenant terminé. Pour ma feuille de sprites, les sprites individuels sont trop variables en taille et en forme 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 toujours au même point.

 

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

 

Utilisation 7 : Créer des objets contenant des composants alignés (et [Aligner sur les tracés vectoriels])

Lors du dessin (en particulier les scènes et les arrière-plans), nous pouvons rencontrer des objets composés d'éléments alignés ou uniformément distribués. Il peut s'agir de portails, de clôtures, de placards, de cadres photo, de cibles, etc.

 

Aligner/Distribuer est l'outil parfait à utiliser dans de tels cas. Par exemple, je dessine un double portail grillagé. Tout d'abord, je veux connaître le centre du double portail où les deux portails se rencontrent. Pour cela, j'utilise la méthode 'ancrer au centre' discutée sous l'Utilisation 1.

 

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

 

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

 

Aligner sur les tracés vectoriels :

 

La grille est uniformément répartie 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 tracés vectoriels] dans la palette [Aligner/Distribuer].

 

Maintenant, je sélectionne à nouveau [Distribuer l'espacement horizontal] et le grill du portail a été parfaitement distribué sur la zone de sélection.

 

Les calques sont toujours sélectionnés, alors je clique avec le bouton droit sur l'un d'eux et sélectionne [Fusionner les calques sélectionnés] afin que le grillage complet soit dans un seul calque au lieu d'être dispersé sur de nombreux calques.

 

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

 

Réflexions finales

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

 

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