Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Sketch

Ajuster et paramétrer les formes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez le panneau des paramètres de forme. Faites-en le tour et utilisez quelques outils d'ajustement.
05:29

Transcription

Pour ce qui est du paramétrage des formes, on va commencer par paramétrer ce bouton. Alors, vous remarquerez que je n'ai pas fait le deuxième bouton parce que je vais me servir un peu des bases de paramétrage de celui-là pour faire l'autre. Comme vous comprendrez, à chaque fois, pour pouvoir gagner du temps dans des workflows et pour pouvoir vraiment être efficace, toujours se servir d'une base de travail pour ensuite la dupliquer et l'ajuster suivant ce dont on a besoin. Si donc je rentre dans cette forme en cliquant dessus ou si je clique dessus dans le listing juste à côté, j'accède à tout le panneau de paramétrages. On a la position, si jamais je le déplace. Vous voyez, la position change. On a sa taille. Vous pouvez donc du coup ajuster directement sur la forme, mais si par exemple vous cliquez sur le petit cadenas juste ici, lorsque vous allez ajuster la largeur, ça va ajuster de manière proportionnelle aussi la hauteur. Sinon, ensuite, vous pouvez avoir une transformation en rotation, vous pouvez appliquer une symétrie. Là, c'est ici qu'on peut changer le degré au niveau des boarders. Donc là, par exemple, je me dis que c'est un petit peu gros 5, du coup je vais descendre sur 4. Voilà, c'est un peu plus sympa. Ensuite, vous pouvez gérer l'opacité. Nous avons ici les styles partagés, mais ce sera pour plus tard dans le tutoriel. Vous avez les modes de fusion, un petit peu dans l'esprit de PhotoShop. Vous pouvez mélanger la couleur ou le style avec le style d'une forme qui va être positionnée en dessous. Ça, c'est quelque chose qui est un petit peu plus avancé, et en plus de ça lorsqu'on travaille dans le monde de l'interface graphique et donc avec des développeurs, et donc avec du code, on va éviter pour le moment d'utiliser les modes de fusion, parce qu'au niveau du code ils sont assez limités par rapport à ça. Donc, on va rester en Normal et ici on a la couleur en question. À côté de ça, on a aussi la possibilité d'ajouter une bordure, de mettre la largeur qu'on veut, de dire si elle est à l'intérieur ou à l'extérieur, de dire si elle est centrée également. Là, je vais l'enlever. On peut aussi rapidement ajouter une ombre portée. Il suffit de cliquer dessus, et là, vous voyez l'ombre portée qui a été ajoutée. Ensuite, pour l'ajuster, il suffit de modifier les paramètres directement. On peut la flouter, on peut la rendre plus nette, on peut l'étendre, et donc vous remarquerez, si jamais je la mets toute fine, et juste en dessous, on peut avoir quelque chose qui est très léger et si jamais j'utilise une couleur un peu similaire à la nôtre, on va avoir un effet de relief. Donc, vous pouvez concevoir, juste avec des ombres, des choses assez sympas. Donc, vous pouvez la désactiver, et si jamais vous voulez supprimer, vous faites clic droit, gris mauve, et ça s'enlève. Vous avez aussi Inner Shadows et vous pouvez aussi appliquer un flou gaussien. Ça, ce sera plus intéressant de l'appliquer sur une photo, par exemple. Donc, je vous montrerai un petit peu plus tard. Donc là, nous, ce que l'on veut, c'est avoir le même bouton qu'ici, parce que c'est notre inspiration et qu'on trouve que le style est plutôt sympa, eh bien, on veut le récupérer. Alors, bien entendu, là l'idée, c'est que vous allez pouvoir facilement récupérer en cliquant dessus, voilà, je suis entré dans le symbole, je clique dessus, je double clique encore, voyez ici. On va remonter, voilà, ici sur le bouton, je suis entré dedans. J'ai exactement tous les paramètres de taille, la couleur. J'ai tout. Alors, quand vous allez récupérer potentiellement une image d'inspiration, vous ne pourrez pas faire ça. Donc, ce que vous pouvez faire. Vous pouvez aller vous positionner quasiment au niveau du bouton. Et là, vous allez pouvoir essayer de reproduire au plus précis. Le mieux, c'est même de reproduire avec des valeurs qui sont les plus rondes possible. Donc, voilà, imaginons que je me mette sur le bouton. Donc là, j'ai l'air d'être à peu près bon au niveau de la hauteur, donc il ne faut pas hésiter à zoomer aussi. Le raccourci pour zoomer, vous pouvez faire Commande + et Commande – pour revenir en arrière. Donc là, il ne faut pas hésiter à ajuster, et vous remarquerez que la petite magie de Sketch, contrairement aux problématiques qu'on avait avec PhotoShop, c'est que quand vous modifiez la forme, eh bien, l'arrondi ne change pas, et ça c'est fantastique, parce qu'avec PhotoShop, par exemple, ou avec d'autres logiciels, avant, lorsqu'on étirait une forme, on étirait aussi l'arrondi et ça devenait très moche. Donc là, on est assez précis, on va aller là-dessus, et est-ce qu'on est sur des chiffres ronds ? Voilà, donc, on remarquera que mon bouton exemple n'avait pas un chiffre complètement rond, on va pouvoir faire un bouton encore plus précis ensemble. Donc voilà, sur la hauteur, je vais mettre 29. Voilà, ça me semble plutôt sympa. Et au niveau de l'arrondi, je pense que vu qu'on était sur du 5, je suis parti sur du 4 pour être un peu plus fin, donc on va dire qu'on a un petit peu optimisé notre bouton, voilà. Là, au niveau de la couleur, on va récupérer cette couleur. Il suffit d'aller ici, et voyez qu'il y a une petite pipette, et lorsque vous cliquez sur la petite pipette, vous pourrez aller récupérer la couleur que vous voulez où vous voulez. Par exemple, je vais cliquer là et je vais récupérer la couleur et transformer ma forme. Donc là, maintenant, je vais pouvoir repositionner ma forme où je le souhaitais… … et j'ai du coup un style qui est assez cohérent avec ce que je voulais faire. Pour le bouton qui est juste à côté, je vais pouvoir, en maintenant alt et en déplaçant, dupliquer ma forme, et pareil, je vais aller directement récupérer la couleur que je veux sur la forme. Voilà. Et après, au niveau de la largeur, dans tous les cas, je n'ai pas encore de conflit dedans, donc il faudra que je l'ajuste lorsque je vais le remplir. Donc voilà, pour cette vue globale des différents paramétrages qu'on peut avoir sur une forme. Là, c'est des formes qui sont très simples, mais vous comprenez vite qu'avec tous les outils qu'il y a ici, vous pouvez entrer beaucoup plus dans le détail et la complexité de forme. Dans la vidéo suivante, on va voir comment faire pour utiliser une image pour remplir une forme et puis paramétrer un petit peu ici le rendu pour avoir un peu le même aperçu que notre avatar juste au-dessus.

L'essentiel de Sketch

Concevez des interfaces utilisateur applicatives pour les mobiles et pour le web avec Sketch. Créez des éléments d'interface, du simple bouton au pictogramme plus complexe, etc.

1h53 (25 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !