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

Organiser ses calques

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à bien renommer, à organiser et à structurer vos calques et vos fichiers. Ainsi, favorisez le retour à un projet existant et le travail collaboratif.
07:03

Transcription

Maintenant que nous avons construit notre artboard inspiré d'une première originale, mais en étant personnalisée histoire de se l'approprier, on va pouvoir vraiment préparer le fichier de manière à ce qu'il puisse être réutilisé plus tard, et pour ce faire, il va falloir qu'on organise un petit peu tous les calques, et puis surtout que ça soit propre au niveau des renommages. On va aller un petit peu explorer rapidement le fichier exemple qui est juste là et vous remarquerez que l'on a quand même quelque chose d'assez propre vu qu'on utilise quasiment que des symboles, on a déjà dans cette vue-là quelque chose de propre. Pareil pour ici, on va avoir deux symboles, et ensuite on a tout qui est bien rangé par dossiers, et à l'intérieur vous allez avoir les différents éléments qui vont eux aussi être entrés par dossier. Vous remarquerez qu'ici je sais à quoi m'attendre, car c'est noté « pers », comme le bouton Personne, mais juste à côté on a le Groupe 2, donc quelque chose qui n'a pas été renommé, et globalement si jamais je ne regardais que là, je ne saurais pas à quoi ça correspond. Alors que si je leur donne « btn reserver », voilà, beaucoup plus cohérent, et puis pareil plutôt que d'avoir à cliquer dessus, la personne peut directement s'y retrouver. Si par exemple vous travaillez avec d'autres designers, ou avec des développeurs qui récupèrent vos fichiers, ce sera beaucoup plus agréable pour eux d'avoir quelque chose de propre et d'organisé comme ça. Ensuite, voilà son bouton, il y a tout qui est renommé. Si je vais sur le contenu, il y a des textes et puis le renommage et l'en-tête, on a l'icône clock, ensuite background pour parler de l'image de fond. Voilà, c'est organisé un minimum. Ensuite, je vais faire un tour dans les symboles qu'on a utilisés depuis le début. Alors, je ne vais pas sur les nouveaux symboles, mais je vais aller sur nos symboles du fichier exemple. Là, vous remarquerez que c'est un peu pareil, ça a été organisé et renommé. Donc là, on est bien sur carte. Vous avez donc bien pers avec le bonhomme qui est dedans, le groupe qui compose le bonhomme. Nous avons ensuite dessous ici, le nombre, et puis rectangle pour parler du fond de bouton, donc on pourrait le renommer plutôt fond... bouton. Bien entendu, il y a certaines normes qui peuvent être utilisées, j'aime bien utiliser btn fond, comme ça, ça donne un peu un contexte. Après ça, vous renommez avec vos propres habitudes. Là pareil, il n'y a pas eu de renommage, donc ça peut être btn prix, et puis voilà Time ici. Donc, on a quelque chose d'assez propre pour la carte. Ici, les renommages sont propres aussi parce que c'est un fichier qui a été récupéré directement dans ce que Sketch fournit, donc c'est propre. En anglais, bien sûr, c'est propre. Là pareil, on a renommé les choses de manière correcte, Donc, c'est tout bon. Maintenant, je vais vous montrer la différence avec les nouveaux symboles qu'on a intégrés quand on a construit ça ensemble pendant ce tutoriel. On va remonter. Nous avons ici donc le symbole carte. Là, dans la carte, on va voir des choses relativement propres, et là par exemple pour le fond bouton on va avoir rectangle 2, ce qui n'est pas très propre, on va mettre btn fond. Ensuite, au niveau de l'image fond, on a bien renommé en masque donc c'était tout bon. Donc, au niveau de la carte, on est propre. Ensuite, on va aller faire un petit tour de ce côté-là. Là ici on a Groupe, donc ça n'est pas très explicite. On va appeler ça aussi menu haut. Là, on a un nom qui donne la composition qu'on a faite lorsqu'on a fabriqué cette loupe, et on peut l'appeler loupe, ou si on veut garder l'appellation en anglais, on peut marquer search. Ensuite, le bouton pour revenir en arrière, et puis le nom. Et là, au niveau de ce bouton-là, on va avoir Bonhomme, le groupe de constitution dans Bonhomme, ça va on comprend, et puis là, pareil, btn fond, histoire de bien s'y retrouver. Donc, au niveau des symboles, on est propre. Et puis même quand on veut avoir le listing des symboles, on peut avoir quelque chose de propre. C'est vrai du coup à notre vue. Ici, on va avoir, donc, tout est bon pour notre exemple, et pour notre fichier de travail on va voir aussi, tout est bien en symboles propres, et on sait qu'à l'intérieur on va s'y retrouver facilement. De ce côté-là, on a encore des choses qui n'ont pas été vraiment bien finalisées, comme... nom ville... et date qu'on va pouvoir grouper avec l'image de fond. On va faire donc Commande + G, et puis on va appeler ça... en-tête... ville. Juste en dessous, on avait déjà groupé, mais on n'avait pas donné de nom. Donc ça, on va pouvoir l'appeler contenu. Juste ici, on va avoir un groupe parce que c'était nécessaire de faire un groupe pour pouvoir aligner là-dessus, mais maintenant qu'on a fait l'opération, on peut des fois aussi pour bien organiser, dégrouper, et comme ça, on a vraiment accès à tout. Et quand on a beaucoup de contenu comme ça, l'idéal c'est d'essayer de le structurer de manière un petit peu cohérente. Vous voyez que là on pourrait organiser le titre, ensuite son sous-titre. Là, il n'y a plus de cohérence. Donc, ce qu'on va faire, c'est qu'on va essayer de garder l'ordre. Donc là, on va remonter ... à quoi s'attendre, Nicolas, more, et puis l'avatar on va le mettre au début. Comme ça on peut facilement se retrouver dans l'ordre. Il faut savoir que Sketch, dès qu'il crée un nouveau calque, il va le créer par-dessus. Donc, par exemple, si je reprends l'exemple ici et que je rentre dedans. Quand je parle de par dessus, ça veut dire que si mon image fond je la passe juste au-dessus, eh bien, ça va passer au-dessus de mon texte. C'est comme si on empilait des feuilles. Alors, il va toujours créer vers le haut, donc pour vous organiser, vous pouvez organiser de bas en haut pour vous y retrouver. Ce qu'on a fait là, on sait qu'on a l'avatar qui est en haut, et ensuite on va redescendre, comme ça. Les dernières choses que je peux vous montrer par rapport à ce renommage et puis ce petit coup de propre à faire sur les fichiers, ça va être de tout simplement connaître le comportement des différents calques pour pouvoir bien travailler, et des fois vous avez besoin d'isoler certains calques et de ne pas en voir d'autres. Ça, vous pouvez le faire avec le petit œil qui vous suit depuis le début, vous l'avez certainement vu. Eh bien là, ce n'était pas renommé, donc je vais mettre, btn reserver. Et je vais pouvoir celui-là, par exemple, le cacher. Donc là, il est caché avec le petit œil. Et là, je le montre et après vous avez aussi la possibilité, vous voyez quand j'appuie sur Alt, de pouvoir bloquer mon calque. Et puis, si j'appuie encore sur Alt, là, je peux activer l'œil aussi. Donc là, il est caché, il est bloqué en appuyant sur Alt. Après, si jamais je rappuie dessus, il est visible, et puis si je rappuie encore un coup, il est débloqué. Alors, le gros avantage de bloquer un calque, c'est que par exemple quand on affine une zone, là, j'ai fini cette partie, je vais avoir envie de la bloquer. Donc, je vais appuyer sur Alt, je vais mettre le petit loquet, et là au moins je suis sûr que si je sélectionne un peu grossièrement mes éléments, ça ne va pas sélectionner cet élément-là et je ne risque pas de le déplacer sans faire attention. Par exemple, si je voulais attraper ce bouton-là et que je suis un peu haut, je peux attraper ça. Je suis obligé de faire Commande + Z pour revenir en arrière, alors que si je viens sur mon calque et que j'appuie sur Alt et je bloque, ça ne peut plus bouger, et donc je peux tranquillement travailler sur la zone que j'ai envie de travailler.

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 !