CATALOGUE Design et Infographie Formation Figma Atelier Figma - Design d'application Comment créer un effet glacé et flouté sur un élément

Comment créer un effet glacé et flouté sur un élément

Glass effect
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Atelier Figma - Design d'application
Revoir le teaser Je m'abonne
4,5
Transcription
159,00€ 95,40€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
159,00€ 95,40€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Étapes pour réaliser l'effet glacé

Objectifs

L'objectif de cette vidéo est de vous apprendre à créer un effet glacé et flouté pour mettre en avant un élément de design.

Résumé

Découvrez comment ajouter un effet glacé et flouté à un élément dans vos projets de webdesign.

Description

Dans cette leçon, nous abordons la création d'un effet glacé et flouté, couramment utilisé dans le webdesign moderne. Cette technique permet de flouter l'arrière-plan d'un élément pour le mettre en avant de manière esthétique.

Nous commencerons par la création d'un rectangle avec un dégradé radial, utilisant une couleur bleue pour correspondre à notre thème. Ensuite, nous ajouterons une forme ressemblant à une carte de crédit avec un effet de blur en arrière-plan.

À travers cette vidéo, vous apprendrez à manipuler l'opacité et à ajouter des effets de background blur personnalisés, incluant des dégradés de couleurs pour obtenir un résultat professionnel et attrayant.

Cet effet est particulièrement populaire dans les applications et sites web modernes, offrant une touche élégante et sophistiquée.

Voir plus

Questions fréquentes

Pourquoi utiliser un dégradé radial pour cet effet?
Le dégradé radial permet de créer un effet visuel attrayant qui aide à focaliser l'attention sur le centre de l'élément.
Comment ajuster l'opacité pour obtenir l'effet désiré?
Pour ajuster l'opacité, utilisez les paramètres de votre outil de design pour diminuer la transparence et ainsi rendre l'effet de flou plus subtil.
Quel est l'avantage d'utiliser le Background Blur?
Le Background Blur permet de créer une séparation visuelle entre l'élément et son arrière-plan, faisant ainsi ressortir l'élément principal.

Programme détaillé

8 commentaires
4,5
8 votes
5
4
3
2
1
pa12
Il y a 1 an
Je viens de débuter la formation mais quel dommage de ne pas avoir le fichier de travail avec... Une grosse perte de temps pour les images, les icones...etc. Pouvez-vous svp ajouter ce fichier à télécharger?
jc.mosca
Il y a 2 ans
Comme dit plus haut, mise à part les centaines de "du coup" et "en fait" plutôt agaçants, c'est comme d'habitude chez Elephorm une formation enrichissante. J'ai mis seulement 4 étoiles car il manque la démonstration des overlays, des contraintes, des listes à puces et pas mal d'autres. Ce serait bien qu'Elephorm fasse des mises à jour de ses formations.
ousmane.ndia
Il y a 2 ans
Bien pour apprendre les bases, mais manque les nouveautés de 2022.
nicolas.dessis
Il y a 2 ans
Merci !
pioupiou06
Il y a 2 ans
Super formation ! très bien expliquée !
pulpozien
Il y a 2 ans
Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super
maellechancerelle
Il y a 3 ans
Super formation!!
Millenium
Il y a 3 ans
Cette formation est vraiment au top ! Je ne connaissais rien de Figma (étant "seulement" développeur à la base) et j'ai appris beaucoup de choses, je recommande donc cette formation; le formateur est très sympathique et professionnel dans sa pédagogie, c'est très agréable à suivre. Je recommande par contre d'avoir au moins deux écrans (voir trois) pour suivre la vidéo et pratiquer/prendre des notes en même temps.

Seul bémol par contre, pitié Elephorm, mettez les fichiers de travail avec la formation... (Ce n'est pas la seule sur laquelle il manque les fichiers d'ailleurs); mais mettez-les, ça évite d'aller chercher à droite et à gauche des SVG que l'on doit convertir, des images, etc...

A part ça, super formation !