Création de diviseurs de site en décoloration

Vous avez peut-être vu ces séparateurs / séparateurs s'estompant sur divers sites, qui semblent s'estomper à la fois horizontalement et verticalement. Voici un exemple de ce que je veux dire:

Ils constituent un excellent moyen de diviser le contenu, de manière subtile et non intrusive. J'aimerais partager un moyen simple de créer ces séparateurs à évanouissement à l'aide de Photoshop.

Étape 1

Tout d'abord, créez un nouveau calque. En utilisant l'outil Crayon, tracez une ligne horizontale continue de 1 px. Maintenez la touche MAJ enfoncée pendant que vous cliquez et faites glisser la ligne pour la maintenir droite. C'est la base de tout l'effet de fondu.

Étape 2

Sélectionnez l'outil gomme. Choisissez un réglage de brosse très doux. Plus la taille du pinceau est grande, plus le fondu est long (vous pouvez expérimenter pour trouver la taille qui convient le mieux à vos besoins).

Étape 3

Effacer les extrémités gauche et droite de la ligne. Cela fait disparaître la ligne près des extrémités.

Étape 4

Dupliquez le calque contenant la ligne (cliquez avec le bouton droit de la souris sur le calque dans le panneau de droite, puis sélectionnez "dupliquer"). Sélectionnez la plus basse des deux couches.

Étape 5

Sélectionnez Filtre> Flou> Flou gaussien. Choisissez un rayon de 3 px pour créer l'effet de fondu (ou choisissez celui qui vous convient!).

Étape 6

Utilisez l'outil de sélection pour tout sélectionner sur ou au-dessus de la ligne continue (avec le calque flou sélectionné). Appuyez sur la touche Suppr.

Étape 7

Ajustez l'opacité de la ligne continue et / ou de l'ombre en fonction de vos préférences. Voici à quoi cela ressemble à la fin.

Pour terminer, si vous souhaitez une plus grande quantité d’ombrage (comme celui présenté dans l’exemple en haut de la page), vous pouvez le faire en dupliquant le calque flou plusieurs fois (juste après l’application du flou gaussien) sont satisfaits de l’étendue et de l’intensité du flou (puis fusionnent les couches floues).

Vous pouvez utiliser cette technique pour créer des séparateurs de contenu horizontaux et verticaux. Et avec un peu de bricolage, il n'est pas trop difficile de trouver quelque chose comme:

Alors pimentez vos frontières, vos séparateurs et vos bords! Si vous connaissez d'autres sites utilisant cette technique (ou souhaitez partager le vôtre), veuillez nous en informer dans les commentaires. Vous ne savez jamais, si nous aimons votre design, il se peut qu'il soit en vedette sur le site!