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.

Photoshop CC pour les designers UX

Utiliser les outils de texte

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec Didier Mazier, découvrez tout ce qu'il faut savoir sur la préparation de textes pour le web avec Photoshop.
05:58

Transcription

Pour un concepteur d'interface web, le texte ne revêt pas la même importance en termes de gestion que pour un designer print, par exemple. Néanmoins, il y a quelques points qu'il va falloir considérer de manière d'une part à vous assurer de la qualité de votre travail, et puis d'autre part pour également faciliter votre travail, gagner en rapidité et en productivité. La première des choses à considérer est que les caractères peuvent être lissés. Par défaut, le lissage est relativement net, mais on peut changer le lissage de ces caractères. Donc en fonction du type d'interface que vous allez travailler, en fonction également de la façon dont ce texte va s'intégrer par exemple dans un bouton, vous allez pouvoir éventuellement changer le lissage de ses caractères. Si on zoome sur ces caractères, vous voyez qu'ici on a un lissage et que ce lissage va varier. Je peux accentuer le lissage ou réduire le lissage. Par défaut, on est sur net, mais on peut également aller sur précis, « Precise », qui va permettre d'avoir des textes légèrement plus crénelés mais qui, dans certains cas, s'afficheront mieux à l'écran. Bien entendu, il faut revenir à une taille normale. Il faut également valider sur un périphérique mobile au niveau de l'export des maquettes que l'on a fait que ce lissage est approprié. La deuxième des choses c'est que lorsque vous allez placer des textes, vous allez avoir la possibilité, comme toujours, de changer la taille de ces textes. Il faut comprendre que les textes se trouvent sur un calque de texte. Vous voyez qu'ici nous sommes sur un calque de texte. Et qu'à partir du moment où vous êtes sur un calque de texte, vous avez la possibilité de gérer la transformation. Avec Command-T sur Mac ou Control-T sur PC, vous allez pouvoir transformer ce texte. Et donc vous n'aurez pas besoin d'aller changer la taille du texte corps par corps. Mais il ne faudra pas déformer ce texte. La solution consiste donc à cliquer sur une des poignées d'encrage, appuyer sur la touche Majuscule, de manière à réduire et augmenter proportionnellement le texte. Et pour le faire à partir du centre, il suffirait, toujours avec la touche Majuscule enfoncée, d'appuyer sur la touche Alt, Option, et vous pouvez agrandir et réduire votre texte à partir du centre. Vous voyez donc que là on a un système qui va nous permettre de gagner du temps. Nous allons appliquer la transformation et puis il faut comprendre qu'avec l'outil Texte, quand vous allez placer des textes, vous aurez la possibilité de placer différents types de texte : du texte horizontal, du texte vertical, et éventuellement de masquer des images avec du texte. Notez que si vous cliquez vous allez placer du texte sur un tracé et que si vous cliquez et tirez vous placerez du texte à l'intérieur d'un bloc. Selon ce que vous allez avoir à réaliser, vous allez travailler soit avec des blocs de texte, où vous allez pouvoir coller du texte ou saisir du texte. S'il s'agit de réaliser par exemple des boutons, vous aurez plutôt intérêt à utiliser du texte sur un tracé, car ils seront plus faciles à positionner. Nous reviendrons dans une vidéo ultérieure sur les boutons, puisque nous utiliserons les effets de calque pour réaliser des boutons. Bien entendu, en ce qui concerne les textes, vous accédez aux réglages principaux de texte qui se trouvent sur le panneau des options et vous allez pouvoir également appeler la palette de texte en cliquant sur cette icône où vous pourrez régler comme avec n'importe quel logiciel PAO ou bureautique les caractères et les paragraphes. Lorsque vous avez à réaliser une maquette pour une interface web ou une application mobile, vous pouvez être amené à avoir besoin de vérifier comment un texte va être présenté selon que l'on va utiliser telle ou telle police de caractères. Donc bien entendu, on peut sélectionner le texte, et puis on va pouvoir ici choisir les différentes polices de caractères. Mais nous sommes sur un fond qui va être en vidéo inverse, puisque le texte est sélectionné. Il y a une astuce qui va vous permettre de travailler beaucoup plus rapidement, qui consiste, une fois que vous avez sélectionné votre texte à positionner votre curseur à l'intérieur du champ de police et à masquer la sélection de manière à ce que, sans que la sélection soit supprimée, elle soit que de manière à ce que cette sélection qui ne sera pas supprimée ne soit pas visible. Et donc on aura pas le texte sur fond noir, mais le texte normal. Pour opérer cette commande sur Mac, vous allez faire Command-H, sur PC Control-H, et le texte actuellement est toujours sélectionné, mais cela ne se voit pas. Et puis avec les flèches du clavier, vous allez pouvoir dérouler les différentes polices et valider les options. La flèche du bas va vous permettre de dérouler toutes les polices qui sont présentes et de vérifier comment va se présenter votre texte avec ces différentes polices. Et puis lorsque vous aurez choisi la police qui correspond à vos objectifs, vous pourrez reprendre le curseur normal, et si vous resélectionnez à nouveau votre texte, celui-ci sera sélectionné en vidéo inverse, normalement. Cette petite astuce va vous permettre, lorsque vous réaliserez des interfaces, de pouvoir beaucoup plus rapidement valider les différentes options des polices de caractères.

Photoshop CC pour les designers UX

Prototypez des applications ainsi que des sites avec Photoshop. Fournissez des maquettes filaires servant aux tests UX, à la validation client et de support au développement.

1h17 (25 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :20 avr. 2017
Mis à jour le:10 juil. 2017

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 !