Tekstur gjør et nettsted følsomt.

De gir innhold et forhold til den fysiske verden, en følelse av sted og en realitet som folk kan forholde seg til.

Dessverre er det ikke så enkelt å simulere fysiske teksturer som å skyte et bilde eller løpe noen Photoshop-filtre.

Man må blande tilfeldig støy og gjenkjennelige mønstre, og streve etter likheter snarere enn ren gjentagelse.

Her skal vi diskutere hva som gir teksturer en organisk kvalitet , og vi ser på teknikker for å lage og bruke naturlig utseende teksturer og sømløse fliser.

Sans for berøring via synet

En "tekstur" er overflaten til en fysisk substans eller gjenstand. Som syn, hjelper vår følelse av berøring oss å forstå objekter. Grov, glatt, glatt og smuldrende er teksturer og forteller noen hva en gjenstand er laget av, hvor den har vært og om den er relatert til noe annet.

På nettet er en persons berøringsfølsomhet begrenset til inngangsenheten. Men ikke alle nettsteder må "føle" det samme. Basert på deres erfaring fra å håndtere hverdagens objekter, forbinder folk visse utseende med visse teksturer. I digital kunst kan man si at tekstur er hvordan noe "føles" til ens øyne.

Mens moderne bildeditorer gjør teksturopprettelse enkelt, er ikke hver tekstur en surefire-vinner. Å skape en naturlig utseende tekstur er en vanskelig oppgave som blander mønster, kaos og bruk for å skape karakter.

Naturlige teksturer har et mål for tilfeldighet

Mange teksturer faller mellom to ekstremer: vanlige mønstre og tilfeldig støy. Mønsterbaserte teksturer gjør ingen unnskyldninger for å se kunstig. De kan bestå av et kjent symbol eller en tekst, og de har alltid et forutsigbart arrangement.

prøver av flislagte mønstre

Over, prøver av flislagte mønstre.


På den andre ekstremen utgjør støybaserte teksturer tilfeldig statisk. De er enkle å lage-Photoshop har sitt eget "Add Noise" filter-og lett å flis fordi de mangler noen funksjoner som ser merkelig ut når de slås av.

prøver av flislagte lyder

Over, prøver av støyende teksturer.


Naturlig teksturer sitter et sted mellom vanlige mønstre og tilfeldig støy.

diagram som viser bilder blandemønstre og støy

Over, en rekke teksturer blander mønster og støy i varierende grad.


Mens ingenting er galt med begge ekstreme, har mange gode teksturer egenskaper av begge. I naturlig utseende teksturer, er sømmer fraværende eller vanskelig å se, og vi kan ikke identifisere noen mønstre i gjentatte fliser. Deres utseende er så tydelig og effektivt som et vanlig mønster, men mindre åpenbart.

"Organiske" teksturer har den rette kombinasjonen av støy og mønster.

Rasjonell kaos, ordentlig støy

I sammenheng med tekstur refererer "støy" til uregelmessige variasjoner i en gruppe piksler. Filmkorn, lavlysartefakter og dithering er tre vanlige typer støy som, ønskelig eller ikke, ofte finnes i komplekse bilder.

Teksturstøy er det som gjør naturlige overflater ser naturlige ut. Men det er ikke bare statisk. Snarere, teksturstøy balanserer kaos og orden.

diagram som viser forskjellige arrangementer av samme form

Over, oppstår en enkelt geometrisk form gjentatt mange ganger, et mønster. Til venstre varierer formen bare i plassering: radene er ikke helt jevne.

De andre bildene viser endringer i formens vinkel, tetthet og størrelse. Teksturer laget av disse variasjonene i form vil virke mer kaotiske - men alle teksturer vil beholde originalets unike karakter, fordi variasjonene er basert på samme grunnleggende form.

Selvfølgelig ser resultatet fremdeles kunstig ut. Tydelige gjentakelser i støybaserte teksturer ødelegger effekten fordi folk er veldig gode til å gjenkjenne mønstre. Teksturer i den virkelige verden har variasjon i form, farge og dybde.

diagram som viser forskjellige trekk på tre teksturer

Ovenfor viser virkelige teksturer både lyd og repetisjon. Burlap, rosa granitt og vokspapir har sine egne "vanlige uregelmessige" mønstre, men hver er fortsatt forskjellig fra de andre.

  • Med de forutsigbare horisontale og vertikale linjene, er det mest regelmessige. Men linjene er ikke perfekte. Små variasjoner i tone og retning holder mønsteret fra å se kunstig ut.
  • Pockmarks i granitt er ikke jevnt fordelt. Å se ujevnheten i nærheten er vanskelig. Karakteristikken blir tydeligere når den ses over et bredt område.
  • Voksepapiret har både den minste kontrast og den minste personligheten. Noen få klumper med mørke nyanser holder det fra å være tilfeldig støy.

