Tworzenie i stosowanie naturalnych tekstur
Tekstury sprawiają, że strona internetowa wydaje się namacalna.
Dają treść związek ze światem fizycznym, poczucie miejsca i rzeczywistość, do której ludzie mogą się odnosić.
Niestety, symulowanie fizycznych tekstur nie jest tak proste jak zrobienie zdjęcia lub uruchomienie kilku filtrów Photoshopa.
Trzeba mieszać losowy szum i rozpoznawalne wzory, dążąc do podobieństw, a nie do czystego powtarzania.
Omówimy tutaj, co nadaje teksturom ekologiczną jakość , a przyjrzymy się technikom tworzenia i stosowania naturalnie wyglądających tekstur i bezszwowych płytek.
Poczucie dotknięcia poprzez wzrok
"Tekstura" to powierzchnia fizycznej substancji lub przedmiotu. Podobnie jak wzrok, nasz zmysł dotyku pomaga nam zrozumieć przedmioty. Szorstkie, gładkie, śliskie i kruche są tekstury i powiedz komuś, z czego jest zrobiony obiekt, gdzie był i czy jest powiązany z czymś innym.
W Internecie zmysł dotyku osoby ogranicza się do urządzenia wejściowego. Ale nie wszystkie witryny muszą "czuć" to samo. Opierając się na ich doświadczeniach z obsługi przedmiotów codziennego użytku, ludzie wiążą pewne wyglądy z pewnymi teksturami. W sztuce cyfrowej można powiedzieć, że faktura jest tym, jak coś "odczuwa się" w oczach.
Podczas gdy nowoczesne edytory graficzne ułatwiają tworzenie tekstur, nie każda tekstura jest zwycięzcą murowania. Tworzenie naturalnie wyglądającej tekstury jest trudnym zadaniem, które miesza wzór, chaos i użycie, aby stworzyć postać.
Naturalne tekstury mają miarę losowości
Wiele tekstur znajduje się pomiędzy dwoma skrajnościami: regularnymi wzorcami i losowym szumem. Tekstury oparte na strukturze nie przepraszają za wyglądanie sztucznie. Mogą one składać się ze znanego symbolu lub tekstu i zawsze mają przewidywalny układ.
Powyżej, próbki wzorów kafli.
Z drugiej strony tekstury oparte na szumie zawierają losowe zakłócenia statyczne. Są łatwe do utworzenia - Photoshop ma własny filtr "Dodaj szum" - i jest łatwy w układaniu, ponieważ brakuje mu funkcji, które wyglądają dziwnie po obcięciu.
Powyżej, próbki głośnych tekstur.
Naturalnie wyglądające tekstury znajdują się gdzieś pomiędzy regularnymi wzorami i przypadkowym szumem.
Powyżej, zakres tekstur miesza wzory i szum w różnym stopniu.
Podczas gdy nic nie jest nie tak ze skrajnością, wiele dobrych tekstur ma cechy obu. W teksturach o naturalnym wyglądzie, szwy są nieobecne lub trudne do wykrycia i nie możemy zidentyfikować żadnych wzorów w powtarzających się płytkach. Ich wygląd jest tak wyraźny i efektywny jak każdy regularny wzór, ale mniej rażący.
Tekstury "organiczne" mają odpowiednią kombinację szumu i wzoru.
Racjonalny chaos, uporządkowany szum
W kontekście tekstury "szum" odnosi się do nieregularnych zmian w grupie pikseli. Ziarno filmu, artefakty o słabym świetle i dithering to trzy powszechne rodzaje szumów, które, pożądane lub nie, często występują w złożonych obrazach.
Hałas tekstur sprawia, że naturalne powierzchnie wyglądają naturalnie. Ale to nie jest po prostu statyczne. Raczej hałas tekstury równoważy chaos i porządek.
Powyżej, pojedynczy powtarzany wielokrotnie kształt geometryczny tworzy wzór. Po lewej stronie kształt zmienia się tylko w położeniu: rzędy nie są równe.
Pozostałe ujęcia pokazują zmiany w kształcie, gęstości i rozmiarze kształtu. Tekstury wykonane z tych odmian kształtu wyglądałyby bardziej chaotycznie - ale wszystkie tekstury zachowałyby oryginalny charakter oryginału, ponieważ wariacje są oparte na tym samym podstawowym kształcie.
Oczywiście wynik wciąż wygląda sztucznie. Oczywiste powtórzenia w teksturach opartych na szumach zrujnują efekt, ponieważ ludzie są bardzo dobrzy w rozpoznawaniu wzorców. Tekstury w świecie rzeczywistym różnią się kształtem, kolorem i głębią.
Powyżej, rzeczywiste tekstury pokazują hałas i powtórzenia. Juta, różowy granit i papier woskowany mają swoje własne "regularne nieregularne" wzory, ale każdy nadal jest inny niż pozostałe.
- Dzięki przewidywalnym poziomym i pionowym liniom juta jest najbardziej regularna. Ale linie nie są doskonałe. Niewielkie różnice w odcieniach i kierunkach sprawiają, że wzór nie wygląda sztucznie.
- Pockmarks w granicie nie są równomiernie rozmieszczone. Widzenie bliskości jest trudne. Charakterystyka staje się bardziej widoczna, gdy widzi się ją na dużym obszarze.
- Papier woskowany ma najmniejszy kontrast i najmniejszą osobowość. Kilka kępek ciemnych odcieni sprawia, że nie jest to przypadkowy szum.
Każda tekstura ma pewne cechy - pockmarks, smugi, plamy lub rills - które sprawiają, że jest wyjątkowa. Różnice w tych cechach sprawiają, że działa.
Powyżej, metaliczna tekstura zawiera zachodzące na siebie postrzępione krawędzie w określonej kolejności, ale zachowuje swój odrębny charakter. (Tekstura dzięki uprzejmości The Design Mag .)
Zakres głębokości i kontrastu od szmerów do krzyków
Kluczową zmienną każdej naturalnej tekstury jest głębia. "Bumpiness" tekstury zapewnia poczucie dotykowości więcej niż kolor lub rozmiar. Ale głębia dodaje również kontrast, który przyciąga uwagę i może pogorszyć czytelność.
Krzycząca tekstura w tle zwiększy objętość samej treści. W którym momencie jest zbyt głośno? To zależy od siły treści i dyspozycji publiczności.
Jeśli głośna tekstura pasuje do tematu, to przyczynia się do nastroju. Ale jeśli przeszkadza to w czytelności, to masz problem.
Które z powyższych pism jest najłatwiejsze do odczytania? Która tekstura najlepiej odzwierciedla komunikat w piśmie? Może być więcej niż jedna prawidłowa odpowiedź, ale jest tylko jedna wskazówka: podczas mieszania tekstur i treści, szczególnie treści tekstowych, upewnij się, że krawędzie zawartości pozostają widoczne.
Mówiąc o krawędziach, dla dodatkowego realizmu, zwróć uwagę na to, gdzie kończy się tekstura. Na przykład śliskie lub ziarniste tekstury nie muszą kończyć się idealną linią. Zamiast tego pozwól im spłynąć lub rozpaść się na następną powierzchnię. Sztuką jest myśleć o wszystkim na stronie jako o powierzchni z teksturą, nawet jeśli jest to zwykły, jednolity kolor.
Tekstury, które stają się widoczne dzięki źródłom światła
Nie każda tekstura wymaga głębokich pęknięć, aby wyglądały namacalnie. Rozważ błyszczącą farbę. Bez wypukłości i nierówności, jego śliska emalia pochodzi z połysku.
Powyższe tekstury pokazują, że powierzchnia obiektu nie musi być szorstka. Mogą nie działać jako powtarzające się płytki, ale połysk, odbicie i przezroczystość dostarczają wizualnych wskazówek na temat tego, co obiekt może odczuwać w rzeczywistym świecie.
Słodki punkt między postacią a rozmiarem pliku
Powszechnym problemem związanym z naturalną teksturą jest sposób jej powtarzania. Kiedy ludzie zauważają powtórzenia, wszelkie iluzje rzeczywistości zostają zniszczone. Najłatwiejszym rozwiązaniem jest użycie większych, a tym samym mniej płytek. Przy większej zmienności, powtarzanie plamek staje się trudniejsze.
Jak pokazano powyżej, im szersze płytki, tym mniejsza szansa, że ludzie zauważą powtórzenia. Niestety, szersze kafelki powodują również większe pliki, które spowalniają ładowanie strony. Dla wielu osób unoszący się znak ładowania zabija nastrój tak bardzo, jak na krawędzi płytki.
Innym rozwiązaniem jest zmniejszenie kształtu poszczególnych płytek.
Jak widać powtórzenie delikatniejszych tekstur ma mniejsze szanse na dostrzeżenie. Ale im lepsza tekstura, tym mniej postaci możesz dać. Najlepszą teksturą byłby czysty szum, ale to ci nie pomoże. Naturalne tekstury zawsze przywołują znaną powierzchnię.
Podsumowując, naturalne tekstury powinny:
- Mają wystarczająco dużo osobowości, że nie są po prostu przypadkowym hałasem. Oznacza to, że kształty lub "zlepki" pikseli powinny być podobne, ale nie identyczne.
- Wystarczająco dużo osobowości, aby stworzyć scenę lub nastrój, ale nie tyle, że użytkownicy są odciągnięci od treści. Oznacza to, że nie powinny pojawiać się wyraźne "kępy" lub inne cechy, gdy są oglądane z daleka.
- Bądź na tyle losowy, aby uniknąć powtórzeń. Charakterystyka tekstury nie może tworzyć wzorca, który ludzie mogliby zauważyć bez ogniskowania.
Jak to wszystko robimy?
Tworzenie tekstur w Photoshopie
Wiele programów umożliwia projektantom tworzenie własnych naturalnych tekstur. W Internecie nie brakuje tekstur do pobrania. Stworzenie własnej tekstury może być nagradzającym doświadczeniem naruszającym prawa autorskie, które przyczynia się do prawdziwie unikalnego projektu.
1. Utwórz nowy dokument Photoshopa na białym tle. W tym przykładzie zrobimy 600 x 300 pikseli.
2. Wypełnij tło kolorem czarnym.
3. Narysuj losowe białe kreski wskazane w tym samym kierunku ogólnym. W tym przykładzie używamy prostego pędzelka o twardych krawędziach. Różne końcówki pędzla mogą dawać różne wyniki. 
4. Użyj narzędzia Smudge, aby posmarować obrysy losowymi rozmytymi krawędziami. Najlepiej działa końcówka o rozmytym ostrzu (o twardości mniejszej niż 30). Jakkolwiek zniekształca się tekstura, najlepsze wyniki będą miały wiele odcieni szarości. 
5. Przejdź do opcji Filtr> Hałas> Dodaj szum i dodaj statyczny według własnego gustu. Następnie Filter> Other> High Pass . Razem dodają więcej szarego tonu (istotne dla kroku 6) i odrobinę gry. 
6. Utwórz warstwę mapy gradientowej. Ta specjalna warstwa nakłada kolory na warstwy podrzędne w zależności od ich odcienia. W odróżnieniu od zwykłych gradientów, których kolory w pikselach zależą od położenia, mapy gradientu kolorują podświetlenia, półcienie i cienie. Używaj nisko nasyconych kolorów, szczególnie zielonych, brązowych i niebieskich, aby symulować kolory natury. 
Powyżej, wynik zastosowania brązowej i żółtej mapy gradientowej.
7. Przytnij interesującą część tekstury. Staraj się nie używać więcej niż połowy całego obrazu. Wkrótce wykorzystamy resztę. 
8. Ważne: Zapisz przycięty kafelek jako osobny plik. Będziesz potrzebował oryginalnego pliku później.
Szczegóły pokazane tutaj są celowo duże, aby pokazać technikę, ale wynik nie jest zły dla tekstury. Oto ogólny opis procesu:
- Odpowiedni rozmiar będzie odpowiedni. Większe płytki będą miały bardziej realistyczne cechy, ale będą większe w rozmiarze pliku. Zawsze zaczynaj dużo większy niż potrzebujesz, ponieważ krawędzie tekstury, które zostały wykonane od podstaw rzadko będą pasować do krawędzi płótna.
- Utwórz serię znaczników za pomocą tego samego narzędzia lub narzędzi. Istotę tekstury ustala się wybierając inną technikę lub dwie i stosując je wielokrotnie.
- Dodaj trochę chaosu z filtrami Photoshop.
- Dodaj kolor: mapy gradientu, aby podkreślić głębię i plamy losowego koloru dla splatterów. Używaj nisko nasyconych kolorów, szczególnie zielonych, brązowych i niebieskich, aby symulować kolory natury.
Spraw, aby płytki były bezszwowe
Naturalnie wyglądające lub nie, większość tekstur i wzorów powinna być płynna. Oznacza to, że użytkownicy nie powinni widzieć krawędzi powtarzającego się kafelka. Jak to robimy? Sam kafel zapewnia rozwiązanie.
9. Powyżej obraz jest podzielony wzdłuż niebieskich i czerwonych linii. Ponieważ piksele wzdłuż podziału już się zgadzają, przesunięcie ich w dowolną stronę zapewnia dopasowanie lewej i prawej krawędzi. Oczywiście problem nadal istnieje, ale łatwiej go naprawić.
10. Ta kwadratowa płytka pochodzi z większego obrazu. Powyżej podział płytki jest wypełniony materiałem z pełnego obrazu. Powtórz krok 8, aby ustalić poziomy szew (u góry i u dołu obrazu).
Ostateczna właściwość
Prosta tekstura stworzona powyżej ma rażącą wadę: ponieważ została zaprojektowana w celu zademonstrowania procesu, jej cechy powtarzają się zbyt często.
Charakterystyka naturalnej tekstury jest zwykle mniejsza niż jedna dziesiąta całej płytki. Oznacza to, że w przypadku płytki o wymiarach 500 x 100 pikseli, największa zmarszczka, rill lub inny znak będą miały wymiary 50 x 10 pikseli lub mniej.
Dobrze spreparowane tekstury wymagają jeszcze jednej funkcji: czasu. Bez pobierania freebie, musisz poświęcić czas na opracowanie i udoskonalenie wspaniałej tekstury. Ale nie myśl o tym jako o obowiązkach. Oczywiście jest to częścią procesu.
Napisany specjalnie dla Webdesigner Depot przez Ben Gremillion. Ben jest niezależny projektant stron internetowych który rozwiązuje problemy z komunikacją dzięki lepszemu projektowi.
Jak tworzysz naturalnie wyglądające tekstury? Podziel się pomysłami w komentarzach poniżej.