Dans ce tuto Figma en vidéo, nous allons voir ensemble comment placer du texte sur une image/photo de différentes façons.
Cela peut être dans le cas d'un blog pour faire défiler vos derniers articles dans un slider, une landing page qui présente un produit ou un service, ou tout simplement le premier visuel que l'on va voir en arrivant sur votre site web.
Important : La formation peut être suivie avec un autre logiciel que Figma comme Adobe XD par exemple, car le principal intérêt de cet atelier est d'apprendre les techniques & astuces permettant de placer du texte sur une image en Web Design.
Au programme de cet Atelier WEB DESIGN : Apprendre à placer du texte sur une image
Voici les notions couvertes dans cette formation en ligne :
- Foncer ou éclaircir le fond d'une image pour faire ressortir le texte,
- Mettre un dégradé sur le fond et garder sur la droite les couleurs originales de l'image,
- Ajouter une légère ombre portée sur le texte pour le faire décoller du fond,
- Mettre en avant un mot grâce à la couleur dominante de l'image,
- Flouter le fond pour donner plus de place au texte,
- Coloriser le fond grâce aux options de fusion,
- Mettre en place différents cartouches (blanc, noir, en opacité, flou) sous le texte et ainsi garder les couleurs de la photo originale,
- Décaler une image et faire chevaucher le texte par dessus pour donner plus de force et de profondeur à votre design,
- Intégrer le texte à une image détourée pour ne faire plus qu'un.
- et d'autre astuces encore...
Le fichier Figma contenant tous les exemples créés au cours de la formation est inclus avec le tuto.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrer des difficultés pendant ou après le visionnage de la vidéo.
Bon tuto !
Avis des apprenants