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

Créer et ajuster des textes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez apprendre à créer et à paramétrer un texte dans Sketch. Suivez le guide.
07:47

Transcription

Maintenant que nous avons tous nos éléments graphiques qui sont positionnés plus ou moins précisément, mais ça on verra juste après comment tout ajuster parfaitement au pixel et que nos images sont aussi insérées et bien masquées, nous allons voir comment gérer les différents textes et les insérer. Déjà, qu'est-ce que nous avons comme textes sur notre fichier exemple ? Nous avons les textes des différentes cartes, les textes des menus et de la barre iOS, les textes de cet encart-là, et puis le texte ici. Alors, on va faire un petit extra sur cette session. On ne va pas travailler que sur la carte, on va aussi travailler sur ce petit bloc de texte-là, ça vous permettra d'avoir toute la vision et tous les outils liés au texte. Alors déjà, commençons par le nom de la ville d'expérience. On va cliquer sur Insérer et sélectionner Texte, et on a juste à cliquer sur notre board de travail pour avoir un premier texte fictif qui est positionné. Là, on est encore dans l'édition et on a juste à faire Échap pour en sortir. Alors, pourquoi est-ce que peut-être de votre côté vous avez un style de texte qui est différent ? Parce que c'est le dernier style de texte que j'ai utilisé. Donc, imaginons que je modifie ce texte-là, je vais donc le mettre par exemple en rouge, et puis sur une taille qui est un petit peu plus grosse, je vais faire donc là, pour sortir d'édition, Échap, et que je crée un nouveau texte. Donc, ce coup-là, au lieu de cliquer sur texte je vais faire avec T raccourci clavier et cliquer, et on va récupérer le même style, ce qui est super pratique lorsque vous avez beaucoup d'éléments à refaire et que vous êtes en train de travailler un petit peu à la chaîne, eh bien, au moins vous allez récupérer les derniers styles plutôt que de paramétrer à chaque fois, un certain gain de temps. Donc là, je vais vouloir faire ce nom-là. Je vais l'appeler Paris, car notre expérience concerne Paris, et au niveau de la taille, je sais que je suis à 20, et puis la couleur, je vais pouvoir, soit avec la pipette, allez récupérer directement un pixel bien précis pour avoir la bonne couleur. Donc là, bien sûr, blanc sur blanc, je ne vois rien, je vais y ajuster sur ma petite ville. Là, pareil, le positionnement est assez aléatoire. On verra après comment le mettre de manière plus précise, et puis comme vous voyez, contrairement à au-dessus, on ne voit quasiment pas le texte. Mais ça, ça n'est pas un souci, et on va pouvoir l'ajuster après. Donc en attendant pour le voir, je vais le garder en noir, et puis je passerai en blanc tout à l'heure. Donc, j'ai Paris que je vais garder là-dessous. Ensuite, Nouveau texte. On va s'occuper de la date. Là, la date, on va mettre un petit 08-09-2016. Ensuite, on va pouvoir ajuster aussi la taille. Donc là, vu que je ne me rappelle pas, je vais juste aller cliquer dessus. Open Sans, Regular, ça c'est tout bon. Je suis en 14, je vais revenir dessus, Open Sans, Regular, je bascule en 14. Donc là, c'est facile parce qu'il y a le fichier exemple auquel on peut accéder. Si vous avez juste une image, il va falloir soit que vous connaissiez la police d'écriture qui est utilisée, soit que vous essayiez d'en trouver une qui s'en rapproche pour réussir à garder le même style que l'inspiration. Sinon, sur certains sites Internet, vous avez aussi la possibilité avec l'inspecteur, directement, de connaître la police d'écriture, la taille et tous les paramètres. Là, la police utilisée Open Sans est une police Google Font qui est gratuite, libre de droits d'utilisation, donc je vous conseille déjà de piocher dans cette bibliothèque qui est déjà très riche en différences. Donc là, maintenant, j'ai ma date, et je vais devoir continuer avec le texte qu'il y a dans mes boutons. Donc là, je vais pouvoir me mettre dessus puisque c'est en noir. Je vais du coup mettre ça pour 8 personnes. Là, vu que je suis sur un fond noir, je peux directement mettre la bonne couleur. Au niveau de la taille, je me rappelle que je suis en 18. Donc, vous pourrez bien sûr aller vérifier dessus si vous voulez, et puis je vais aller à côté. Pareil, j'appuie sur T, et là, ça va coûter, allez 584 euros. Je les positionne, et vous pouvez utiliser les touches directionnelles du clavier pour pouvoir positionner un élément quand il est sélectionné. Donc là, je le positionne juste à l'œil, ça ne sera pas très précis, mais vous verrez après comment faire pour que ça soit un peu plus propre. La date que vous avez là, on va la mettre là-haut et puis Paris, on va le mettre ici. Donc là, voilà, on a globalement les éléments qui composent la carte. C'est encore loin d'être aussi propre qu'au-dessus. Pour ce qui est de ce bloc texte qui est juste là, ça va être pareil. On va donc faire T, on va commencer à taper, on va être sur quatre jours, allez. Quatre jours... ... d'expérience, là on voit rien, donc je vais basculer en noir, 4 jours d'expérience, c'est très bien. Au niveau des tailles, vous allez dessus, pareil, par exemple là, on est en Bold, Noir et 24. Très bien. Donc là, Open Sans, Bold... ... et 24. Ensuite, on a un autre style de texte qui est juste en dessous. Donc, on va recommencer avec T, on va mettre « Avec votre hôte, » qui s'appellera « Amy ». Comme la photo qu'on a récupérée tout à l'heure. Là, au niveau du style, on doit être certainement en Regular à nouveau, et au niveau de la taille, peut-être un petit 18, on va aller vérifier ça dessus. On est à 16, un petit peu trop... 16. Vous remarquerez qu'il est très intéressant de récupérer vraiment les proportions des exemples que vous trouvez, car les différences entre les tailles de polices ont vraiment une importance sur l'harmonie et la facilité de lecture. Pareil pour les espacements, les choses comme ça. Je vous conseille de vraiment vous baser sur l'exemple. Donc là, par exemple, je peux prendre mon texte, et je vais aller le mettre un petit peu par-dessus le texte qui est déjà en place, et puis je vais positionner vraiment pour pouvoir récupérer les mêmes espacements. Pareil, j'ajusterai ensuite tous les alignements quand je vous aurai montré comment on gère la suite. Ce texte-là va être dans les mêmes proportions que ce texte-là. Donc, je vais pouvoir le dupliquer en appuyant sur alt, et ensuite je déplace pour le garder dans un autre bloc de texte, et là, j'ai encore un style un petit peu différent à quoi s'attendre, et je vais rajouter ça. Donc, « À quoi s'attendre ». Et lui, je crois qu'il est un tout petit peu plus gros, non, toujours pareil, 18, mais par contre en... semi-bold. C'est ça, un peu plus grand c'était 18. Pareil, pour gérer vos espacements, vous pouvez revenir un petit peu sur l'exemple. Si c'est une image, je vous conseille de vous positionner sur l'image, et puis ensuite, vous ajustez bien entendu à chaque fois après avoir fait comme exemple, vous pouvez derrière ajuster à votre sauce, à votre convenance. Là, au niveau des alignements, pareil, je vais faire un peu de manière aléatoire juste avec les premiers indices de Sketch. Et je vous montrerai ensuite comment rentrer un petit peu plus dans le détail des alignements Là, je vais mettre un texte fictif, sinon vous pouvez récupérer bien entendu le texte que j'avais déjà mis là. Ça n'est que de la rédaction. Là, comme vous le voyez, ça écrit sur une seule ligne lorsque je fais un copier-coller parce que du coup ça étire mon bloc. Si j'ai envie, je peux juste prendre le coin de mon bloc, et là, je vais définir la largeur autorisée du bloc pour qu'il n'y ait pas de problème. Pareil, quand je fais un copier-coller, il y a certains styles qui ne sont pas récupérés. Donc là, très simple, j'ai juste à sélectionner « more ». Le vert est le même vert que le bouton pour avoir une harmonie, et je vais pouvoir aller sélectionner le vert. Donc, vous pouvez avoir un texte qui est d'une couleur différente, même s'il est dans le même bloc, ce n'est pas un souci. Tout est créé, nous avons on va dire notre base aussi ici de nos différents blocs. Peut-être que là il y a un petit peu plus d'espace. On verra après pour vraiment avoir des espacements qui sont très harmonieux et cohérents entre tous les blocs. Je vais descendre ça en bas et on verra ensuite pour les alignements.

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 !