Natürliche Texturen erstellen und anwenden
Texturen machen eine Website greifbar.
Sie geben dem Inhalt eine Beziehung zur physischen Welt, ein Gefühl für den Ort und eine Realität, mit der sich die Menschen identifizieren können.
Leider ist das Simulieren physischer Texturen nicht so einfach wie das Aufnehmen eines Fotos oder das Ausführen einiger Photoshop-Filter.
Man muss Zufallsrauschen und erkennbare Muster mischen und nach Ähnlichkeiten streben statt nach reiner Wiederholung.
Hier werden wir besprechen, was Texturen eine organische Qualität verleiht , und wir werden Techniken zum Erstellen und Anwenden von natürlich aussehenden Texturen und nahtlosen Kacheln betrachten.
Gefühl der Berührung über das Sehen
Eine "Textur" ist die Oberfläche einer physischen Substanz oder eines Objekts. Wie der Anblick hilft uns unser Tastsinn, Objekte zu verstehen. Grob, glatt, glatt und bröckelig sind Texturen und erzählen jemandem, woraus ein Objekt besteht, wo es gewesen ist und ob es etwas anderes ist.
Im Internet ist der Tastsinn einer Person auf ihr Eingabegerät beschränkt. Aber nicht alle Websites müssen dasselbe "fühlen". Basierend auf ihrer Erfahrung mit Alltagsgegenständen assoziieren die Menschen bestimmte Erscheinungen mit bestimmten Texturen. In der digitalen Kunst könnte man sagen, dass Textur ist, wie etwas sich in den Augen "anfühlt".
Während moderne Bildbearbeitungsprogramme die Erstellung von Texturen vereinfachen, ist nicht jede Textur ein todsicherer Gewinner. Das Erstellen einer natürlich aussehenden Textur ist eine knifflige Aufgabe, bei der Muster, Chaos und Nutzung zur Schaffung von Charakter kombiniert werden.
Natürliche Texturen haben ein Maß an Zufälligkeit
Viele Texturen fallen zwischen zwei Extreme: regelmäßige Muster und zufälliges Rauschen. Pattern-basierte Texturen entschuldigen sich nicht dafür, künstlich zu wirken. Sie können aus einem bekannten Symbol oder Text bestehen und haben immer eine vorhersehbare Anordnung.
Oben, Muster von gekachelten Mustern.
Im anderen Extremfall enthalten rauschbasierte Texturen zufällige statische Effekte. Sie sind einfach zu erstellen - Photoshop hat seinen eigenen Filter "Rauschen hinzufügen" - und es ist einfach zu kacheln, da es keine Funktionen gibt, die beim Abschneiden merkwürdig aussehen.
Oben Beispiele für verrauschte Texturen.
Natürlich aussehende Texturen sitzen irgendwo zwischen regelmäßigen Mustern und zufälligem Rauschen.
Oben, eine Reihe von Texturen mischen Muster und Rauschen in unterschiedlichem Maße.
Während bei beiden Extremwerten nichts falsch ist, haben viele gute Texturen Eigenschaften von beiden. In natürlich aussehenden Texturen sind Nähte nicht oder nur schwer zu erkennen, und in wiederholten Kacheln können wir keine Muster erkennen. Ihr Aussehen ist so klar und effektiv wie jedes normale Muster, aber weniger eklatant.
"Organische" Texturen haben die richtige Kombination von Rauschen und Muster.
Rationales Chaos, ordentlicher Lärm
Im Kontext der Textur bezieht sich "Rauschen" auf unregelmäßige Variationen in einer Gruppe von Pixeln. Filmkörnung, Schwachlichtartefakte und Dithering sind drei häufige Arten von Rauschen, die oft in komplexen Bildern gefunden werden können.
Texturrauschen macht natürliche Oberflächen natürlich. Aber es ist nicht einfach statisch. Vielmehr gleicht Texturrauschen Chaos und Ordnung aus.
Oben erzeugt eine einzelne geometrische Form, die viele Male wiederholt wird, ein Muster. Auf der linken Seite variiert die Form nur in der Platzierung: Die Reihen sind nicht ganz gleichmäßig.
Die anderen Aufnahmen zeigen Veränderungen des Winkels, der Dichte und der Größe der Form. Texturen, die aus diesen Variationen in der Form gemacht werden, erscheinen chaotischer - aber alle Texturen behalten den einzigartigen Charakter des Originals, weil die Variationen auf der gleichen Grundform basieren.
Das Ergebnis sieht natürlich immer noch künstlich aus. Offensichtliche Wiederholungen in geräuschbasierten Texturen ruinieren den Effekt, weil Menschen sehr gut Muster erkennen können. Texturen in der realen Welt haben Variationen in Form, Farbe und Tiefe.
Oben zeigen reale Texturen sowohl Rauschen als auch Wiederholung. Jute, rosa Granit und Wachspapier haben ihre eigenen "regelmäßigen unregelmäßigen" Muster, aber jedes unterscheidet sich noch von den anderen.
- Mit seinen vorhersehbaren horizontalen und vertikalen Linien ist Jute das am meisten reguläre. Aber die Linien sind nicht perfekt. Leichte Abweichungen in Ton und Richtung verhindern, dass das Muster künstlich wirkt.
- Die Pockmarks im Granit sind nicht gleichmäßig verteilt. Die Unebenheiten aus der Nähe zu sehen, ist schwierig. Das Merkmal wird deutlicher, wenn es über eine große Fläche betrachtet wird.
- Das Wachspapier hat sowohl den geringsten Kontrast als auch die geringste Persönlichkeit. Ein paar Klumpen dunkler Schattierungen verhindern, dass es sich um zufällige Geräusche handelt.
Jede Textur hat bestimmte Eigenschaften - ob Pockmarks, Streifen, Flecken oder Rillen -, die sie einzigartig machen. Variationen in diesen Eigenschaften machen es funktionieren.
Oben, eine metallische Textur enthält überlappende unregelmäßige Formen in keiner bestimmten Reihenfolge, aber es behält seinen ausgeprägten Charakter. (Textur mit freundlicher Genehmigung Das Design Mag .)
Tiefe und Kontrastbereich von Murmeln bis zu Schreien
Eine Schlüsselvariable jeder natürlichen Textur ist die Tiefe. Die "Unebenheit" einer Textur bietet ein Gefühl der Taktilität mehr als Farbe oder Größe. Aber Tiefe fügt auch Kontrast hinzu, der Aufmerksamkeit erregt und die Lesbarkeit beeinträchtigen kann.
Eine kreischende Textur im Hintergrund erhöht die Lautstärke des Inhalts. An welchem Punkt ist es zu laut? Das hängt von der Stärke des Inhalts und der Disposition des Publikums ab.
Passt eine laute Textur zum Thema, trägt es zur Stimmung bei. Aber wenn es die Lesbarkeit beeinträchtigt, dann hast du ein Problem.
Welche der obigen Schriften ist am einfachsten zu lesen? Welche Textur spiegelt die Botschaft am besten wider? Es gibt möglicherweise mehr als eine richtige Antwort, aber es gibt nur eine Richtlinie: Wenn Sie Texturen und Inhalte, insbesondere textliche Inhalte, mischen, achten Sie darauf, dass die Kanten des Inhalts sichtbar bleiben.
Apropos Kanten, für zusätzlichen Realismus, achte darauf, wo die Textur endet. Schleimige oder grobkörnige Texturen zum Beispiel müssen nicht in einer perfekten Linie enden. Lassen Sie sie stattdessen in die nächste Oberfläche sickern oder bröckeln. Der Trick besteht darin, an alles auf der Seite als eine Oberfläche mit Textur zu denken, auch wenn es eine einfache, durchgehende Farbe ist.
Texturen, die mit Lichtquellen sichtbar werden
Nicht jede Textur braucht tiefe Risse, um greifbar zu sein. Betrachten Sie glänzende Farbe. Ohne Grate oder Unebenheiten, kommt sein glattes Schmelzgefühl von seinem Glanz.
Die obigen Texturen zeigen, wie die Oberfläche eines Objekts nicht rau sein muss. Sie können nicht als sich wiederholende Fliesen arbeiten, aber Glanz, Reflexion und Transluzenz liefern visuelle Hinweise darauf, wie sich ein Objekt in der realen Welt anfühlen könnte.
Der süße Fleck zwischen Zeichen und Dateigröße
Ein häufiges Problem mit jeder natürlichen Textur ist, wie man es wiederholt. Wenn Menschen Wiederholungen entdecken, wird jede Illusion der Realität zerstört. Die einfachste Lösung besteht darin, größere und damit weniger Kacheln zu verwenden. Mit mehr Variation wird Spotting-Wiederholung schwieriger.
Wie oben gezeigt, ist die Wahrscheinlichkeit, dass Menschen Wiederholungen erkennen, um so geringer, je breiter die Kacheln sind. Leider machen breitere Kacheln auch größere Dateien, was das Laden der Seite verlangsamt. Ein schwebendes Verladezeichen tötet für viele Menschen die Stimmung ebenso wie den Rand einer Fliese.
Eine andere Lösung besteht darin, die Formen in der einzelnen Fliese kleiner zu machen.
Wie wir sehen, hat die Wiederholung von feineren Texturen eine geringere Chance, entdeckt zu werden. Aber je feiner die Textur, desto weniger Charakter kann man ihm geben. Die feinste Textur wäre pures Rauschen - aber das hilft dir nicht. Natürliche Texturen rufen immer eine bekannte Oberfläche hervor.
Zusammenfassend sollten natürliche Texturen:
- Habe genug Persönlichkeit, dass sie nicht nur zufälliges Rauschen sind. Dies bedeutet, dass Formen oder "Klumpen" von Pixeln ähnlich aber nicht identisch sein sollten.
- Habe genug Persönlichkeit, dass eine Szene oder Stimmung entsteht, aber nicht so sehr, dass Nutzer vom Inhalt abgelenkt werden. Dies bedeutet, dass keine ausgeprägten "Klumpen" oder andere Merkmale aus der Ferne hervorstechen sollten.
- Seien Sie zufällig genug, um Wiederholungen zu vermeiden. Die Eigenschaften der Textur dürfen kein Muster bilden, das Menschen ohne Fokussierung erkennen könnten.
Wie machen wir das alles?
Erstellen von Texturen in Photoshop
Viele Programme ermöglichen es Designern, ihre eigenen natürlichen Texturen zu erstellen. Und das Web hat keinen Mangel an herunterladbaren Texturen. Das Erstellen einer eigenen Textur kann eine lohnende, nicht urheberrechtsverletzende Erfahrung sein, die zu einem wirklich einzigartigen Design beiträgt.
1. Erstellen Sie ein neues Photoshop-Dokument mit einem weißen Hintergrund. Für dieses Beispiel machen wir es 600 x 300 Pixel.
2. Füllen Sie den Hintergrund mit Schwarz.
3. Zeichnen Sie zufällige weiße Striche, die in die gleiche Richtung weisen. In diesem Beispiel verwenden wir einen einfachen hartkantigen Pinsel. Unterschiedliche Pinselspitzen führen zu unterschiedlichen Ergebnissen. 
4. Verwenden Sie das Wischwerkzeug, um die Striche in zufällige unscharfe Kanten zu schmieren. Eine Spitze mit unscharfer Kante (mit einer Härte von weniger als 30) funktioniert am besten. Wie verzerrt die Textur auch ist, die besten Ergebnisse werden viele Graustufen haben. 
5. Gehen Sie zu Filter> Rauschen> Rauschen hinzufügen und fügen Sie nach Ihrem Geschmack statische hinzu. Dann Filter> Andere> Hochpass . Zusammen ergeben diese mehr Grautöne (wichtig für Schritt 6) und ein bisschen Körnung. 
6. Erstellen Sie eine Verlaufsflächenebene. Diese spezielle Ebene trägt basierend auf ihrem Farbton Farbe auf die darunter liegenden Ebenen auf. Im Gegensatz zu normalen Farbverläufen, bei denen die Farbe in Pixeln basierend auf dem Standort verwendet wird, werden Verlaufsfarben in Glanzlichtern, Mitteltönen und Schatten dargestellt. Verwenden Sie niedrig gesättigte Farben, insbesondere Grün, Braun und Blau, um die Farben der Natur zu simulieren. 
Oben, das Ergebnis der Anwendung einer braunen und gelben Gradientenkarte.
7. Beschneide einen interessanten Teil der Textur. Versuchen Sie, nicht mehr als die Hälfte des gesamten Bildes zu verwenden. Wir werden den Rest in Kürze nutzen. 
8. Wichtig: Speichern Sie die zugeschnittene Kachel als separate Datei. Sie benötigen die Originaldatei später.
Die hier gezeigten Details sind bewusst groß, um die Technik zu demonstrieren, aber das Ergebnis ist nicht schlecht für eine Textur. So funktioniert der Prozess im Allgemeinen:
- Jede Größe, die Sie für angemessen halten, wird ausreichen. Größere Kacheln haben realistischere Eigenschaften, aber größere Dateigröße. Beginnen Sie immer viel größer, als Sie benötigen, da die Kanten einer Textur, die von Grund auf neu erstellt wurde, kaum mit den Kanten der Leinwand übereinstimmen.
- Erstellen Sie eine Reihe von Marken mit demselben Werkzeug oder denselben Werkzeugen. Die Essenz einer Textur wird durch das Auswählen einer ähnlichen Technik oder zwei und das häufige Verwenden derselben hergestellt.
- Fügen Sie ein wenig Chaos mit Photoshop-Filtern hinzu.
- Fügen Sie Farbe hinzu: Farbverlaufskarten, um die Tiefe zu betonen, und Flecken mit zufälliger Farbe für Spritzer. Verwenden Sie niedrig gesättigte Farben, insbesondere Grün, Braun und Blau, um die Farben der Natur zu simulieren.
Fliesen nahtlos machen
Natürlich aussehen oder nicht, die meisten Texturen und Muster sollten nahtlos sein. Das heißt, Besucher sollten die Kanten der sich wiederholenden Kachel nicht sehen können. Wie machen wir das? Die Kachel selbst bietet die Lösung.
9. Oben ist das Bild entlang der blauen und roten Linien aufgeteilt. Da Pixel entlang der Teilung bereits übereinstimmen, wird durch Verschieben auf eine Seite sichergestellt, dass die linken und rechten Kanten übereinstimmen. Natürlich existiert das Problem immer noch, aber es ist einfacher zu beheben.
10. Diese quadratische Fliese kommt von einem größeren Bild. Oben ist der Split der Fliese mit Material aus dem ganzen Bild ausgefüllt. Wiederholen Sie Schritt 8, um die horizontale Naht zu fixieren (oben und unten im Bild).
Das endgültige Eigentum
Die einfache Textur, die oben erzeugt wurde, hat einen eklatanten Makel: Weil sie entworfen wurde, um den Prozess zu demonstrieren, wiederholen sich ihre Eigenschaften zu oft.
Die Eigenschaften einer natürlichen Textur sind normalerweise weniger als ein Zehntel der gesamten Fliese. Das heißt, für eine Fliese mit 500 × 100 Pixeln würde die größte Falte, Rille oder andere Markierung 50 × 10 Pixel oder weniger messen.
Gut gestaltete Texturen erfordern eine weitere Funktion: Zeit. Kurz vor dem Download eines Freebie, müssen Sie sich Zeit nehmen, um eine tolle Textur zu entwickeln und zu verfeinern. Aber halte es nicht für eine Pflicht. Es ist natürlich Teil des Prozesses.
Geschrieben exklusiv für Webdesigner Depot von Ben Gremillion. Ben ist freiberuflich tätig Webdesigner Wer löst Kommunikationsprobleme mit besserem Design?
Wie erstellst du natürlich aussehende Texturen? Teilen Sie Ihre Ideen in den Kommentaren unten.