Es posible que haya visto estos separadores / separadores de desvanecimiento en varios sitios, que parecen desvanecerse horizontal y verticalmente. Aquí hay un ejemplo de lo que quiero decir:
Proporcionan una excelente manera de dividir el contenido, haciéndolo de una manera sutil y no intrusiva. Me gustaría compartir una forma sencilla de crear estos divisores de desvanecimiento utilizando Photoshop.
Paso 1
Primero, crea una nueva capa. Usando la herramienta de lápiz, dibuje una línea horizontal sólida de 1px. Mantenga presionada la tecla MAYÚS mientras hace clic y arrastre la línea para mantenerla recta. Esta es la base para todo el efecto de desvanecimiento.
Paso 2
Seleccione la herramienta de borrador. Elija una configuración de cepillo muy suave. Cuanto mayor sea el tamaño del pincel, más largo será el desvanecimiento (puede experimentar para encontrar el tamaño que mejor se adapte a sus necesidades).
Paso 3
Borrar los extremos izquierdo y derecho de la línea. Esto hace que la línea se desvanezca cerca de los extremos.
Etapa 4
Duplique la capa que contiene la línea (haga clic con el botón derecho en la capa en el panel de la derecha, luego seleccione 'duplicar'). Seleccione la más baja de las dos capas.
Paso 5
Seleccione filtro> desenfoque> desenfoque gaussiano. Elija un radio de 3px para crear el efecto de fundido (o elija el que más le convenga).
Paso 6
Use la herramienta de marquesina para seleccionar todo en o sobre la línea continua (con la capa borrosa seleccionada). Pulse la tecla borrar.
Paso 7
Ajuste la opacidad de la línea continua y / o la sombra según sus preferencias. Esto es lo que se ve al final.
Como nota final, si desea una mayor cantidad de sombreado (como el que se muestra en el ejemplo en la parte superior de la página), puede lograrlo duplicando la capa borrosa varias veces (justo después de aplicar el desenfoque gaussiano) hasta que están contentos con la extensión e intensidad del desenfoque (y luego, fusionen las capas borrosas).
Puede utilizar esta técnica para crear divisores de contenido tanto horizontales como verticales. Y con un poco de retoques, no es muy difícil encontrar algo como:
¡Así que continúa y condimenta tus bordes, separadores y bordes! Si conoce otros sitios que utilizan esta técnica (o desea compartir la suya), háganoslo saber en los comentarios. Nunca se sabe, si nos gusta su diseño, ¡puede que termine apareciendo en el sitio!