Tekstur gør et websted følsomt.

De giver indhold et forhold til den fysiske verden, en følelse af sted og en realitet, som folk kan forholde sig til.

Desværre er simulering af fysiske teksturer ikke lige så simpelt som at skyde et foto eller køre et par Photoshop-filtre.

Man må blande tilfældig støj og genkendelige mønstre, idet man stræber efter ligheder snarere end ren gentagelse.

Her diskuteres det, der giver teksturer en økologisk kvalitet , og vi vil se på teknikker til at skabe og anvende naturlige udseende teksturer og sømløse fliser.

Sans for Touch via Sight

En "tekstur" er overfladen af ​​et fysisk stof eller objekt. Ligesom syn hjælper vores følelsesfølsomhed os til at forstå objekter. Grov, glat, smidig og smuldrende er teksturer og fortæller nogen, hvad en genstand er lavet af, hvor den har været, og hvis den er relateret til noget andet.

På internettet er en persons følelsesfølsomhed begrænset til deres input enhed. Men ikke alle hjemmesider skal "føle" det samme. Baseret på deres erfaring fra håndtering af dagligdags objekter, forbinder folk visse udseende med bestemte teksturer. I digital kunst kan man sige, at tekstur er, hvordan noget "føles" til ens øjne.

Mens moderne billedredaktører gør tekstur skabt nemt, er ikke hver tekstur en surefire-vinder. Oprettelse af en naturlig udseende tekstur er en vanskelig opgave, der blander mønster, kaos og brug for at skabe karakter.

Naturlige teksturer har et mål for tilfældighed

Mange teksturer falder mellem to ekstremer: regelmæssige mønstre og tilfældig støj. Mønsterbaserede teksturer gør ingen undskyldninger for at se kunstige. De kan bestå af et kendt symbol eller en tekst, og de har altid et forudsigeligt arrangement.

prøver af flisebelægningsmønstre

Ovenstående prøver af fliselagte mønstre.


På den anden side er støjbaserede teksturer legemliggjort. De er nemme at oprette-Photoshop har sit eget "Add Noise" -filter og er let at klare, fordi de mangler funktioner, der ser underligt ud, når de skæres af.

prøver af flisebelagt støj

Ovenstående prøver af støjende teksturer.


Naturligt udseende teksturer sidder et sted mellem regelmæssige mønstre og tilfældig støj.

diagram, der viser billeder, blandemønstre og støj

Ovenfor blander en række teksturer mønstre og støj i varierende grad.


Mens intet er forkert med begge ekstreme, har mange gode teksturer begge egenskaber. I naturlige udseende teksturer er sømme fraværende eller svære at pletre, og vi kan ikke identificere mønstre i gentagne fliser. Deres udseende er så tydeligt og effektivt som ethvert regelmæssigt mønster, men mindre åbenlyst.

"Økologiske" teksturer har den rigtige kombination af støj og mønster.

Rationel kaos, ordentlig støj

I forbindelse med tekstur henviser "støj" til uregelmæssige variationer i en gruppe af pixels. Filmkorn, lette lysgenstande og dithering er tre almindelige typer af støj, som ønskeligt eller ej findes ofte i komplekse billeder.

Teksturstøj er, hvad der gør naturlige overflader ser naturlige ud. Men det er ikke bare statisk. Teksturstøj balancerer i stedet kaos og orden.

Diagrammet viser forskellige arrangementer af samme form

Ovenstående skaber en enkelt geometrisk form gentaget mange gange et mønster. Til venstre varierer formen kun i placering: rækkerne er ikke helt lige.

De andre skud viser ændringer i formens vinkel, densitet og størrelse. Teksturer fremstillet af disse variationer i form ville fremstå mere kaotiske - men alle teksturer ville bevare originalets unikke karakter, fordi variationerne er baseret på samme grundlæggende form.

Selvfølgelig ser resultatet stadig kunstigt ud. Tydelige gentagelser i støjbaserede teksturer ødelægger effekten, fordi folk er meget gode til at genkende mønstre. Teksturerne i den virkelige verden har variation i form, farve og dybde.

diagram der viser særskilte træk ved tre teksturer

Ovenstående viser virkelige teksturer både støj og gentagelse. Burlap, pink granit og vokspapir har deres egne "regelmæssige uregelmæssige" mønstre, men hver er stadig forskellig fra de andre.

  • Med sine forudsigelige vandrette og lodrette linjer er skralvning den mest regelmæssige. Men linjerne er ikke perfekte. Små variationer i tone og retning holder mønsteret fra at se kunstigt ud.
  • Pockmarks i granit er ikke jævnt fordelt. At se ujævnhederne tæt på er hårdt. Karakteristikken bliver mere tydelig, når den ses over et bredt område.
  • Vokspapiret har både den mindste kontrast og den mindste personlighed. Et par klumper af mørke nuancer holder det fra at være tilfældig støj.

