Vytváření a aplikace přírodních textur
Textury způsobují, že webová stránka je hmatatelná.
Obsahují vztah k fyzickému světu, pocit místa a skutečnost, s níž se lidé mohou vztahovat.
Bohužel, simulace fyzických textur není tak jednoduchá, jako fotografování nebo běh několika filtrů aplikace Photoshop.
Člověk musí míchat náhodný hluk a rozpoznatelné vzory, usilující o podobnosti spíše než čisté opakování.
Zde budeme diskutovat o tom, co dává texturám organickou kvalitu , a podíváme se na techniky pro vytváření a aplikaci přirozených textur a hladkých dlaždic.
Sense of Touch přes zrak
"Textura" je povrch fyzické látky nebo předmětu. Stejně jako pohledem, náš smysl pro dotek nám pomáhá pochopit objekty. Drsné, hladké, hladké a drobivé jsou textury a povídají někoho, z čeho je objekt vyroben, kde to bylo a jestli to souvisí s něčím jiným.
Na webu je pocit dotyku člověka omezen na vstupní zařízení. Ale ne všechny webové stránky potřebují "cítit" totéž. Na základě svých zkušeností s manipulací s každodenními předměty spojují lidé určité vzhledy s určitými textury. V digitálním umění lze říci, že textura je jak něco "cítí" do očí.
Zatímco moderní obrazové editory usnadňují tvorbu textury, ne každá struktura je jistým vítězem. Vytvoření přirozené vzhledové struktury je choulostivý úkol, který kombinuje vzorek, chaos a použití k vytvoření charakteru.
Přírodní textury mají míru náhodnosti
Mnoho textur spadá mezi dva extrémy: pravidelné vzory a náhodný šum. Textury založené na vzorech se neomlouvají za to, že vypadají uměle. Mohou být složeny ze známého symbolu nebo textu a vždy mají předvídatelné uspořádání.
Dole jsou vzory dlaždic.
U druhého extrému jsou textury založené na šumu náhodně statické. Snadno se vytvářejí - Photoshop má svůj vlastní filtr "Add Noise" - a snadno se dají dlaždit, protože postrádají všechny funkce, které při odříznutí vypadají zvláštně.
Nahoře, vzorky hlučné textury.
Přírodní vyhlížející textury sedí někde mezi pravidelnými vzory a náhodným šumem.
Nahoře řada textur míchá vzory a hluk v různé míře.
Zatímco nic není špatného s extrémem, mnoho dobrých textur má vlastnosti obou. V přirozeně vyhlížejících strukturách jsou švy chybějící nebo obtížně viditelné a v opakovaných dlaždicích nelze identifikovat žádné vzory. Jejich vzhled je zřetelný a účinný jako každý pravidelný vzor, ale méně okázalý.
"Organické" struktury mají správnou kombinaci šumu a vzoru.
Racionální chaos, řádný hluk
V kontextu textury se "šum" týká nepravidelných změn ve skupině pixelů. Filmové zrno, artefakty s nízkým světlem a dithering jsou tři běžné typy šumu, které jsou žádoucí nebo ne, často najdeme v komplexních snímcích.
Textový hluk způsobuje, že přirozené povrchy vypadají přirozeně. Ale to není prostě statické. Spíše texturní hluk vyrovnává chaos a pořadí.
Jeden geometrický tvar opakovaný mnohokrát vytváří vzorek. Vlevo se tvar liší pouze v umístění: řádky nejsou úplně vyrovnané.
Ostatní snímky zobrazují změny úhlu, hustoty a velikosti tvaru. Texty vyrobené z těchto tvarových změn by vypadaly chaoticky - ale všechny textury by si zachovaly originální jedinečný charakter, protože variace jsou založeny na stejném základním tvaru.
Samozřejmě výsledek stále vypadá uměle. Zřejmé opakování textur založených na šumu zničí tento efekt, protože lidé jsou velmi dobře schopni rozpoznat vzory. Textury v reálném světě mají různé tvary, barvy a hloubky.
Nad texty reálného světa se objevují jak šum, tak i opakování. Burlap, růžový žulový a voskový papír mají své vlastní "pravidelné nepravidelné" vzory, ale každý je stále odlišný od ostatních.
- S předvídatelnými horizontálními a vertikálními liniemi je nejčastěji pytlovina. Ale řádky nejsou dokonalé. Mírné rozdíly v tónu a směru udržují vzorek z pohledu umělé.
- Pockmarks v žuly nejsou rovnoměrně rozloženy. Vidět nerovnosti nahoru blízko je těžké. Tato charakteristika se stává zjevnějším, když je vidět na široké ploše.
- Voskový papír má nejmenší kontrast a nejmenší osobnost. Několik shluků tmavých odstínů ji nechává být náhodným hlukem.
Každá struktura má jisté rysy - ať už jsou to pockmarks, pruhy, skvrny nebo rytiny -, které z ní činí jedinečnou. Změny v těchto charakteristikách způsobují, že funguje.
Nadto obsahuje kovová struktura překrývající se tvarované okraje v určitém pořadí, ale zachovává svůj odlišný charakter. (Texture courtesy Design Mag .)
Hloubka a kontrast od Murmurs po křik
Klíčovou proměnlivostí jakékoli přirozené textury je hloubka. "Bumpiness" textury poskytuje pocit hmatu více než barva nebo velikost. Ale hloubka také dodává kontrast, který přitahuje pozornost a může zhoršit čitelnost.
Křikavá textura na pozadí zvýší objem samotného obsahu. V jakém okamžiku je to příliš hlasité? To závisí na síle obsahu a dispozice diváků.
Je-li hlasitá struktura přizpůsobená předmětu, přispívá k náladě. Pokud však narušuje čitelnost, máte problém.
Který z výše uvedených textů je nejjednodušší číst? Která struktura nejlépe odráží zprávu v písemné podobě? Může jít o více než jednu správnou odpověď, ale existuje pouze jeden vodítko: při míchání textur a obsahu, zejména textového obsahu, zajistěte, aby okraje obsahu zůstaly viditelné.
Když už mluvíme o okrajích, pro extra realismus věnujte pozornost tomu, kde končí textura. Slizký nebo zubatý textury, například, nemusí skončit v ideální linii. Namísto toho je nechte vylévat nebo rozpadat na další povrch. Trikem je přemýšlet o všechno na stránce jako o povrchu s textem, a to i v případě, že je to obyčejná plná barva.
Texty, které se projevují světelnými zdroji
Ne každá struktura potřebuje hluboké trhliny, aby vypadala hmatatelně. Zvažte lesklou barvu. Bez hřebenů nebo hrbolů, její pocit smaltu pochází z jeho lesku.
Výše uvedené textury ukazují, jak povrch objektu nemusí být drsný. Nesmí fungovat jako opakující se dlaždice, ale lesk, reflexe a průsvitnost poskytují vizuální stopy o tom, jaký objekt může v reálném světě vypadat.
Sladké místo mezi znakem a velikostí souboru
Obvyklým problémem s jakoukoliv přirozenou strukturou je, jak to opakovat. Když lidé objeví opakování, jakákoli iluze reality je zničena. Nejjednodušším řešením je použití větších - a tím i méně dlaždic. Při větších změnách se opakování nápisů ztíží.
Jak je uvedeno výše, čím širší jsou dlaždice, tím nižší je pravděpodobnost, že lidé uvidí opakování. Bohužel širší dlaždice také umožňují větší soubory, které zpomalují načítání stránky. Pro mnoho lidí, vznášející se nakládací značka zabíjí náladu stejně jako vidět hranu dlaždice.
Dalším řešením je zmenšit tvary v jednotlivých dlaždicích.
Jak vidíme, opakování jemnějších textur má menší pravděpodobnost, že se objeví. Ale jemnější textura, tím méně postavy můžete dát. Nejjemnější textura by byla čistě hluk - ale to vám nepomůže. Přírodní textury vždy vyvolávají známý povrch.
Stručně řečeno, přirozené textury by měly:
- Mějte dostatek osobnosti, že nejde jen o náhodný zvuk. To znamená, že tvary nebo "shluky" obrazových bodů by měly být podobné, ale ne identické.
- Mějte dostatek osobnosti, že je vytvořena scéna nebo nálada, ale nikoliv tolik, že uživatelé jsou z obsahu vyrušeni. To znamená, že při pohledu z dálky by neměly vyčnívat žádné zřetelné "shluky" nebo jiné charakteristiky.
- Buďte náhodní, abyste se vyhnuli opakování. Vlastnosti struktury nesmí vytvářet vzor, který by lidé mohli pozorovat bez soustředění.
Jak to všechno děláme?
Vytváření textur ve Photoshopu
Mnoho programů umožňuje návrhářům vytvářet vlastní přirozené textury. A web nemá žádný nedostatek stahovatelných textur. Vytvoření vlastní textury může být obohacující, neporušující autorská práva, která přispívá k opravdu jedinečnému designu.
1. Vytvořte nový dokument aplikace Photoshop s bílým pozadím. V tomto příkladu to uděláme 600 x 300 pixelů.
2. Naplňte pozadí černou barvou.
3. Nakreslete náhodné bílé tahy namířené ve stejném obecném směru. V tomto příkladu používáme jednoduchý kartáč s tvrdými okraji. Různé typy kartáčů budou mít různé výsledky. 
4. Nástroj rozmazání použijte k rozmazání tahů na náhodně rozmazané hrany. Špička s fuzzy hranou (s tvrdostí nižší než 30) funguje nejlépe. Nicméně zkreslení textury se stává, nejlepší výsledky budou mít mnoho odstínů šedé. 
5. Přejděte na možnost Filtr> Hluk> Přidat hluk a přidejte statický postup podle vašeho vkusu. Pak Filtr> Ostatní> Vysoká propustnost . Společně tyto přidávají více šedých tónů (životně důležité pro krok 6) a trochu štěrku. 
6. Vytvořte vrstvu Gradient Map. Tato speciální vrstva na základě jejich tónu aplikuje barvu na podkladové vrstvy. Na rozdíl od normálních přechodů, které v závislosti na umístění v barvách v pixelech mapuje gradient barvy ve zvýrazněných, středních tónech a stínech. Použijte nízkoasyté barvy, zejména zelené, hnědé a modré, abyste simulovali barvy přírody. 
Nahoře je výsledkem použití hnědé a žluté gradientní mapy.
7. Ořízněte zajímavou část texturou. Zkuste nepoužít více než polovinu celého obrázku. Krátce využijeme zbytek. 
8. Důležité: Uložte ořezané dlaždice jako samostatný soubor. Budete potřebovat původní soubor později.
Podrobnosti zde uvedené jsou záměrně velké, aby demonstrovaly techniku, ale výsledek není pro texturu špatný. Jak funguje tento proces obecně:
- Každá velikost, kterou považujete za vhodnou, bude dělat. Větší dlaždice budou mít více realistických vlastností, ale budou mít větší velikost souboru. Vždy začněte mnohem větší, než potřebujete, protože okraje textury, které byly vytvořeny od začátku, se zřídka shodují s okraji plátna.
- Vytvořte sérii značek se stejným nástrojem nebo nástroji. Podstata struktury je vytvořena vybíráním podobné techniky nebo dvou a používáním je mnohokrát.
- Přidejte trochu chaosu s filtremi aplikace Photoshop.
- Přidání barvy: gradientové mapy k zdůraznění hloubky a skvrny náhodných barev pro stříkání. Použijte nízkoasyté barvy, zejména zelené, hnědé a modré, abyste simulovali barvy přírody.
Make dlaždice bezešvé
Přirozeně vypadající nebo ne, většina textur a vzory by měla být hladká. To znamená, že návštěvníci by neměli vidět okraje opakující se dlaždice. Jak to děláme? Dlaždice sama poskytuje řešení.
9. Nahoře je obraz rozdělen podél modré a červené čáry. Vzhledem k tomu, že pixely podél dělení se již shodují, přesouvání na obě strany zajišťuje, že se budou shodovat levý a pravý okraj. Samozřejmě, problém stále existuje, ale je snadnější jej opravit.
10. Tato čtvercová dlaždice pochází z většího obrazu. Dále je rozdělení dlaždic vyplněno materiálem z plného obrazu. Opakujte krok 8, abyste upevnili horizontální šev (v horní a spodní části obrázku).
Konečná nemovitost
Jednoduchá struktura vytvořená výše má zjevnou vadu: protože byla navržena tak, aby demonstrovala proces, jeho charakteristiky se opakují příliš často.
Vlastnosti přirozené textury jsou obvykle menší než jedna desetina celé dlaždice. To znamená, že u dlaždice o rozměrech 500 x 100 pixelů by největší vrásek, vršek nebo jiný znak měřil 50 x 10 pixelů nebo méně.
Dobře vytvořené textury vyžadují ještě jednu funkci: čas. Krátce po stažení freebie, musíte mít čas vyvíjet a zdokonalit skvělé textury. Ale nemyslete na to jako na práci. Je to přirozeně součástí procesu.
Napsaný výhradně pro Webdesigner Depot Ben Gremillion. Ben je na volné noze web designer který řeší komunikační problémy s lepším designem.
Jak vytvoříte přirozené textury? Sdílejte své nápady v níže uvedených komentářích.