Skapa och tillämpa naturliga texturer
Texturer gör en webbplats känsla påtaglig.
De ger innehåll ett förhållande till den fysiska världen, en känsla av plats och en verklighet som människor kan relatera till.
Tyvärr är det inte så enkelt att simulera fysiska texturer som att skjuta ett foto eller köra några Photoshop-filter.
Man måste blanda slumpmässigt ljud och igenkännliga mönster, sträva efter likheter snarare än ren repetition.
Här diskuterar vi vad som ger texturer en organisk kvalitet , och vi tittar på tekniker för att skapa och applicera naturliga texturer och sömlösa plattor.
Sans of Touch via Sight
En "textur" är ytan på en fysisk substans eller ett objekt. Vår syn på kontakt hjälper oss att förstå objekt. Grov, smidig, smidig och smula är texturer och berätta för någon vad ett föremål är gjord av, var det har varit och om det är relaterat till något annat.
På webben är en persons känsla av beröring begränsad till sin inmatningsenhet. Men inte alla webbplatser måste "känna" samma. Baserat på deras erfarenhet av att hantera vardagliga föremål, associerar människor vissa framträdanden med vissa texturer. I digital konst kan man säga att textur är hur något "känns" för sina ögon.
Medan moderna bildredigerare gör det lätt att skapa textur, är inte varje textur en surefire-vinnare. Att skapa en naturliknande konsistens är en knepig uppgift som blandar mönster, kaos och användning för att skapa karaktär.
Naturliga texturer Har en mått av slumpmässighet
Många texturer faller mellan två extremiteter: vanliga mönster och slumpmässigt brus. Mönsterbaserade texturer gör inga ursäkter för att se konstgjorda ut. De kan bestå av en känd symbol eller text, och de har alltid ett förutsägbart arrangemang.
Ovan, prov av kaklade mönster.
På den andra extremen utgör brusbaserade texturer slumpmässigt statiskt. De är lätta att skapa-Photoshop har sitt eget "Add Noise" -filter - och lätt att klinka eftersom de saknar funktioner som ser udda när de skärs.
Ovan, prov av bullriga texturer.
Naturliga texturer sitter någonstans mellan vanliga mönster och slumpmässigt ljud.
Ovan blandar en rad texturer mönster och ljud i varierande grad.
Medan inget är fel med båda extremiteterna, har många bra strukturer båda egenskaper. I naturliga texturer är sömmar frånvarande eller svåra att upptäcka, och vi kan inte identifiera några mönster i upprepade plattor. Deras utseende är lika distinkt och effektivt som alla vanliga mönster, men mindre tydliga.
"Organiska" texturer har rätt kombination av ljud och mönster.
Rationell kaos, ordnad buller
I samband med textur hänvisar "brus" till oregelbundna variationer i en grupp pixlar. Filmkorn, lågljusartefakter och dithering är tre vanliga typer av ljud som, önskvärda eller inte, ofta finns i komplexa bilder.
Texturbrus är det som gör att naturliga ytor ser ut som naturliga. Men det är inte bara statiskt. Snarare balanserar texturbruset kaos och ordning.
Ovanstående, en upprepad geometrisk form upprepade gånger skapar ett mönster. Till vänster varierar formen endast i placering: raderna är inte riktigt jämn.
De andra bilderna visar förändringar i formens vinkel, densitet och storlek. Texturer gjorda av dessa variationer i form skulle verka mer kaotiska, men alla texturer skulle behålla originalets unika karaktär, eftersom variationerna baseras på samma grundläggande form.
Naturligtvis ser resultatet fortfarande konstgjort ut. Tydliga upprepningar i bullerbaserade texturer förstör effekten eftersom människor är mycket bra på att känna igen mönster. Texturer i den verkliga världen har variation i form, färg och djup.
Ovan visar verkliga texturer både ljud och repetition. Burlap, rosa granit och vaxpapper har sina egna "vanliga oregelbundna" mönster, men de är fortfarande skilda från de andra.
- Med de förutsägbara horisontella och vertikala linjerna är burlap den vanligaste. Men linjerna är inte perfekta. Små variationer i ton och riktning gör att mönstret inte ser konstgjort ut.
- Pockmarkerna i graniten är inte jämnt fördelade. Att se ojämnheten i närheten är svår. Karaktäristiken blir tydligare när den ses över ett brett område.
- Vaxpapperet har både minst kontrast och minsta personlighet. Några klumpar av mörka nyanser håller det från att vara slumpmässigt brus.
Varje konsistens har vissa egenskaper - oavsett om det finns pockmarks, streck, fläckar eller rullar - det gör det unikt. Variationer i dessa egenskaper gör att den fungerar.
Ovanstående innehåller en metallisk struktur överlappande raggade kanter i ingen särskild ordning, men den behåller sin distinkta karaktär. (Texture artighet Design Mag .)
Djup och kontrast från Murmurs till Screams
En nyckelvariabel med någon naturlig struktur är djup. "Stumpen" av en textur ger en känsla av taktilitet mer än färg eller storlek. Men djupet lägger också till kontrast, vilket lockar uppmärksamhet och kan försämra läsbarheten.
En skrikande konsistens i bakgrunden ökar volymen av innehållet självt. Vid vilken tidpunkt är det för högt? Det beror på styrkan på publikens innehåll och disposition.
Om en hög textur passar ämnet, bidrar det till humöret. Men om det stör läsbarheten så har du ett problem.
Vilken av skrifterna ovan är lättast att läsa? Vilken textur speglar bäst budskapet i skrivandet? Det kan finnas mer än ett rätt svar, men det finns bara en riktlinje: När du blandar texturer och innehåll, särskilt textinnehåll, se till att innehållets kanter förblir synliga.
Tala om kanter, för extra realism, var uppmärksam på var texturen slutar. Smarta eller grusiga texturer behöver till exempel inte sluta i en perfekt linje. Låt dem i stället osa eller smula i nästa yta. Tricket är att tänka på allt på sidan som en yta med textur, även om det är en vanlig solid färg.
Texturer som blir tydliga med ljuskällor
Inte varje textur behöver djupa sprickor för att se påtagliga. Tänk på blank färg. Utan åsar eller stötar kommer den glatta emaljens känsla från glansen.
Texturerna ovan visar hur ytan på ett föremål inte behöver vara grovt. De kan inte fungera som repeterande plattor, men glans, reflektion och genomskinlighet ger visuella ledtrådar om vad ett föremål kan känna sig som i den verkliga världen.
Den söta platsen mellan tecken och filstorlek
Ett vanligt problem med någon naturlig konsistens är hur man upprepar det. När människor upptäcker repetition förstörs all verklighet av verkligheten. Den enklaste lösningen är att använda större och därmed färre plattor. Med mer variation blir spotting repetition svårare.
Såsom visas ovan, ju bredare kakelarna är desto lägre blir chansen att människor kommer att upptäcka repetition. Tyvärr gör bredare kakel också större filer, vilket saktar sidlastning. För många människor dödar ett svängande lasttecken humöret så mycket som att se en kakel kant.
En annan lösning är att göra formerna i den enskilda plattan mindre.
Som vi ser har upprepning av finare texturer mindre chans att bli upptäckta. Men ju finare texturen, desto mindre karaktär kan du ge den. Den finaste texturen skulle vara rent ljud - men det hjälper inte dig. Naturliga texturer framkallar alltid en känd yta.
Sammanfattningsvis bör naturliga texturer
- Har tillräckligt med personlighet att de inte bara är slumpmässigt buller. Detta innebär att former, eller "klumpar" av pixlar, ska vara likadana men inte identiska.
- Har tillräckligt med personlighet att en scen eller humör är etablerad men inte så mycket att användarna distraheras från innehållet. Det betyder att inga tydliga "klumpar" eller andra egenskaper ska stå ut när de ses från fjärran.
- Var slumpmässig nog för att undvika repetition. Strukturens egenskaper får inte utgöra ett mönster som människor kunde upptäcka utan att fokusera.
Hur gör vi allt detta?
Skapa texturer i Photoshop
Många program gör det möjligt för konstruktörer att skapa egna naturliga texturer. Och webben har ingen brist på nedladdningsbara texturer. Att skapa din egen textur kan vara en givande upplevelse som inte bidrar till upphovsrätt, vilket bidrar till en verkligt unik design.
1. Skapa ett nytt Photoshop-dokument med en vit bakgrund. För det här exemplet kommer vi att göra det 600 x 300 pixlar.
2. Fyll bakgrunden med svart.
3. Rita slumpmässiga vita streck spetsade i samma allmänna riktning. I det här exemplet använder vi en enkel hårdborstad borste. Olika borsttips kommer att skapa olika resultat. 
4. Använd smutsverktyget för att smarta streck i slumpmässiga oskarpa kanter. Ett fuzzy-edged spets (med en hårdhet lägre än 30) fungerar bäst. Men snedvriden texturen blir, de bästa resultaten kommer att ha många nyanser av grått. 
5. Gå till Filter> Buller> Lägg till Buller och lägg till statisk enligt din smak. Filtrera sedan> Annat> High Pass . Tillsammans lägger dessa till fler gråtoner (vital för steg 6) och lite grus. 
6. Skapa ett graderings kartlag. Detta speciallager gäller färg till underliggande lager baserat på tonen. Till skillnad från normala gradienter, som färgar i pixlar baserat på plats, övertonar kartläggningen färg i höjdpunkter, midtoner och skuggor. Använd lågmättade färger, särskilt grön, brun och blå, för att simulera naturens färger. 
Ovan, resultatet av att applicera en brun och gul graderingskarta.
7. Beskära en intressant del av strukturen. Försök att inte använda mer än hälften av hela bilden. Vi ska använda resten snart. 
8. Viktigt: Spara den klippta kakel som en separat fil. Du behöver originaldelen senare.
Detaljerna som visas här är avsiktligt stora för att visa tekniken, men resultatet är inte dåligt för en textur. Så här fungerar processen i allmänhet:
- Alla storlekar du tycker är lämpliga kommer att göra. Större plattor kommer att ha mer realistiska drag men vara större i filstorlek. Börja alltid mycket större än du behöver, eftersom kanterna på en konsistens som gjordes från början kommer sällan att matcha kanvasens kanter.
- Skapa en serie varumärken med samma verktyg eller verktyg. Kärnan i en konsistens är etablerad genom att välja en liknande teknik eller två och använda dem många gånger.
- Lägg till lite kaos med Photoshop-filter.
- Lägg till färg: lutningskartor för att betona djup och fläckar av slumpmässig färg för splatters. Använd lågmättade färger, särskilt grön, brun och blå, för att simulera naturens färger.
Gör plattor sömlösa
Naturligt eller inte, de flesta texturer och mönster borde vara sömlösa. Det vill säga besökare ska inte kunna se kanterna på den upprepande plattan. Hur gör vi det här? Själva plattan ger lösningen.
9. Ovan delas bilden upp längs de blå och röda linjerna. Eftersom pixlar längs splittringen redan matchar, så flyttar de till båda sidor så att vänster och höger kanter matchar. Självklart finns problemet fortfarande, men det är lättare att fixa.
10. Denna fyrkantiga kakel kommer från en större bild. Ovan fylls kakelens del med material från hela bilden. Upprepa steg 8 för att fixa den horisontella sömmen (längst upp och längst ner på bilden).
Den slutliga fastigheten
Den enkla struktur som skapats ovan har en skarp fel: eftersom den var konstruerad för att visa processen, upprepas dess egenskaper för ofta.
En naturlig texturens egenskaper är vanligtvis mindre än en tiondel av hela plattan. Det vill säga, för en kakel som mäter 500 x 100 pixlar, skulle den största rynken, rill eller annat märke mäta 50 x 10 pixlar eller mindre.
Välgjorda texturer kräver ytterligare en funktion: tid. Kort om att ladda ner en freebie måste du ta tid att utveckla och förfina en bra struktur. Men tänk inte på det som en chore. Det är naturligtvis en del av processen.
Skriven uteslutande för Webdesigner Depot av Ben Gremillion. Ben är en frilans webbdesigner vem löser kommunikationsproblem med bättre design.
Hur skapar du naturliga strukturer? Dela dina idéer i kommentarerna nedan.