Hver tekstur har visse funksjoner - enten lommelykter, streker, flekker eller riller - som gjør det unikt. Variasjoner i disse egenskapene gjør det til å fungere.

diagram som viser forskjellige trekk på tre teksturer

Ovenfor inkorporerer en metallisk tekstur overlappende skråkantede former uten spesiell rekkefølge, men den beholder sin tydelige karakter. (Textur høflighet Design Mag .)

Dybde og kontrastområde fra Murmurs til Screams

En nøkkelvariabel av en hvilken som helst naturlig tekstur er dybde. Den "bumpiness" av en tekstur gir en følelse av taktilitet mer enn farge eller størrelse. Men dybden legger også til kontrast, som tiltrekker seg oppmerksomhet og kan svekke lesbarheten.

prøve webdesign med høy bakgrunn

En skrikende tekstur i bakgrunnen vil øke volumet av innholdet selv. På hvilket tidspunkt er det for høyt? Det avhenger av styrken av innholdet og disposisjonen til publikum.

Hvis en høy tekstur passer til emnet, bidrar det til humøret. Men hvis det forstyrrer lesbarheten, har du et problem.

Eksempel på tekst over en høy tekstur

Hvilke av skriftene ovenfor er enklest å lese? Hvilken tekstur reflekterer best meldingen i skrivingen? Det kan være mer enn ett riktig svar, men det er bare en retningslinje: Når du blander teksturer og innhold, spesielt tekstlig innhold, må du sikre at kantene på innholdet forblir synlige.

Eksempel på tekstblanding med høyt tekstur

Å snakke om kanter, for ekstra realisme, vær oppmerksom på hvor teksturen slutter. Slanke eller grisete teksturer, for eksempel, trenger ikke å ende i en perfekt linje. I stedet la dem øke eller smuldre inn i neste overflate. Trikset er å tenke på alt på siden som en overflate med tekstur, selv om det er en vanlig farge.

Eksempel på en teksturkant som reflekterer selve tekstur

Teksturer som blir tydelige med lyskilder

Ikke hver tekstur trenger dype sprekker for å se på håndgripelige. Tenk på glanset maling. Uten rygg eller støt kommer den glatte emaljefølelsen fra glansen.

Eksempel på skinnende overflater

Teksturene ovenfor viser hvordan overflaten på en gjenstand ikke må være grov. De kan ikke fungere som repeterende fliser, men glans, refleksjon og translucens gir visuelle ledetråder om hva et objekt kan føles som i den virkelige verden.

Det søte stedet mellom tegn og filstørrelse

Et vanlig problem med noen naturlig tekstur er hvordan du gjentar det. Når folk ser på repetisjon, blir enhver illusjon av virkeligheten ødelagt. Den enkleste løsningen er å bruke større og dermed færre fliser. Med mer variasjon blir spotting repetisjon vanskeligere.

Eksempel på forskjellige fliser størrelser

Som vist ovenfor, jo bredere flisene er, desto lavere er sjansen for at folk vil oppdage repetisjon. Dessverre gir bredere fliser også større filer, noe som reduserer sidebelastningen. For mange mennesker dreper et svingende lasteskilt humøret så mye som å se en flisekant.

En annen løsning er å gjøre figurene i den enkelte flis mindre.

Eksempel på teksturer med forskjellige størrelsesegenskaper

Som vi ser, har gjentakelse av finere teksturer mindre sjanse til å bli oppdaget. Men jo finere tekstur, jo mindre karakter kan du gi den. Den fineste tekstur ville være ren støy, men det hjelper deg ikke. Naturlige teksturer fremkaller alltid en kjent overflate.

For å oppsummere bør naturlige teksturer:

  • Har nok personlighet at de ikke bare er tilfeldig støy. Dette betyr at former, eller "klumper" av piksler, skal være liknende, men ikke like.
  • Ha nok personlighet til at en scene eller humør er etablert, men ikke så mye at brukerne blir distrahert fra innholdet. Dette betyr at ingen klare "klumper" eller andre egenskaper skal skille seg ut når de ses fjernt.
  • Vær tilfeldig nok for å unngå repetisjon. Teksturens egenskaper må ikke danne et mønster som folk kunne se uten å fokusere.

Hvordan gjør vi alt dette?

