L'essentiel de Sketch

Peaufiner les vues dans Sketch

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Finalisez vos deux vues à l'aide des techniques et des outils de base. Vous allez faire un point sur tout ce qui a été vu précédemment.
07:19

Transcription

Maintenant que vous avez toutes les techniques et outils de Sketch pour finaliser la deuxième board, vous pouvez y faire, soit seul, sinon avec ces vidéos où je vous accompagne. Donc, on va commencer par la conception du menu. On va récupérer le titre Paris, Police et Taille des polices étant identiques, on va juste basculer la couleur sur la couleur adaptée. On va renommer ça. Donc, « Expériences en ville ». On va centrer dans le document et on va aussi mettre le texte en centré. Pourquoi ? Car si jamais vous voulez changer le texte, eh bien, au moins votre texte reste centré, petite Commande + Z. Ensuite, on va venir y aligner avec la loupe, et puis on va devoir ajouter la flèche. Alors, histoire de faire mieux que l'exemple que je vous ai montré, on va carrément aller récupérer la flèche officielle dans le template d'iOS. Ici, c'est pour les polices qui manquent, ça n'est pas grave, nous, nous voulons juste l'icône, et là on va aller directement récupérer une des flèches iOS, Commande + C, Commande + W pour fermer le document, on retourne chez nous, et Commande + V. On va du coup basculer sur la bonne couleur, et pour s'assurer la cohérence entre les icônes, vous remarquez que la loupe est un petit peu trop petite. On va bien appliquer un 23 de plus sur la hauteur, en ayant bien lié les deux valeurs pour que la loupe ne se déforme pas. Ensuite, nous allons tout aligner en centré. Ça c'est bon et il va manquer juste d'aligner bien nos icônes sur les bords de notre layout pour que ça soit cohérent. On va prendre la petite loupe, ça c'est bon, et puis la petite flèche. Parfait aussi, on va vérifier que c'est bien centré, parfait. Je recache le layout, et là, maintenant, on a un joli menu qu'on va pouvoir grouper avec Commande + G. Ce menu, on va faire en sorte aussi de bien l'aligner pour qu'il y ait un espacement en haut et en bas qui soit cohérent, pour que ce soit harmonieux, on va pouvoir, au lieu de tout reconstruire sur le document, le copier. Et là, ce qui est magique avec Sketch, c'est qu'on fait un petit Commande + C et on a juste à faire Commande + V de l'autre côté. Il faut bien sélectionner un élément de l'autre board, un petit Commande + D de l'autre côté et l'icône est exactement en place. On va recommencer avec le menu haut. On va faire Commande + C, et puis Commande + V, et là je refais la même erreur en ne sélectionnant pas un élément de l'autre board. Là, Sélectionner Commande + V et ça les positionne en place aussi. Ensuite, pour faire notre petite image, ce qu'on va faire, c'est qu'on va récupérer celle-là, parce que comme je vous l'expliquais au début, la cohérence c'est que lorsqu'on va cliquer sur cette ville, ça va nous afficher le détail. Donc, il faut qu'on récupère la même photo. Donc, je vais cliquer ici, image de fond, Commande + C, de l'autre côté, ce coup-là, je ne me rate pas, Commande + V, et puis je vais l'avoir un petit peu plus haute. Donc, pour ce faire, je vais venir sélectionner mon masque que je vais étirer un petit peu et ça me permet d'avoir une grande photo, et je vais donc ajuster mon texte en dessous pour avoir une belle marge et que ça soit bien propre. Ensuite, qu'est-ce qui va manquer ? Il va falloir que je mette le titre à l'intérieur et que je remette la date. On va venir récupérer ce titre-là, voilà, par exemple, Commande + C, Commande + V, et puis le style est différent par rapport à sa taille qui est en 24, en bold et puis avec une opacité. Donc, c'est parti, taille 24, en bold, et en plus de ça, la petite option qu'on a sur les textes, on va pouvoir y mettre en uppercase, c'est-à-dire que ce sera en majuscules. On va ensuite venir l'aligner en centré, et puis on va mettre une petite opacité dessus pour que ça soit bien incrusté et bien joli. On va mettre 75. Maintenant, qu'est-ce qui va manquer ? Sur cette partie, il va nous manquer également la date. On va donc récupérer la date ici, Commande + C. On va venir la coller là, et puis on va la mettre juste en dessous en centré pour le moment, tout en centré par rapport à notre document aussi à l'arrière. Donc là, pour le moment, on est tout bon. Et là, vous me direz, on n'a pas encore mis la petite icône qui parle de l'heure. Eh bien, c'est à voir, je trouvais ça sympa de rester un petit peu plus sobre, on verra si on la rajoute ou pas. Ensuite, il manque juste à ajouter le petit avatar dans cette zone. On va récupérer, Commande + C. Et là, pour le coup, je vais faire Paste Here, ça veut dire qu'on va coller à l'endroit où j'ai cliqué avec mon curseur, et puis je vais avoir envie d'aligner en hauteur par rapport à ces éléments-là. Sauf que s'ils sont séparés et que je les sélectionne là, ça va être tout à fait bien. Ce que je veux, c'est vraiment par rapport à ce bloc-là, centrer. Donc, je vais devoir les grouper. Je vais donc faire un groupe. Ça devient plus qu'un seul bloc. Et donc maintenant, je vais pouvoir faire mon alignement, et ma photo, le border, on ne le voit pas parce que c'était un border clair pour un arrière-plan sombre. Maintenant, je vais devoir basculer sur un border plus foncé pour un arrière-plan clair, histoire d'avoir à peu près le même type de détachement sans changer l'opacité, comme ça on reste cohérent avec l'autre élément. Je m'assure que c'est bien aligné sur mon layout. Là maintenant, je suis bien aligné à droite sur mon layout pour que ça soit cohérent. Je peux comparer un petit peu avec l'original, allez voir si ça me plaît, ou si j'ai envie d'ajuster. Maintenant, vous avez tous les outils, donc vous pouvez un petit peu vous approprier le document. Pour finir, qu'est-ce qui va nous manquer ? Eh bien, il va nous manquer les boutons du bas pour pouvoir réserver. Les boutons très importants sinon l'espérance ne pourra pas être partagée. Je vais remonter cet élément-là qui était un petit peu bas, et je vais pouvoir utiliser l'outil Ligne qui est juste ici pour construire ma petite ligne qui va bien. Là, je vais vouloir, bien entendu, que ça soit aligné sur le layout, l'appareil... histoire d'être cohérent, Voilà. Maintenant que ma ligne est tracée, qu'est-ce qui va me manquer ? Eh bien, il va me manquer les deux boutons qui sont juste ici. Donc, il va surtout me manquer un peu de hauteur. Donc là, ce que je vais faire, c'est que je vais réduire un petit peu la hauteur de mon image qui était un petit peu gourmande. Je vais simplement faire un groupe avec Paris pour pouvoir l'aligner par rapport à mon image. D'ailleurs on voit que l'opacité manque un petit peu. Donc, je vais remonter un petit peu l'opacité de mon Paris. Voilà, je vais monter un peu mon texte, et tout regrouper, Commande + G, histoire que ça ne se rate pas. Voilà, je vais pouvoir remonter mon bloc ici. Et puis, plutôt que de refaire les boutons du bas, je vais venir récupérer ceux que j'ai déjà ici, ou pourquoi pas d'ailleurs histoire de finir un petit peu plus vite, parce que vous savez très bien le faire vous-même à partir de maintenant sélectionner et copier-coller les boutons que je vais grouper aussi pour pouvoir mettre en centré par rapport à mon document, et puis voilà, nous avons donc reproduit maintenant à peu près tout, sauf bien entendu ce bloc qui va être reproduit en dessous, mais je vous montrerai comment faire avec les symboles.

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 !