Kortversionen
- En bakgrundstextur är fina ytdetaljer, till exempel korn, pappersfibrer, vävt tyg eller frostat glas, lagda över en färg eller gradient.
- Textur fungerar bäst i låg styrka, känd snarare än sedd, så att den ger värme utan att konkurrera med innehållet ovanpå.
- Texturens skala ska matcha visningsstorleken: fint korn för små skärmar och nära betraktande, grövre textur för stora format som ses på håll.
- Korn över en gradient döljer banding, eftersom slumpmässiga detaljer bryter upp de synliga stegen mellan nyanserna.
- Sociala plattformar och videokodare komprimerar om bilder, vilket kan smeta ut mycket fin textur, så kontrollera texturen efter uppladdningen.
På den här sidan
En bakgrundstextur är fina ytdetaljer lagda över en färg eller gradient: filmkornets pricking, pappersfibrerna, linnets väv, glasets frost. Den gör att en bakgrund läses som ett material snarare än som pixlar. Regeln som betyder mest är styrkan. En textur som du känner snarare än märker gör en design varmare och dyrare i uttrycket, medan en textur som du märker först blir själva motivet och krockar med allt som ligger ovanpå.
En texturerad gradient på ett stående inlägg: ytan läses som ett material och orden leder fortfarande.
Typer av bakgrundstextur
| Textur | Känns som | Passar för |
|---|---|---|
| Korn eller brus | Film, tryck, matt yta | Gradienter, mörka bakgrunder, allt som får banding |
| Papper | Tryckt, handgjort, redaktionellt | Citat, journaler, inbjudningar, lugna varumärken |
| Tyg och linne | Mjukt, vävt, taktilt | Mode, inredning, hotell och restaurang |
| Frostat glas | Modernt, skiktat, lysande | Gränssnitt, kort över färg, techvarumärken |
| Halvton och risoprickar | Retrotryck, zines, affischer | Lekfulla och redaktionella sociala inlägg |
| Sten och betong | Massivt, arkitektoniskt, stilla | Lyx, arkitektur, produktfotografi |
Varje textur bär på en association. Korn säger film och tryck, papper säger handgjort, glas säger gränssnitt. Välj den som passar hur ditt varumärke ska kännas och använd den sedan överallt, för att blanda papper i ett inlägg och glas i nästa river upp effekten. Har du inte bestämt dig för en känsla än har varumärkespersonlighet ett enkelt sätt att avgöra det.
Skala: anpassa texturen till visningsstorleken
Textur läses olika vid olika storlekar. En mobilskärm som hålls nära visar varje korn, så fint korn räcker. En affisch på andra sidan rummet eller en bild på en projektor kräver grövre textur för att synas alls. Och en textur som ser rätt ut i ett inlägg på 1080×1350 kan försvinna när plattformen krymper det till en miniatyr, eller bli till fläckar när den komprimeras om.
Story 1080×1920: fint
1080 × 1920
Inlägg 1080×1350: fint
1080 × 1350
Bildspel 1920×1080: medel
1920 × 1080
A3-tryck 3508×4961: grövre
3508 × 4961
I tryck klarar sig korn oftast bra och hjälper till och med gradienter att återges rent, och tryck av gradienter tar upp detaljerna.
Att lägga textur över gradienter
Den mest användbara kombinationen är textur över en gradient. Korn bryter upp de synliga stegen som uppstår i mjuka övertoningar, så kallad banding, och får en digital gradient att se tryckt ut. Det vanliga tillvägagångssättet är att lägga texturen som ett eget lager ovanför färgen och blanda in den med ett läge som Överlagring eller Mjukt ljus vid låg opacitet, så att den skuggar färgen i stället för att täcka den.
- 1
Börja med färgen
Få gradienten rätt först. Textur räddar inte färger som inte fungerar ihop.
- 2
Lägg till ett texturlager
Placera det ovanför gradienten. Använd en grå eller neutral textur så att den inte färgar färgen.
- 3
Blanda in det
Sätt lagret till Överlagring eller Mjukt ljus. Mjukt ljus är skonsammare och håller färgerna rena.
- 4
Sänk styrkan
Minska opaciteten tills du bara märker texturen när du letar efter den, ofta långt under hälften.
- 5
Kontrollera det mörkaste området
Banding gömmer sig i mörka, långsamma toningar. Se till att texturen har löst upp alla steg där.
På webben är samma metod några rader kod, se CSS-brustextur. Varför just korn ser så bra ut på gradienter kan du läsa om i kornig gradient.
Textur och läsbarhet
Undvik
- Stark textur direkt bakom liten text
- Mönster med hög kontrast, som kraftig linnevävnad under brödtext
- Två eller tre olika texturer i en design
- Textur så fin att den blir grumlig efter uppladdning
Gör så här
- Svag textur, eller ett lugnare område där orden ligger
- Textur med låg kontrast i närliggande nyanser av en färg
- En texturfamilj i alla format
- Kontrollera den uppladdade versionen, inte bara exporten
Textur ger visuellt brus nära bokstäverna, och liten text drabbas först. Håll texturen svag där text ligger, eller ge orden ett lugnt, jämnt område av bakgrunden. Text på stökiga bakgrunder går igenom teknikerna i detalj.
Textur och färg som löper rakt genom orden…
…och samma bakgrund som ger orden lugn plats bakom sig.
Textur som förblir enhetlig
Textur är lätt att tappa bort mellan verktyg: ett kornlager i en fil, en pappersbild i en annan, olika styrka i varje export. I Gradiently är texturen en del av själva bakgrunden. En Mark staplar upp till tre material med korn och ljus, så att samma yta återges bakom varje design i varje storlek, och dess lugnaste område flyttar sig bakom orden.
GR·N4D7·V5
Evening Station
Se den här MarkenVanliga frågor
Vad är en bakgrundstextur?
Fina ytdetaljer, till exempel korn, pappersfibrer, tygväv eller frostat glas, lagda över en färg eller gradient så att den läses som ett fysiskt material.
Hur stark ska en bakgrundstextur vara?
Svag. Du ska bara märka den när du letar efter den. Är texturen det första du ser, sänk opaciteten.
Åtgärdar textur banding i gradienter?
Korn gör oftast det. Slumpmässiga fina detaljer bryter upp de synliga stegen mellan nyanserna så att övertoningen ser mjuk ut.
Vilket blandningsläge ska jag använda för textur?
Mjukt ljus för en skonsam effekt som håller färgerna rena, eller Överlagring för en starkare. Använd en neutralgrå textur så att den inte färgar färgen.
Varför ser min textur fläckig ut i sociala medier?
Plattformar komprimerar om uppladdningar, vilket kan smeta ut mycket fin textur. Använd en något grövre textur och kontrollera det uppladdade resultatet.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
