Photoshop CC pour les designers UX

Appliquer des effets de calque

Testez gratuitement nos 1298 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
À l'aide des effets de calque, ajoutez un effet de relief aux éléments incitatifs. Ajoutez notamment des boutons et des pictogrammes à cliquer.
04:37

Transcription

Nous avons ici, un bouton d'appel à l'action. La mode actuellement est au matérial design et flat design, c'est-à-dire à des design qui ne présente pas d'effets de reliefs, d'ombrages, mais les modes changent souvent, et on s'est rendu compte également qu'avec le matériel design, souvent les boutons n'étaient pas perçus par les utilisateurs comme étant des boutons. Et donc on avez des taux de clics qui étaient parfois inférieurs. Vous pouvez donc avoir besoin d'utiliser des effets qui vont être des effets vous procurant du relief ou des ombrages. On va pouvoir obtenir ces effets très simplement avec photoshop, calque par calque, en utilisant des effets de calque. Nous allons commencer par le texte. Nous sommes ici, sur un document qui n'est pas sur un espace de travail, il s'agit donc d'un document photoshop normal. Pour ce calque bouton d'appel à l'action, donc qui est un calque texte, nous allons ici, choisir un des effets qui nous intéresse. Notamment dans le biseautage, estampage. Et vous remarquez ici, que j'ai un effet de biseautage et d'estampage. Nous allons légèrement modifier cet effet de manière à ce qu'il corresponde à ce que nous souhaitons. Premièrement, il va falloir choisir ici, la couleur du produit, c'est-à-dire la couleur des tons fonçés. Nous avons utilisé ici, une couleur qui est un peu trop fonçé, par défaut d'ailleurs, elle est noire, et nous allons peut-être aller vers une couleur orangée de manière à avoir quelque chose de plus en harmonie avec le fond. Et puis, bien entendu, il va falloir jouer sur la profondeur, la taille et éventuellement le flou. Nous avons donc ici, un outil, qui est un outil performant. On peut combiner les effets et l'on peut travailler sur les différents angles de manière à obtenir quelque chose qui corresponde à ce que nous cherchons. Pour du texte, il serait intéressant ici, notamment de travailler avec un estampage oreiller qui va permettre d'avoir l'impression que le texte a été estampé à l'intérieur du fond. Nous allons maintenant cliquer sur < et puis nous allons voir ce que nous pouvons faire avec le rectangle arrondi, notamment en combinant plusieurs effets. Premièrement, nous allons ici, rechercher, de la même façon, un biseautage estampage. Et nous allons, non pas chercher un estampage oreiller, mais un biseau interne. De manière à avoir un effet de relief tout simple sur notre bouton. Nous allons régler maintenant, les différents éléments, nous pouvons augmenter la taille de notre biseau, nous pouvons, égalemet, augmenter légèrement le flou, et nous pouvons, voire, changer la couleur en obtant ici, pour une couleur qui va être, peut être, un petit peu plus foncé, si nous le souhaitons. Nous avons utilisé un effet. Nous pouvons combiner les effets et ajouter par exemple, une ombre portée. Nous avons ici, ajouté une ombre portée qui va pouvoir être réglée de la même façon avec la distance, de l'ombre par rapport à l'objet qui la projette, le Grossi, c'est-à-dire la taille de cette ombre portée, et puis sa diffusion, c'est-à-dire son atténuation. Nous pouvons jouer également sur l'opacité de manière à avoir quelque chose qui soit plus réaliste et nous pourrions changer la couleur également de cette ombre. Et nous allons faire <. Vous voyez que maintenant, nous avons sur ce calque 2 effets. Lorsque nous allons exporter cette image, il va falloir faire attention car ici, vous voyez que l'ombre se diffuse et il ne faut pas qu'elle soit coupée. Nous allons donc pouvoir utiliser un outil intéressant que je vais vous montrer. Nous allons prendre ce calque et le supprimer. Et nous avons maintenant, un calque ici, qui est un calque transparent, que nous pouvons également supprimer puisqu' il ne nous sert à rien. Et nous pouvons maintenant faire un rognage de l'image. Nous allons aller dans le menu <, < et nous allons demander à rogner d'après les pixels tranparents. Cela veut dire que l'image va être recadrée sur notre bouton, et comme l'ombrage n'est pas transparent, il ne s'agit pas de pixels transparents puisque le pixel transparent c'est l'absence totale de pixels. Nous allons avoir un recadrage sur notre ombre sans avoir besoin de calculer exactement où se trouve celle-ci. Et notre bouton est prêt à être, maintenant exporté avec la totalité de l'ombre qui s'affichera correctement lorsque cet élément sera intégré dans nos conceptions web.

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.

1h18 (25 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :20 avr. 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 !