Opprette teksturer i Photoshop

Mange programmer gjør det mulig for designere å lage sine egne naturlige teksturer. Og Internett har ingen mangel på nedlastbare teksturer. Å skape din egen tekstur kan være en givende, ikke-opphavsrettslig opphavsrettslig opplevelse som bidrar til en virkelig unik design.

1. Lag et nytt Photoshop-dokument med en hvit bakgrunn. For dette eksempelet vil vi gjøre det 600 x 300 piksler.

2. Fyll bakgrunnen med svart.

3. Tegn tilfelle hvite streker spisset i samme generelle retning. I dette eksemplet bruker vi en enkel hardkornig pensel. Ulike børstetips vil skape forskjellige resultater.
trinn 3

4. Bruk smussverktøyet til å smøre strekkene i tilfeldige uskarpe kanter. En fuzzy-edged spiss (med en hardhet lavere enn 30) fungerer best. Men forvrengt tekstur blir, vil de beste resultatene ha mange nyanser av grå.
trinn 4

5. Gå til Filter> Støy> Legg til støy , og legg til statisk etter smak. Så filter> Annet> High Pass . Sammen legger disse til flere gråtoner (viktig for trinn 6) og litt grus.
trinn 5

6. Lag et gradient kartlag. Dette spesielle laget gjelder farge til underliggende lag basert på tonen. I motsetning til normale gradienter, som farges i piksler basert på plassering, farges fargetoner i høydepunkter, midttoner og skygger. Bruk lavmettet farger, spesielt grønn, brun og blå, for å simulere naturens farger.
trinn 6

trinn 6
Over, resultatet av å bruke et brunt og gult gradientkart.

7. Beskjær en interessant del av tekstur. Prøv å ikke bruke mer enn halvparten av hele bildet. Vi vil bruke resten snart.
avling

8. Viktig: Lag den beskårte flis som en egen fil. Du trenger den opprinnelige filen senere.

Detaljer som vises her er bevisst store for å demonstrere teknikken, men resultatet er ikke dårlig for en tekstur. Slik fungerer prosessen generelt:

  • Enhver størrelse du føler deg passende vil gjøre. Større fliser vil ha mer realistiske trekk, men være større i filstørrelse. Begynn alltid mye større enn du trenger, fordi kantene på en tekstur som ble laget fra grunnen, vil sjelden passe til kanvasens kanter.
  • Lag en rekke merker med samme verktøy eller verktøy. Essensen av en tekstur er etablert ved å plukke en lignende teknikk eller to og bruke dem mange ganger.
  • Legg litt kaos med Photoshop-filtre.
  • Legg til farge: gradient kart for å understreke dybde, og flekker av tilfeldig farge for splatters. Bruk lavmettet farger, spesielt grønn, brun og blå, for å simulere naturens farger.

Lag fliser sømløst

Naturlig eller ikke, de fleste teksturer og mønstre bør være sømløse. Det vil si at besøkende ikke skal kunne se kantene på den gjentatte flisen. Hvordan gjør vi dette? Flisen selv gir løsningen.

diagram som viser hvordan du bytter sider

9. Over, deles bildet langs de blå og røde linjene. Fordi piksler langs spalten allerede er i samsvar, beveger de dem til hver side, slik at venstre og høyre kant passer. Selvfølgelig eksisterer problemet fortsatt, men det er lettere å fikse.

diagram som viser hvordan erstatt sømmen i midten

10. Denne firkantede flisen kommer fra et større bilde. Over er flisens splitt fylt med materiale fra hele bildet. Gjenta trinn 8 for å fikse den horisontale sømmen (øverst og nederst på bildet).

Den endelige eiendommen

Den enkle tekstur som er opprettet ovenfor, har en skarp feil: fordi den var designet for å demonstrere prosessen, gjentas egenskapene for ofte.

En naturlig tekstur er karakteristika er vanligvis mindre enn en tiendedel av hele flisen. Det vil si at for en flis som måler 500 x 100 piksler, vil den største rynken, rill eller andre markere måle 50 x 10 piksler eller mindre.

Velutviklede teksturer krever en ekstra funksjon: tid. Kort for å laste ned en freebie, må du ta deg tid til å utvikle og forfine en god tekstur. Men ikke tenk på det som en læreplass. Det er en del av prosessen, naturlig.


Skrevet utelukkende for Webdesigner Depot av Ben Gremillion. Ben er freelance webdesigner hvem løser kommunikasjonsproblemer med bedre design.

Hvordan lager du naturlig utseende teksturer? Del dine ideer i kommentarene nedenfor.