Luonnonmukaisten tekstuurien luominen ja soveltaminen
Sivustot tekevät verkkosivustosta tuntuvia.
Ne antavat sisällölle suhdetta fyysiseen maailmaan, paikka-tunteen ja todellisuuden, johon ihmiset voivat liittyä.
Valitettavasti fyysisten tekstuurien simulointi ei ole yhtä helppoa kuin valokuvan kuvaaminen tai muutaman Photoshop-suodattimen käyttäminen.
Yksi on sekoitettava satunnaista kohinaa ja tunnistettavia kuvioita, jotka pyrkivät samankaltaisuuksiin pikemminkin kuin puhdasta toistoa.
Tässä keskustelemme siitä, mikä antaa tekstuureille orgaanisen laadun , ja tarkastelemme tekniikoita, joilla luodaan ja sovelletaan luonnollisia kuvioita ja saumattomia laatat.
Sense of Touch kautta näkö
"Rakenne" on fysikaalisen aineen tai esineen pinta. Kuten näkö, kosketuksen tunne auttaa meitä ymmärtämään esineitä. Karkea, sileä, liukas ja murrosi ovat tekstuureja ja kertovat jollekulle, mistä on tehty esine, missä se on ollut ja jos se liittyy johonkin muuhun.
Webissä henkilön kosketuksen tunne on rajoitettu niiden syöttölaitteeseen. Mutta kaikkien sivustojen ei tarvitse tuntea samaa. Arjen esineiden käsittelystä saadun kokemuksen perusteella ihmiset yhdistävät tietyt esiintymät tiettyihin tekstuureihin. Digitaalisessa taiteessa voisi sanoa, että tekstuuri on, miten jotain "tuntuu" silmille.
Modernit kuvankäsittelytoimet tekevät tekstuurista helppoa, eikä jokainen tekstuuri ole varmasti voittaja. Luonnollisen näköisen tekstuurin luominen on hankala tehtävä, joka sekoittaa kuvioita, kaaosta ja käyttöä luodakseen luonnetta.
Luonnonväriset tekstuurit ovat mittauksia satunnaisuudesta
Monet tekstuurit kuuluvat kahden ääripään välillä: säännölliset kuvioinnit ja satunnaismelu. Pattern-pohjaiset tekstuurit eivät anna anteeksi apuvälineitä. Ne voivat koostua tunnetusta tunnuksesta tai tekstistä, ja niillä on aina ennustettavissa oleva järjestely.
Edellä, näytteet kaakeloitu kuvioita.
Toisessa ääripäässä melupohjaiset tekstuurit ovat satunnaisia staattisia. Niitä on helppo luoda - Photoshopilla on oma "Add Noise" -suodatin ja helppo laatta, koska niillä ei ole ominaisuuksia, jotka näyttävät outoa, kun ne leikataan.
Edellä, näytteet meluisista kuvioista.
Luonnonmukaiset tekstuurit istuvat jonnekin säännöllisten kuvioiden ja satunnaisen melun välillä.
Yläpuolella erilaisia tekstuureja sekoittaa malleja ja melua vaihtelevasti.
Vaikka mikään ei ole vikaa kummallakin äärimmäisellä, monilla hyvillä tekstuureilla on molempien ominaisuuksia. Luonnossa näyttävissä kuvioissa saumat puuttuvat tai on vaikea havaita, emmekä pysty tunnistamaan kuvioita toistuvissa laatoissa. Heidän ulkoasunsa on yhtä selkeä ja tehokas kuin mikä tahansa säännöllinen malli, mutta vähemmän räikeä.
"Orgaaniset" tekstuurit ovat oikea yhdistelmä melua ja kuvioita.
Rationaalinen kaaos, tavallinen melu
Tekstin yhteydessä "kohina" viittaa epäsäännöllisiin muunnelmiin pikseleiden ryhmässä. Filmien viljely, heikosti valoiset esineiden ja dithering ovat kolme yleistä tyyppistä melua, joka toivottavaa tai ei, on usein löydetty monimutkaisia kuvia.
Tekstuurimelu tekee luonnollisista pinnoista luonnollisen. Mutta se ei ole pelkästään staattinen. Pikemminkin tekstuurin melu tasapainottaa kaaosta ja järjestystä.
Yllä, yksittäinen geometrinen muoto toistuu monta kertaa luo kuvion. Vasemmalla muoto vaihtelee vain sijoittelussa: rivit eivät ole täysin tasaisia.
Muut kuvat näyttävät muutoksia muodon kulmassa, tiheydessä ja koossa. Näistä muunnelmista valmistetut tekstuurit näyttäisivät enemmän kaoottisilta, mutta kaikki tekstuurit säilyttäisivät alkuperäisen ainutlaatuisen luonteen, koska muunnelmat perustuvat samaan perusmuotoon.
Tietenkin tulos on edelleen keinotekoinen. Ilmeiset toistumiset melupohjaisissa tekstuureissa pilata vaikutuksen, koska ihmiset ovat erittäin hyviä tunnistamaan kuvioita. Todellisessa maailmassa olevat tekstuurit vaihtelevat muodon, värin ja syvyyden mukaan.
Edellä, reaalimaailman tekstuurit osoittavat sekä melua että toistoa. Burlap, vaaleanpunainen graniitti ja vahapaperi ovat omat "säännölliset epäsäännölliset" -mallissansa, mutta kukin erottuu toisistaan.
- Sen ennustettavissa olevilla vaaka- ja pystysuorilla linjoilla on hihna. Mutta linjat eivät ole täydellisiä. Sävy- ja suunnan pienet vaihtelut pitävät kuvion näkymästä keinotekoisesti.
- Graniittikohdat eivät ole tasaisesti jakautuneita. Se, että epätasaisuus on lähellä, on vaikea. Ominaisuus tulee ilmeisemmäksi, kun se nähdään laajalla alueella.
- Vahvapaperilla on sekä vähäinen kontrasti että vähiten persoonallisuus. Muutamia tummia sävyjä pidättävät sen satunnaisesta melusta.
Jokaisella tekstuurilla on tiettyjä ominaisuuksia - olivatpa ne rypyt, raitoja, pilkkuja tai rakeita - jotka tekevät siitä ainutlaatuisen. Näiden ominaisuuksien vaihtelut tekevät siitä toimivan.
Ylempi, metallinen rakenne koostuu päällekkäisistä rei'itetyistä muodoista, joita ei ole erityisessä järjestyksessä, mutta se säilyttää sen erillisen luonteen. (Tekstuuri kohteliaasti Design Mag .)
Syvyys ja kontrastialue Murmursilta huutoihin
Minkä tahansa luonnollisen tekstuurin keskeinen muuttuja on syvyys. Koostumuksen "epätasaisuus" antaa tunnetta enemmän kuin väri tai koko. Mutta syvyys lisää myös kontrastia, joka herättää huomiota ja saattaa heikentää luettavuutta.
Taustalla oleva huutava tekstuuri nostaa sisällön äänenvoimakkuutta. Missä vaiheessa se on liian kovaa? Tämä riippuu sisällön voimasta ja yleisön halusta.
Jos kova rakenne sopii aiheeseen, se vaikuttaa mielialaan. Mutta jos se häiritsee luettavuutta, sinulla on ongelma.
Mikä näistä kirjoituksista on helpoin lukea? Mikä tekstuuri heijastaa parhaiten sanomaa kirjoituksessa? Voi olla useampi kuin yksi oikea vastaus, mutta on vain yksi ohje: sekoitettaessa tekstuureja ja sisältöä, erityisesti tekstisisältöä, varmistetaan, että sisällön reunat ovat näkyvissä.
Puhuminen reunuksista, lisää realismia, kiinnittää huomiota siihen, mihin tekstuuri päättyy. Esimerkiksi hilseilevien tai rankojen tekstuurien ei tarvitse päättyä täydelliseen linjaan. Sen sijaan anna niiden imeytyä tai murentua seuraavaan pintaan. Pelin tarkoituksena on ajatella kaikkea sivulta pintakuvana, vaikkakin se on tavallinen yhtenäinen väri.
Tekokuvat, jotka tulevat näkyviin valonlähteillä
Kaikki tekstuurit eivät vaadi syviä halkeamia. Harkitse kiiltävää maalia. Ilman harjanteita tai kuoppia, sen liukas emali tuntuu itsestään.
Yllä olevat tekstuurit osoittavat, kuinka kohteen pinnan ei tarvitse olla karkea. Ne eivät välttämättä toimi toistuvina laattoina, mutta silta, heijastus ja läpikuultavuus antavat visuaalisia vihjeitä siitä, mikä kohde voi tuntua reaalimaailmalta.
Luonnon ja tiedoston kokoisen Sweet Spot
Yleinen ongelma luonnollisen rakenteen kanssa on se, miten toistaa se. Kun ihmiset kohtaavat toistamisen, kaikki todellisuuden illuusio tuhoutuu. Helpoin ratkaisu on käyttää suurempia ja siten vähemmän laatat. Useammin vaihtelevasti, toistuvuus toistuu vaikeammaksi.
Kuten edellä on esitetty, sitä laajemmat laatat, sitä pienempi on mahdollisuus, että ihmiset kohtaavat toiston. Valitettavasti laajemmat laatat tekevät myös suurempia tiedostoja, jotka hidastavat sivun lataamista. Monille ihmisille leijuveden lastausmerkki tappaa mielialan niin paljon kuin näkyy laattojen reuna.
Toinen ratkaisu on tehdä yksittäisten laattojen pienemmät muodot.
Kuten näemme, hienommilla tekstuureilla toistetaan vähemmän mahdollisuutta havaita. Mutta hienompi tekstuuri, sitä vähemmän merkki voit antaa sille. Kaikkein hienoin tekstuuri olisi puhdasta melua - mutta se ei auta sinua. Luonnolliset tekstuurit aina herättävät tunnetun pinnan.
Yhteenvetona luonnolliset tekstuurit:
- Onko tarpeeksi persoonallisuutta, että he eivät ole vain satunnainen melu. Tämä tarkoittaa, että kuvioiden muodot, tai "palaset", on oltava samanlaisia, mutta eivät ole identtisiä.
- Onko tarpeeksi persoonallisuutta, että kohtaus tai tunnelma on luotu, mutta ei niin paljon, että käyttäjät ovat hämmentynyt sisällöstä. Tämä tarkoittaa sitä, että erillisiä "möhkäleitä" tai muita ominaisuuksia ei tule erottua kaukaa katsottuna.
- Olkaa tarpeeksi satunnaisia välttämään toistoa. Tekstuurin ominaisuudet eivät saa muodostaa mallia, jonka ihmiset voisivat paikantaa tarkentamatta.
Miten voimme tehdä kaiken tämän?
Tekstuvien luominen Photoshopissa
Monet ohjelmat antavat suunnittelijoille mahdollisuuden luoda omia luonnollisia kuvioita. Verkossa ei ole pulaa ladattavista kuvioista. Oman tekstuurin luominen voi olla palkitseva, ei-tekijänoikeutta rikkova kokemus, joka edesauttaa aidosti ainutlaatuista muotoilua.
1. Luo uusi Photoshop-dokumentti, jossa on valkoinen tausta. Tässä esimerkissä teemme 600 x 300 pikseliä.
2. Täytä tausta mustalla.
3. Piirrä satunnaiset valkoiset viivat suuntautuvat samaan yleiseen suuntaan. Tässä esimerkissä käytämme yksinkertaista kovaa harjaa. Erilaiset siveltimen vinkit luovat erilaisia tuloksia. 
4. Käytä tahraustyökalua halkeamaan aistit satunnaisiin epäselväihin reunuksiin. Sumea reuna-kärki (jonka kovuus on alle 30) toimii parhaiten. Kuitenkin vääristynyt tekstuuri tulee, parhaat tulokset ovat useita sävyjä harmaa. 
5. Siirry Suodata> Melu> Lisää kohinaa ja lisää staattinen makusi mukaan. Sitten Suodata> Muu> Korkea Pass . Yhdessä nämä lisäävät harmaita sävyjä (elintärkeää vaiheelle 6) ja vähän hiekkaa. 
6. Luo Gradient Map -kerros. Tämä erityinen kerros soveltaa väriä taustalla oleviin kerroksiin niiden äänen perusteella. Toisin kuin normaalilla gradientilla, joka väri sijainnin perusteella kuvapisteinä, gradientti karttaa värejä kohokohdissa, keskitasoluissa ja varjoissa. Käytä vähän tyydyttyneitä värejä, erityisesti vihreitä, ruskeita ja sinisiä, simuloimaan luonnon värejä. 
Edellä, ruskean ja keltaisen gradientin kartan soveltaminen.
7. Rajaa mielenkiintoinen osa tekstuuria. Yritä olla käyttämättä yli puolta koko kuvasta. Käytämme loput pian. 
8. Tärkeää: Tallenna leikattu laatta erillisenä tiedostona. Tarvitset alkuperäisen tiedoston myöhemmin.
Tässä esitetyt yksityiskohdat ovat tarkoituksella suuria osoittamaan tekniikkaa, mutta tulos ei ole huono rakenteelle. Näin prosessi toimii yleensä:
- Mitkä tahansa koot, joita pidät tarpeellisina, tekevät. Suuremmat laatat ovat realistisempia, mutta suuremmat tiedostokokoisina. Aloita aina paljon suurempia kuin tarvitset, koska tyhjästä koostuvan tekstuurin reunat vastaisivat harvoin kankaan reunoja.
- Luo sarja merkkejä samalla työkalulla tai työkaluilla. Tekstin ydin luodaan poimimalla samanlainen tekniikka tai kaksi ja käyttämällä niitä monta kertaa.
- Lisää hieman kaaosta Photoshop-suodattimilla.
- Lisää väriä: kaltevuuskartat korostamaan syvyyttä ja roiskeiden satunnaisia värejä. Käytä vähän tyydyttyneitä värejä, erityisesti vihreitä, ruskeita ja sinisiä, simuloimaan luonnon värejä.
Tee laatat saumattomaksi
Luonnollisen näköisen tai ei, useimpien tekstuurien ja kuvioiden pitäisi olla saumattomia. Eli vierailijat eivät saa nähdä toistuvan laattojen reunoja. Miten voimme tehdä tämän? Laatta itse tarjoaa ratkaisun.
9. Yllä, kuva on jaettu pitkin sinisiä ja punaisia viivoja. Koska halkaisijan pikselit jo sovittavat, siirtäminen molemmille puolille varmistaa, että vasen ja oikea reunat vastaavat. Tietenkin ongelma on edelleen olemassa, mutta sitä on helpompi korjata.
10. Tämä neliölaatta tulee suuremmasta kuvasta. Ylempi, laatta jakautuminen on täynnä materiaalia koko kuva. Toista vaihe 8 horisontaalisen sauman korjaamiseksi (kuvan ylä- ja alareunassa).
Lopullinen omaisuus
Yksinkertainen tekstuuri, joka luodaan edellä, on häikäisevä virhe: koska se on suunniteltu osoittamaan prosessia, sen ominaisuudet toistuvat liian usein.
Luonnonkudoksen ominaisuudet ovat yleensä alle kymmenesosa koko laatta. Eli, jos laatta mittaa 500 x 100 pikseliä, suurin wrinkle, rill tai muu merkki mittaa 50 x 10 pikseliä tai vähemmän.
Hyvin muotoillut tekstuurit vaativat vielä lisää ominaisuutta: aika. Lyhyt lataamasta ilmaislaatua, sinun on otettava aikaa kehittää ja hienosäätää suurta tekstuuria. Mutta älä ajattele sitä kovaa työtä. Se on osa prosessia, luonnollisesti.
Kirjoitettu yksinomaan Ben Gremillionin Webdesigner Depotille. Ben on freelance nettisivujen suunnittelija joka ratkaisee viestinnän ongelmat paremmalla suunnittelulla.
Miten luodaan luonnollisia kuvioita? Jaa ideasi alla oleviin kommentteihin.