Créer un effet polaroïd avec des ombres portées et créer un dégradé

Visuel Pinterest avec le texte "Tutoriel : ombres portées et dégradés" sur Showit, avec deux visuels des effets réalisés

14 avril 2022 

Après l’outil lignes, le social grid, l’accès collaborateur, voici la dernière nouveauté… Les ombres portées et les dégradés !

Temps de lecture : 1 minute 30
Temps de vidéo : 11 minutes

Dans cette vidéo je te montre comment utiliser les fonctionnalités en prenant mon template Ash en exemple. Les templates te permettent de lancer ton site en un temps record car tu as +14 pages pré-construites, totalement modulables et personnalisables. Plutôt que de partir d’une page blanche, tu t’appuies dessus, ainsi que sur leur accompagnement, pour donner vie à ton site.

Grâce à la plateforme Showit c’est super simple en plus ! Si tu veux en savoir plus sur Showit et les raisons qui m’ont fait quitter WordPress, tu peux aller voir l’article 12 raisons de choisir Showit pour la création de ton site Internet.

Ombre portée et dégradé : le tutoriel

Créer un effet polaroïd avec des ombres portées et créer un dégradé

Sur quels éléments appliquer les ombres portées ?

Les ombres portées se trouvent dans l’onglet de la barre latérale droite, sous « effects » et peuvent s’appliquer sur : les images (même les PNG, avec fond transparent !), les icônes, les éléments vectoriels SVG, les textes…

Tu peux régler les ombres externes ou internes, à noter que les ombres internes ne sont pas disponibles sur tous les éléments.

Tu peux choisir la couleur et son opacité, son positionnement sur l’axe x et y, et la taille du flou.

Pourquoi utiliser des ombres portées ?

Pour créer plus de relief sur ton site, pour faire ressortir des éléments… Attention à ne pas en abuser pour que cela reste lisible, cela peut également donner un rendu kitsch si c’est trop présent et prononcé.

Tu peux créer une ombre légère pour mettre en avant ton freebie, sur un écran d’ordinateur ou tablette, sur un visuel de PDF…
Tu peux également donner un style sympa à tes typos en réglant le flou sur 0 et avec la couleur de ton choix pour un effet « texte superposé »…

Fais-toi plaisir et expérimente !

Sur quels éléments appliquer les dégradés ?

Les dégradés sont disponibles sur les formes et les arrière-plans de canvas (background).

  • Pour les formes il faut se rendre dans l’onglet « shape style » dans la barre latérale droite et sélectionner « gradient ».
  • Pour l’arrière-plan direction l’onglet « canvas background » dans la barre latérale droite et sélectionne « gradient ».

Tu peux ensuite sélectionner les deux couleurs de ton dégradé et jouer sur sa rotation pour obtenir l’effet que tu souhaites.

Alors, que penses-tu de ces nouveautés ? Hâte de voir ce que l’équipe Showit nous réserve sur les mois à venir !

Visuel Pinterest avec le texte "Tutoriel : ombres portées et dégradés" sur Showit, avec deux visuels des effets réalisés

Partager cet article

Les étapes exactes pour construire ton site Internet

et passer de la phase projet à... "enfin lancé"