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 !
Table des matières de cette formation Figma (durée : 1h02m)
-
- Introduction gratuit 00:02:36
- Créer un contraste en éclaircissant ou en fonçant le fond 00:09:34
- Mettre un dégradé sur le fond pour faire ressortir le texte 00:07:31
- Flouter & colorer le fond + mettre en avant un mot avec une couleur 00:08:04
- Ajouter du texte dans un cartouche blanc, noir, en opacité ou avec du flou 00:10:32
- Décaler l'image et faire chevaucher le texte par dessus 00:10:30
- Intégrer le texte à une image détourée pour ne faire plus qu'un 00:13:04
- Conclusion 00:01:08
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Bonjour Adrien ;) Une nouvelle fois une formation intéressante et de qualité ! Je m'inspire beaucoup de tes conseils et cela me permet d'avancer dans ma reconversion professionnelle de Webdesigner ! Il me tarde de te retrouver au travers de nouvelles formations ! Eric
-
Super petite formation pour celles et ceux qui debutent.
-
Avec quelle version de logiciel ce tuto est-il compatible ?Figma
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le fichier Figma avec tous les exemples créés au cours de la formation.
note moyenne
avis laissés