Atelier WEB DESIGN : Apprendre à poser du texte sur une image
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Atelier WEB DESIGN : Apprendre à poser du texte sur une image

Adrien Gazaix

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction
Leçon 2
Créer un contraste en éclaircissant ou en fonçant le fond
Leçon 3
Mettre un dégradé sur le fond pour faire ressortir le texte
Leçon 4
Flouter & colorer le fond + mettre en avant un mot avec une couleur
Leçon 5
Ajouter du texte dans un cartouche blanc, noir, en opacité ou avec du flou
Leçon 6
Décaler l'image et faire chevaucher le texte par dessus
Leçon 7
Intégrer le texte à une image détourée pour ne faire plus qu'un

Plan détaillé du cours

Leçon 1Introduction
02m36
Leçon 2Créer un contraste en éclaircissant ou en fonçant le fond
09m34
Leçon 3Mettre un dégradé sur le fond pour faire ressortir le texte
07m31
Leçon 4Flouter & colorer le fond + mettre en avant un mot avec une couleur
08m04
Leçon 5Ajouter du texte dans un cartouche blanc, noir, en opacité ou avec du flou
10m32
Leçon 6Décaler l'image et faire chevaucher le texte par dessus
10m30
Leçon 7Intégrer le texte à une image détourée pour ne faire plus qu'un
13m04
Leçon 8Conclusion
01m08

Avis des apprenants

Détail des avis
128
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
David Mortier
David Mortier
Publié le 07/04/2022
C'était un de mes points faibles en webdesign. J'ai appris beaucoup en peu de temps. Super formation
Adrien Gazaix
Adrien Gazaix
Super, c'est que le tuto est réussi :) Bonne continuation à toi et si tu veux aller plus loin avec un cas concret tu peux regarder ma formation Webdesign pour débutants.
Eric Reynaud
Eric Reynaud
Publié le 19/09/2021
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
Adrien Gazaix
Adrien Gazaix
A très bientôt pour de nouveaux tuto 😉
Patrick Delobbe
Patrick Delobbe
Publié le 03/09/2021
Super petite formation pour celles et ceux qui debutent.
Adrien Gazaix
Adrien Gazaix
Merci pour ton retour, oui en effet cet atelier a été pensé pour les débutants en Web Design :) A très vite pour d'autres ateliers sur tuto.com !

Vos questions sur le cours

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.

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données