Share
Dans ce tutoriel, nous allons apprendre à aligner parfaitement les objets et à les distribuer à l'aide de Sketch 3. Je vais utiliser quelques exemples élémentaires pour expliquer de manière complète les options. Certaines d'entre elles vous surprendront.!
C'est peut-être la technique la plus facile ici.
Regardez en haut de l'inspecteur: vous verrez quelques boutons liés à l'alignement. Les six boutons situés à droite (aligner gauche, horizontalement, droit, haut, verticalement et bas) servent à aligner les calques entre eux, mais si vous ne sélectionnez qu'un seul objet, il sera aligné sur la planche mère. Voici comment ça fonctionne:
Comme indiqué, vous pouvez utiliser les mêmes boutons lorsque plusieurs objets sont sélectionnés pour les aligner. Mais qu'en est-il si nous voulons aligner plusieurs objets sur la planche graphique?
Pour aligner plusieurs objets sur la planche graphique, regroupez-les en un seul groupe de calques. Le groupe agira comme un seul objet lorsque vous utilisez les boutons d’alignement.
Cependant, grouper de cette manière peut ne pas toujours convenir à votre situation. Laisse moi te montrer une autre approche.
Sélectionnez les calques que vous souhaitez aligner, maintenez la touche enfoncée. touche Alt faire en sorte que les icônes d’alignement de l’Inspecteur changent d’apparence. Maintenant, vous alignez les calques sur la planche graphique! Gardez à l'esprit que vous devez avoir les couches sélectionnées dans la planche graphique, sinon cette option ne sera pas disponible.
Dans l'exemple suivant, j'ai trois couches différentes sélectionnées:
Cela fonctionne aussi avec les groupes de calques. ce qui signifie que vous pouvez sélectionner plusieurs groupes de calques, maintenez la touche Alt enfoncée et alignez-les sur la planche graphique..
Autre situation: je veux que tout soit aligné sur un seul objet. Vous devez d’abord comprendre que, par défaut, Sketch s’aligne toujours sur le le plus à l'extérieur couche de tous ceux sélectionnés. Cette couche est appelée «objet clé».
Par conséquent, pour aligner tous les objets sélectionnés vers le haut, l’objet trouvé dans la position la plus éloignée est l’objet clé. Voici un exemple où j'aligne trois objets en haut à droite (le carré rouge est notre «objet clé»):
Ce serait bien si nous pouvions changer l'objet clé pour qu'il corresponde à celui que nous voulons, non? Voici l'astuce: verrouillez le calque que vous souhaitez utiliser comme objet clé,puis sélectionnez à nouveau tous les calques. (Vous ne pouvez sélectionner des calques verrouillés que dans la liste des calques).
Dans l'exemple suivant, le carré bleu est déjà verrouillé, il fera donc office de nouvel objet clé. Maintenant alignons à nouveau les objets en haut à droite:
J'ai découvert ce truc pratique grâce à SketchTips. Et vous pouvez utiliser le plugin Align To de Lucien Lee pour obtenir les mêmes résultats..
Pointe: vous pouvez également utiliser les boutons d'alignement pour aligner plusieurs points vectoriels lorsque vous êtes dans Mode édition. Sélectionnez l'objet vectoriel, double-cliquez pour passer en mode Edition (vous pouvez également utiliser l'icône Edit de la barre d'outils principale) et sélectionnez tous les points vectoriels que vous souhaitez aligner..
Si vous regardez en haut du panneau des inspecteurs, vous remarquerez que je n’ai pas encore mentionné les deux icônes d’alignement de gauche. Ces boutons permettent de distribuer des objets horizontalement et verticalement. Nous pouvons également les distribuer également, ce qui est très pratique! Disons que nous avons sélectionné quelques formes et que nous aimerions les distribuer horizontalement. Utilisez le Distribuer horizontalement bouton ou aller à Organiser> Distribuer> Horizontalement.
Les couches les plus à gauche et les plus à droite resteront là où elles se trouvent, tandis que les couches du milieu seront espacées de manière égale entre elles. Vous pouvez faire la même chose le long de l’axe vertical avec Distribuer verticalement option.
D'accord, mais si je veux que ces calques 20px les uns des autres? Distribuer horizontalement / verticalement ne va pas aider ici.
Dans ce cas, nous pouvons utiliser le Faire la grille outil (Organiser> Créer une grille) Pour définir les espacements horizontaux et verticaux entre les objets. Cela peut paraître un peu difficile à comprendre au début, alors laissez-moi vous montrer un autre exemple animé:
Ici, je voulais distribuer quatre couches différentes avec un espacement de 20px. J'ai fait une grille d'une seule ligne (pour aligner tous les calques horizontalement) et de quatre colonnes (une colonne par calque). Ensuite, je règle la marge des colonnes sur 20 px pour obtenir l'espacement souhaité. Si je veux répartir les calques verticalement, je dois créer une grille de quatre lignes (avec une marge de 20 pixels) et une colonne..
Si vous ne vous sentez pas à l'aise avec cette méthode, vous pouvez essayer le plug-in SketchDistributor. Il vous permet de distribuer des objets sélectionnés avec un espacement spécifié.
J'espère que vous avez apprécié ce tutoriel. Maîtriser les outils d'alignement et de distribution dans Sketch vous fera gagner beaucoup de temps.!
Accentsconagua