Comment recréer cet effet de flou iOS7

Réponses:

29

La partie inférieure est floue gaussienne et a une superposition blanche semi- transparente.

Étape 1: Sélectionnez la zone de superposition sur l'arrière-plan (l'image d'origine) et appliquez un flou gaussien de rayon 12px.

Étape 2: Créez un nouveau calque, sélectionnez la même partie pour la superposition, remplissez-la de blanc et donnez à ce calque une opacité de 66%

Reproduit avec la partie supérieure de votre image de référence:
EDIT: nouveaux paramètres pour correspondre à l'original

entrez la description de l'image ici

Peter Walser
la source
Je suppose que cela se fait avec du code, s'il s'agit d'une capture d'écran. Je suppose que cela revient à savoir s'il demande ou non de le faire dans une composition ou une maquette, ou de le mettre en œuvre en ligne.
Eric
@Peter Walser comment créer la zone de superposition qui sera appliquée le gaussien s'il y a plus de couches? Besoin d'abord de les fusionner?
Fred Collins
1
@FredCollins: oui, soit vous les fusionnez d'abord et brouillez la sélection, soit vous créez un nouveau calque avec une copie de la sélection fusionnée (qui devra être recréée à chaque changement de calque).
Peter Walser
@PeterWalser merci. Dernière question. Pour créer le nouveau calque transparent avec une opacité de 66%, j'utilise l'outil rectangle mais je pense qu'il y a une meilleure façon. Comme créer un masque / masque d'écrêtage pour le calque flou ou quelque chose de similaire. Que suggérez-vous?
Fred Collins
Avec un calque séparé, vous pouvez ajuster rapidement l'opacité globale. La solution du masque d'opacité a le même résultat, ici vous pouvez même ajuster l'opacité par pixel. Et, vous pouvez bien sûr combiner les deux approches (masque + transparence de calque). Celui qui vous convient le mieux.
Peter Walser
7

Vous n'avez pas défini le programme ou la technologie que vous utilisez. Donc, alors que Peter a décrit une belle façon de le faire avec Photoshop , je voudrais ajouter que cet effet peut également être créé à l'aide de CSS3.

Voici un aperçu du CSS nécessaire:

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

Je ne dis pas que c'est ainsi que vous devez le faire… en fait, j'utiliserais personnellement la procédure de Peter.

e-sushi
la source