Hver tekstur har visse funktioner - uanset om det er lygter, streger, pletter eller riller - det gør det unikt. Variationer i disse egenskaber gør det til at fungere.

diagram der viser særskilte træk ved tre teksturer

Ovenstående indbygger en metallisk struktur overlappende skråkantede former i en bestemt rækkefølge, men den bevarer sin særskilte karakter. (Textur høflighed Design Mag .)

Dybde og kontrastområde fra Murmurs til Screams

En nøglevariabel af enhver naturlig tekstur er dybde. "Stumpen" af en tekstur giver en følelse af taktilitet mere end farve eller størrelse. Men dybden tilføjer også kontrast, som tiltrækker opmærksomhed og kan nedsætte læsbarheden.

prøve webdesign med en høj baggrund

En skrigende tekstur i baggrunden vil øge volumenet af indholdet selv. På hvilket tidspunkt er det for højt? Det afhænger af styrken af ​​indholdet og dispositionen af ​​publikum.

Hvis en høj tekstur passer til emnet, så bidrager det til stemningen. Men hvis det forstyrrer læsbarheden, så har du et problem.

Eksempel på tekst over en høj tekstur

Hvilke af ovenstående skrifter er lettest at læse? Hvilken tekstur afspejler bedst budskabet i skrivningen? Der kan være mere end et rigtigt svar, men der er kun én retningslinje: Når du blander teksturer og indhold, især tekstmæssige indhold, skal du sikre dig, at indholdets kanter forbliver synlige.

Eksempel på tekstblanding med en høj tekstur

Tale om kanter, for ekstra realisme, være opmærksom på, hvor teksturen slutter. Slanke eller grusede teksturer behøver f.eks. Ikke at ende i en perfekt linje. I stedet skal de lade sig øre eller smuldre ind i den næste overflade. Tricket er at tænke på alt på siden som en overflade med tekstur, selvom det er en almindelig fast farve.

Eksempel på en teksturkant, der afspejler selve tekstur

Teksturer, der bliver tydelige med lyskilder

Ikke hver tekstur har brug for dybe revner til at se på håndgribelige. Overvej blankt maling. Uden kamme eller bump kommer den glatte emaljefem fra dens glans.

eksempel på skinnende overflader

Teksturerne ovenfor viser, hvordan overfladen af ​​et objekt ikke behøver at være uslebne. De fungerer måske ikke som gentagende fliser, men glans, refleksion og translucens giver visuelle spor om, hvad et objekt kan føles som i den virkelige verden.

Den søde plads mellem karakter og filstørrelse

Et almindeligt problem med enhver naturlig tekstur er, hvordan man gentager det. Når folk spot gentagelse, ødelægges enhver illusion af virkeligheden. Den nemmeste løsning er at bruge større og dermed færre fliser. Med mere variation bliver spotting repetition hårdere.

eksempel på forskellige fliser størrelser

Som vist ovenfor, jo bredere fliserne er, jo lavere er chancen for, at folk vil få øje på gentagelse. Desværre gør bredere fliser også større filer, hvilket sænker sidebelastningen. For mange mennesker dræber et svingende læseskilt humøret så meget som at se en flise kant.

En anden løsning er at gøre formerne i den enkelte flise mindre.

Eksempel teksturer med forskellige størrelsesfunktioner

Som vi ser, har gentagelse af finere teksturer mindre chance for at blive spottet. Men jo finere tekstur, jo mindre karakter kan du give det. Den fineste tekstur ville være ren støj - men det hjælper dig ikke. Naturlige teksturer fremkalder altid en kendt overflade.

Sammenfattende bør naturlige teksturer:

  • Har nok personlighed, at de ikke bare er tilfældig støj. Dette betyder, at figurer eller "klumper" af pixels skal være ens, men ikke ens.
  • Har nok personlighed, at en scene eller humør er etableret, men ikke så meget, at brugerne distraheres fra indholdet. Det betyder, at der ikke skal ses adskilte "klumper" eller andre egenskaber, når de ses fra fjernt.
  • Vær tilfældig nok til at undgå gentagelse. Teksturens egenskaber må ikke danne et mønster, som folk kunne se uden at fokusere.

Hvordan gør vi alt dette?

