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

Combiner des formes et créer un pictogramme

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez maintenant apprendre à combiner des formes simples. Il s'agit de recréer un pictogramme de l'interface mobile.
04:29

Transcription

Lorsqu'on va travailler dans le cadre de l'UI design, donc de la création d'interfaces, on va utiliser beaucoup de pictogrammes, comme on a donc sur notre plan de travail, le petit bonhomme qui est juste là, la petite horloge qui est là, et puis aussi la loupe et la petite flèche qui est juste ici. Mais ce sont des formes qui sont suffisamment simples pour ne pas avoir à utiliser l'outil plume comme on l'a utilisé juste au-dessus. On a besoin d'être très précis, on a besoin d'avoir des formes qui sont de petites tailles et qui donc sont très lisibles et donc parfaitement construites. C'est pour ça qu'en général, je vais récupérer les icônes directement dans des banques d'icônes qui correspondent vraiment au style que je veux utiliser dans mon travail. Ici, j'avais récupéré ce petit bonhomme qui est composé d'un cercle pour la tête, puis d'une autre forme un peu plus complexe pour le corps, et bien entendu, si jamais vous souhaitez créer ce propre petit bonhomme, vous pouvez le faire dans Sketch, et c'est ce qu'on va voir maintenant, mais bien entendu avec du vectoriel et sans toucher à la plume qui n'est pas assez précise pour ce genre de travail, mais en utilisant des formes de base. Alors, de quoi est composé ce petit bonhomme ? Il est composé d'une tête, d'un corps avec les épaules qui sont composées d'un gros cercle, des mains qui sont ici détachées avec un rectangle qui est un petit peu travaillé, et ensuite les jambes avec un rectangle aussi, mais aux bords arrondis. Donc, de manière très simple, pour arriver à concevoir ces éléments-là, on va pouvoir du coup, je vais reprendre un petit peu ce qui est à côté, créer un cercle qu'on va mettre tout en noir, créer un deuxième cercle qu'on va mettre lui aussi tout en noir pour avoir la tête et le haut du corps. Jusque-là, on est bon. Ensuite, pour avoir les jambes, pareil, c'est assez simple. Là, je vais vous le faire directement. On va faire un rectangle qu'on va mettre là. Pareil, on va enlever le boarder, on va le mettre en noir, et on va le mettre en centré par rapport aux autres éléments, c'est tout bon, et on va lui appliquer une bonne largeur. Donc ici, je vais reprendre aussi la largeur que j'ai calculée en utilisant ce petit bonhomme-là, et du coup je vois que c'est un 23 par 36, donc je vais lui appliquer les mêmes dimensions. Donc, 23 par 36, voilà. Et là, ce que je vais faire, c'est que du coup je vais réaligner tout le monde. Donc là, toujours pareil, si jamais il détecte qu'il y a des pixels qui sont légèrement déplacés pour tomber parfaitement sur des pixels, cliquez dessus, et ça permet vraiment d'ajuster ça proprement. Et là, ensuite il faut que je l'aligne aussi sur le bas, Voilà, donc là, j'ai la base de mon petit bonhomme. Maintenant, il va manquer cette forme qui est un petit peu plus complexe, mais vous allez voir qui est assez simple à faire. Comment ça se passe ? Il faut simplement que je récupère un rectangle. Donc, je vais faire un nouveau rectangle, voilà, auquel je vais donner les mêmes dimensions en largeur que notre cercle. Donc là, le rectangle est prêt, le cercle ici fait 40, je vais donc lui donner 40, et en hauteur, la moitié de ce cercle qui est 40 aussi, donc je vais mettre 20, Voilà. Et puis, je vais le positionner vraiment sur le bas de mon cercle, aligné, centré. Donc là, maintenant, si je valide bien que tout est centré, voilà, il y a un petit décalage de pixels, il nous le remet. Enfin, c'est parfait, et il faut que j'aligne le bas de mon cercle avec le bas de cette forme-là. Je décale encore, mais à chaque fois, on peut replacer. Et là, maintenant, j'ai vraiment tout qui est parfaitement aligné, il n'y a pas de décrochage, on a un bonhomme propre. Alors, cette forme-là, comment est-ce qu'on l'a travaillée ? C'est assez simple. Il faut prendre le bas seulement, les deux pointes qui sont là et les arrondir, parce que si jamais on fait juste un arrondi de forme, comme ici, eh bien, on perd la jointure avec le haut. Donc là, heureusement, dans Sketch, on peut faire des arrondis en double cliquant sur la forme, on retrouve les points d'ancrage et on peut faire des arrondis que sur les points que l'on sélectionne. Donc là, j'ai sélectionné les deux du bas et je vais pouvoir appliquer un arrondi. Vous pouvez même d'ailleurs, si vous en avez envie, si vous trouvez que ça peut être plus sympa, créer un arrondi un petit peu plus marqué, mais là, en général, ça doit être à peu près sur du 6 ou du 5. Donc, on va partir disons sur du 5, voilà, comme ça, et on va utiliser aussi cette valeur pour arrondir le bas des pieds du bonhomme sur 5 pour avoir vraiment quelque chose d'uniforme. Et là, comme vous voyez, on a notre petit bonhomme qui a été recréé. On va pouvoir le comparer avec notre bonhomme. On se rend compte qu'on a juste les jambes qui sont un peu plus longues. Donc si jamais on a envie, on va pouvoir ajuster les jambes pour les remettre, voilà, ça c'est tout bon, on va garder notre petit bonhomme qui est juste là, et puis pour pouvoir l'utiliser, on va pouvoir créer un groupe… … voilà, histoire de pouvoir avoir notre bonhomme.

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 !