Skapa Fading Site Dividers

Du kanske har sett dessa blekande delare / separatorer på olika platser, som verkar blekna både horisontellt och vertikalt. Här är ett exempel på vad jag menar:

De ger ett bra sätt att dela upp innehållet, gör det på ett subtilt och icke-påträngande sätt. Jag skulle vilja dela ett enkelt sätt att skapa dessa blekande delare med hjälp av Photoshop.

Steg 1

Skapa först ett nytt lager. Rita en 1px solid horisontell linje genom att använda pennaverktyget. Håll SHIFT-tangenten när du klickar och dra raden för att hålla den rak. Detta är grunden för hela blekningseffekten.

Steg 2

Välj raderverktyget. Välj en mycket mjuk borsteinställning. Ju större borststorleken desto längre bleknar (du kan experimentera för att hitta den storlek som bäst passar dina behov).

Steg 3

Radera den vänstra och högra änden av linjen. Detta gör linjen blekna nära ändarna.

Steg 4

Duplicera skiktet som innehåller linjen (högerklicka på skiktet i den högra panelen och välj sedan "duplicera"). Välj det nedre av de två skikten.

Steg 5

Välj filter> oskärpa> Gaussisk oskärpa. Välj en radie av 3px för att skapa blek effekten (eller välj en som passar dig!).

Steg 6

Använd markeringsverktyget för att välja allt på eller över den fasta linjen (med det suddiga lagret som valts). Ta bort raderingsnyckel.

Steg 7

Justera ogenomskinligheten hos den fasta linjen och / eller skuggan så att den passar dig. Här är vad det ser ut i slutet.

Som en slutlig notering kan du uppnå det genom att duplicera det suddiga skiktet flera gånger (direkt efter att du har applicerat Gaussisk suddning) tills du vill ha en större mängd skuggning (som den som visas i exemplet längst upp på sidan). är nöjda med omfattningen och intensiteten av suddningen (och sedan slår samman de suddiga skikten).

Du kan använda denna teknik för att skapa både horisontella och vertikala innehållsdelare. Och med lite tinkering runt är det inte för svårt att komma på något som:

Så fortsätt och krydda dina gränser, separatorer och kanter! Om du känner till andra webbplatser som använder den här tekniken (eller vill dela med dig), var god och låt oss veta i kommentarerna. Du vet aldrig, om vi gillar din design kan det slutligen bli presenterat på webbplatsen!