Oprettelse af teksturer i Photoshop

Mange programmer gør det muligt for designere at lave deres egne naturlige teksturer. Og internettet har ingen mangel på downloadbare teksturer. Oprettelse af din egen tekstur kan være en givende, ikke-copyright-krænkende oplevelse, der bidrager til et helt unikt design.

1. Opret et nyt Photoshop-dokument med en hvid baggrund. I dette eksempel gør vi det 600 x 300 pixel.

2. Fyld baggrunden med sort.

3. Tegn tilfældige hvide streger spidset i samme generelle retning. I dette eksempel bruger vi en simpel hårdkantet børste. Forskellige børste tips vil skabe forskellige resultater.
trin 3

4. Brug smudsværktøjet til at smøre stregerne i tilfældige uskarpe kanter. En fuzzy-edged tip (med en hårdhed lavere end 30) fungerer bedst. Men forvrænget tekstur bliver, vil de bedste resultater have mange gråtoner.
trin 4

5. Gå til Filter> Støj> Tilføj støj , og tilføj statisk efter din smag. Filtrer derefter > Andet> High Pass . Sammen tilføjer disse flere gråtoner (afgørende for trin 6) og lidt gris.
trin 5

6. Opret et Gradient Map-lag. Dette særlige lag anvender farve til underliggende lag baseret på deres tone. I modsætning til normale gradienter, som farve i pixels baseret på placering, farvegraver kort farve i højdepunkter, midtoner og skygger. Brug lavmættede farver, især grøn, brun og blå, for at simulere naturens farver.
trin 6

trin 6
Ovenstående er resultatet af at anvende et brunt og gult gradientkort.

7. Beskær en interessant del af tekstur. Prøv ikke at bruge mere end halvdelen af ​​hele billedet. Vi vil bruge resten snart.
afgrøde

8. Vigtigt: Gem den beskårne flise som en separat fil. Du skal bruge den originale fil senere.

Detaljerne vist her er bevidst store til at demonstrere teknikken, men resultatet er ikke dårligt for en tekstur. Sådan fungerer processen generelt:

  • Enhver størrelse, du føler dig passende, vil gøre. Større fliser vil have mere realistiske træk, men være større i filstørrelse. Start altid meget større, end du har brug for, fordi kanterne af en tekstur, der blev lavet fra bunden, sjældent passer til kanvasets kanter.
  • Opret en række mærker med det samme værktøj eller værktøjer. Essensen af ​​en tekstur er etableret ved at vælge en lignende teknik eller to og bruge dem mange gange.
  • Tilføj et lille kaos med Photoshop-filtre.
  • Tilføj farve: farvekort for at fremhæve dybden og pletter af tilfældig farve til splatters. Brug lavmættede farver, især grøn, brun og blå, for at simulere naturens farver.

Gør fliser sømløst

Naturligt eller ej, de fleste teksturer og mønstre skal være sømløse. Det vil sige, at besøgende ikke skal kunne se kanterne af den gentagende flise. Hvordan gør vi det her? Flisen selv giver løsningen.

diagram, der viser, hvordan man skifter sider

9. Ovenfor er billedet opdelt langs de blå og røde linjer. Fordi pixels langs split'en allerede passer, bevæger de dem til begge sider, så de venstre og højre kanter matcher. Selvfølgelig eksisterer problemet stadig, men det er lettere at rette.

Diagrammet viser hvordan udskift sømmen i midten

10. Denne firkantede flise kommer fra et større billede. Ovenfor er flisens splittet fyldt med materiale fra hele billedet. Gentag trin 8 for at rette den vandrette søm (øverst og nederst på billedet).

Den endelige ejendom

Den enkle tekstur, der er skabt ovenfor, har en skarp fejl: fordi den var designet til at demonstrere processen, gentager dens egenskaber for ofte.

En naturlig tekstur er karakteristika er normalt mindre end en tiendedel af hele flisen. Det vil sige for en flise, der måler 500 x 100 pixels, vil den største rynke, rill eller andet mærke måle 50 x 10 pixels eller mindre.

Velfremstillede teksturer kræver endnu en funktion: tid. Kort for at downloade en freebie, skal du tage tid til at udvikle og forfine en god tekstur. Men tænk ikke på det som en opgave. Det er naturligvis en del af processen.


Skrevet udelukkende til Webdesigner Depot af Ben Gremillion. Ben er freelance webdesigner hvem løser kommunikationsproblemer med bedre design.

Hvordan opretter du naturlige udseende teksturer? Del dine ideer i kommentarerne nedenfor.