Comment créer des ombres portées parfaites avec Sketch

Dans ce tutoriel vous allez apprendre à sublimer vos ombres portées (drop shadow) sur Sketch pour arriver à ce résultat :

Ombre portée avant / après

La première ombre portée, celle de gauche, a un effet beaucoup plus vieillot que la drop shadow de droite qui est dans les trends du moment.

Pour réaliser une ombre sur Sketch, habituellement on va créer un nouveau rectangle puis lui ajouter une ombre (0,2,40,0, rgba(0,0,0,50)) comme ceci :

L’ancienne méthode pour créer des ombres portées

La solution est toute simple, il suffit de créer un nouveau rectangle moins large et moins haut et de le placer en dessous du premier. C’est sur ce nouvel élément que l’on ajoute notre ombre. Et c’est tout.

La nouvelle façon de créer des drop shadow sur Sketch

Si vous utilisez des éléments colorés, il suffit d’ajouter sur votre rectangle “Shadow” une deuxième ombre de la couleur de votre rectangle principale. De cette façon on aura l’impression que le reflet est plus naturel.

Une Drop Shadow colorée

Pour vous aider, voici le fichier .sketch utilisé pour ce tutoriel.