Utiliser le flou iOS 7 dans Sketch

L’un des éléments les plus appréciés du style d’iOS 7 (et de la future version d’OS X, nommée Yosemite), est le fond transparent flou.

Exemple de fond transparent sur iOS 7

Voici comment réaliser le même effet sous Sketch.

Partons d’une image de base, insérée dans votre projet Sketch :

État initale, une image affichée dans Sketch

Créez une rectangle, sans bordure, et ajustez-le à la taille souhaitée.

Ajout d'un rectangle par dessus l'image

Choisissez la couleur de remplissage qui vous convient, pour notre exemple le blanc sera très bien. Ajustez l’opacité du remplissage à 10% et ajoutez le flou de fond que vous pouvez régler à 17px :

Ajout du flou de fond sur un élément dans Sketch

C’est terminé !

Si vous designez effectivement ce type d’effet pour iOS, il est préférable d’ajouter un autre rectangle pour l’effet sombre sur le reste de l’écran. Ajouter ce rectangle uniquement sur la partie concernée, ajustez sa couleur de remplissage sur noir et son opacité sur 53%.

Ajout d'un effet sombre sur le reste de l'écran

Publié le 23 juin 2014

Notre vision des choses vous correspond ? Vous avez envie de travailler avec nous ?