Das Was, Warum und Wie von Texturen im Webdesign

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Die Verwendung von Texturen und Mustern im Webdesign hat in nur kurzer Zeit einen langen Weg zurückgelegt. Ausgehend von Klischee-Grunge und farbenfrohen Vintage-Texturen verwenden die besten Websites von heute Texturen auf vielfältige Weise, um ein noch intensiveres Erlebnis zu schaffen, die Persönlichkeit der Website zu definieren und ein verfeinertes Erscheinungsbild zu erzielen.

Im heutigen Tutorial werden wir uns direkt mit einigen Möglichkeiten befassen, wie Sie Texturen und Muster verwenden können, um Ihr nächstes Design zu verbessern, einige inspirierende Beispiele für Texturen bereitstellen, die auf die richtige Weise verwendet werden, und eine Reihe von Mini-Tutorials bereitstellen Geben Sie eine Einführung in einige praktische Möglichkeiten, um Texturen in Ihr nächstes Projekt aufzunehmen.

Sind Sie bereit, anzufangen?

Terminologie: Texturen Vs. Patterns Vs. Hintergrundbilder

Bevor wir beginnen, nehmen wir uns einen Moment Zeit, um den Unterschied zwischen Texturen, Mustern und Hintergrundbildern schnell zu definieren. Während die Begriffe häufig synonym verwendet werden, gibt es subtile Unterschiede zwischen den drei, die Ihnen helfen, über die beste Lösung für Ihre Entwürfe nachzudenken.

Muster

Im Allgemeinen sind Muster klein, einfach, bildbasiert und können sowohl auf der x- als auch auf der y-Achse wiederholt werden. Tatsächlich können "Muster" in nur wenigen Pixeln erzeugt werden - und sind daher in Bezug auf die Dateigröße normalerweise extrem leicht.

Hier sind einige Beispiele für einige einfache gekachelte Muster zusammen mit dem entsprechenden Bild, das zum Erstellen der um 3200% vergrößerten Musterdatei verwendet wurde.

Texturen

Im Vergleich dazu sind Texturen in der Regel komplexer, haben ein stärkeres Gefühl für Zufälligkeit, sind jedoch ähnlich wie Muster häufig so konzipiert, dass sie wiederholt werden (dies ist jedoch nicht immer der Fall).

Während Muster mit Sicherheit ihren Platz im modernen Webdesign haben, ist es der kreative Einsatz von Texturen, der die Fantasie von Webdesigern auf der ganzen Welt anregt.

Hier ist eine kleine Auswahl von Beispielen, um Ihnen eine Vorstellung vom Unterschied zwischen Texturen und Mustern zu geben:

Hintergrundbilder

Hintergrundbilder sind ein ganz anderes Tier. Stellen Sie sich Hintergrundbilder zumindest für den Zweck dieses Tutorials als nicht wiederholende, große und detaillierte Bilder, Illustrationen und Fotografien vor. Dies ist zwar eine übertriebene Verallgemeinerung, dient jedoch dazu, den Unterschied zwischen Texturen, Mustern und Hintergrundbildern zu veranschaulichen.

Machen wir etwas Rauschen

Rauschen ist eine der beliebtesten Anwendungen von Texturen im Webdesign und kann verwendet werden, um fast jedem Element in fast jedem Design, vom Hintergrund bis zu Schaltflächen, Tiefe und Interesse zu verleihen.

Die effektive Nutzung von Lärm liegt in der Subtilität seiner Anwendung. Gutes Rauschen sollte für das Auge fast nicht zu unterscheiden sein, während eine feste Farbe mit kleinen Abweichungen von hell und dunkel aufgebrochen wird.

Werfen wir einen Blick auf eine traditionelle Nutzung von Lärm in freier Wildbahn von www.kendoui.com.

Dieses Beispiel ist dank der Verwendung von simulierter Beleuchtung effektiv, um zusätzliche Tiefe und visuelles Interesse für das Gesamtdesign zu erzeugen. Beachten Sie auch, dass die hervorgehobenen Bereiche der Seite dem Inhaltsbereich ein Gefühl der Definition verleihen, ohne einen herkömmlichen 960 Pixel breiten Vollblock-Farbinhaltsbereich zu verwenden.

In ähnlicher Weise hat Matthew Price kreative Lichteffekte verwendet, um seine verschiedenen Dienstleistungen hervorzuheben, und ist ein weiteres großartiges Beispiel dafür, wie man eine einfache Rauschtextur verwendet, um einer Site einen echten Unterschied zu verleihen:

Mini-Tutorial: Erstellen von Rauschen in Photohop

Nachdem wir einige Beispiele gesehen haben, schauen wir uns an, wie Sie in Photoshop einen einfachen Rauscheffekt erzeugen:

Schritt 1: Starten

Erstellen Sie ein neues Dokument (150 x 150 Pixel) mit transparentem Hintergrund.

Treffen Sie eine Auswahl des Dokuments (Strg + A) und fügen Sie eine Farbüberlagerung von #007dba hinzu.

Schritt 2: Bringen des Geräusches

Erstellen Sie eine neue Ebene (Strg + Umschalt + N) und füllen Sie sie mit #000000.

Generieren Sie als Nächstes einen Rauschfilter (Filter → Rauschen → Rauschen hinzufügen) und geben Sie die folgenden Einstellungen ein:

Schritt 3: Mischen des Rauschens

Drehen Sie anschließend die Rauschtextur monochomatisch, indem Sie eine Schwarzweiß-Einstellungsebene (Ebene → Einstellungsebene → Schwarzweiß) hinzufügen (beachten Sie, dass dies die bevorzugte Option zum Drehen der Rauschgrauskala ist; die Einstellung „monochromatisch“ im Rauschgenerator entfernt Halbtöne):

Um den Effekt der Einstellungsebene nur auf die Rauschebene (nicht auf die blaue Ebene) zu beschränken, erstellen Sie eine Schnittmaske für die Anpassungsebene, indem Sie mit der rechten Maustaste auf die Anpassungsebene klicken und Schnittmaske erstellen auswählen.

Ändern Sie bei ausgewählter Rauschebene den Mischmodus auf Überlagern und stellen Sie die Deckkraft je nach Grundfarbe wieder auf 5% bis 8% ein.

Schritt 4: Fertigstellen der Berührungen

Fügen Sie für einen optionalen letzten Schliff eine weitere Ebene über der Grundfarbe hinzu, nehmen Sie die Füllung auf 0% und fügen Sie einen linearen Schwarz-Weiß-Verlauf mit einem Mischmodus auf lineares Brennen und einer Deckkraft von 15% hinzu:

Texturen für lebensechte Effekte

Texturen können auch expliziter verwendet werden, um naturgetreue Effekte zu erzeugen und die Illusion des Aussehens realer Effekte zu erzeugen. Dieser Effekt, auch als Skeuomorphismus bekannt, hat sich als dauerhafter Trend im Interface-Design erwiesen.

Dieser Ansatz kann verwendet werden, um extrem wörtliche Darstellungen zu erstellen, wie im folgenden Beispiel des Dribbble-Benutzers Tom Creighton gezeigt:

Beachten Sie insbesondere nicht nur die detaillierte Holzstruktur, sondern auch den realistischen Metallverlauf für die Zifferblätter und die effektive Verwendung von Schatten.

Skeuomorphismus muss nicht immer so wörtlich sein. Im folgenden Beispiel haben die Kopier- und Inhaltsstrategen von Six11Ink eine Papierstruktur verwendet, um die Illusion zu erzeugen, dass die Website tatsächlich auf Qualitätsmaterial und nicht auf einem Bildschirm gerendert wird - eine perfekte Kombination mit dem Geschäftsfokus des Unternehmens auf geschriebene Inhalte.

Mini-Tutorial: Erstellen Sie in Photoshop ein realistisches Stoffband

Liebe sie oder hasse sie, die Chancen stehen gut, dass du in einem zukünftigen Projekt ein lebensechtes Band erschaffst. In diesem Miniprojekt erstellen wir mithilfe einer Musterbibliothek ein realistisches Stoffband in Photoshop.

Schritt 1: Erstellen eines neuen Dokument

Erstellen Sie ein neues Dokument (Strg + N) (150 x 300 Pixel) und füllen Sie es mit Weiß:

Layouten Sie einige Hilfslinien (Strg + R) mit den folgenden Positionen (vom Rand des Dokuments).

Schritt 2: Zeichnen Sie eine Farbbandform

Zeichnen Sie auf einer neuen Ebene und mit dem Stiftwerkzeug auf "Form" die folgende Form mithilfe der Schnittpunkte der Hilfslinien, um Ihnen zu helfen. Beachten Sie, dass die Oberkante des Menübands die Oberkante des Dokuments überschreitet.

Schritt 3: Laden Sie die Textur herunter

Laden Sie die Classy Fabric-Textur von Subtle Patterns herunter.

Öffnen Sie nach dem Extrahieren der Datei das PNG-Bild in Photoshop. Stellen Sie das Bild als Muster ein (Bearbeiten → Muster definieren).

Schritt 4: Fügen Sie die Textur zum Menüband hinzu

Kehren Sie zu Ihrem Ribbon.psd-Dokument zurück und wenden Sie die Class Fabric-Textur als Ebeneneffekt auf die Multifunktionsleistenform an:

Schritt 5: Ebeneneffekte

Duplizieren Sie die Hauptbandform auf eine neue Ebene (Ebene → Ebene duplizieren) und nennen Sie sie "Multifunktionsleisteneffekte".

Wenden Sie die folgenden Ebeneneffekte an:

Schritt 6: Fügen Sie ein subtiles Leuchten hinzu

Duplizieren Sie die Hauptbandform erneut und platzieren Sie sie oben auf Ihrem Ebenenstapel. Wenden Sie einen Gradienten von 0% Weißopazität → 100% Weißopazität mit den folgenden Einstellungen an:

Schritt 7: Fertig stellen

Kehren Sie zum Abschluss zur untersten Ebene (d. h. Zum Dokumenthintergrund) zurück und wenden Sie den folgenden Farbverlauf an:

Sie sollten mit dem folgenden Endergebnis verlassen werden:

Texturen, um visuelles Interesse hinzuzufügen

Während einfarbige Blockfarben seit Jahren eine tragende Säule für effektives Webdesign sind (und sicherlich immer noch einen Platz im modernen Design haben), setzen Designer zunehmend den kreativen Einsatz von Texturen ein, um den Komponenten ihrer Projekte zusätzliches visuelles Interesse zu verleihen.

Das Ergebnis ist häufig eine ausgefeiltere, polierte Lösung, die abschwächen und zusätzliche Verfeinerungen hinzufügen kann, insbesondere wenn ein fester Farbblock die Gesamtwirkung des Standorts entweder überwältigen oder abschwächen kann.

Nehmen Sie dieses Beispiel von Solid Giant, das eine ziemlich einfache Textur verwendet hat, um eine mutige Farbauswahl aufzubrechen:

Lässt Sie dieses spezielle Design rot (oder pink) sehen? Texturen müssen nicht immer so offen sein. Werfen wir einen Blick auf eine konservativere Verwendung von Texturen in unseren eigenen Tuts+ Premium:

Wenn wir uns die oberste Vergrößerung ansehen, können wir die Verwendung von drei unterschiedlichen Texturen erkennen, die zum Definieren der verschiedenen Abschnitte der Seite (Kopfzeile, Körperhintergrund und Begrüßungsfenster) verwendet werden. Während Blockfarben hier leicht verwendet werden könnten, fügt die Verwendung von Textur dem Design eine zusätzliche Ebene der Liebe zum Detail und der Komplexität hinzu.

Erwähnenswert ist auch die Auswahl der verwendeten komplementären Texturen - die Texturen des Headers und des Körperhintergrunds haben eine ähnliche geometrische Basis, eine ähnliche Skala die 45-Grad-Basisebene. Alle diese Elemente tragen zur Harmonie des Gesamtdesigns bei.

Es gibt Hunderte von Beispielen für die effektive Verwendung einfacher Texturen, um die Gesamtästhetik einer Site zu verbessern. Schauen wir uns ein letztes Beispiel aus Visual Republic an.

Während es immer am besten ist, bei der Verwendung eines Designmusters Zurückhaltung zu üben, schafft dieses Beispiel die perfekte Balance zwischen kohärentem Design und visuellem Interesse, während es zurückhaltend und geschmackvoll bleibt.

Mini-Tutorial: Ändern und Kolorieren einer Textur

Es gibt viele Online-Ressourcen, in denen Sie Bilder und .pat-Dateien zur uneingeschränkten Verwendung für Ihre persönlichen und kommerziellen Projekte herunterladen können. In diesem Mini-Tutorial laden wir Photoshop mit einer vollständigen Sammlung moderner, geschmackvoller Texturen und modifizieren eine Textur, die unseren Designanforderungen entspricht.

Wir werden uns vom Beispiel Solid Giant inspirieren lassen und die hervorragende Texturbibliothek von Subtle Patterns verwenden.

Schritt 1: Laden Sie die Texturbibliothek herunter und installieren Sie sie

Besuchen Sie die Website von Subtle Patterns. Während Sie Ihre Lieblingstexturen einzeln suchen und herunterladen können, können Sie auch die gesamte aktuelle Bibliothek von Github herunterladen.

Scrollen Sie zum Ende der Subtle Patterns-Site und klicken Sie auf "Get it on Gihub". Laden Sie das Repository herunter und entpacken Sie die Dateien auf Ihre Festplatte.

Öffnen Sie anschließend Photoshop und rufen Sie den Preset-Manager auf (Bearbeiten → Presets → Preset-Manager).

Wählen Sie "Muster" aus dem Dropdown-Auswahlfeld und klicken Sie auf "Laden". Wählen Sie die Datei SubtlePatterns.pat aus der heruntergeladenen und extrahierten Bibliothek aus (../subtlepatterns-SubtlePatterns-xXXXXX/SubtlePatterns.pat/SubtlePatterns.pat).

Groß! Sie haben jetzt die gesamte Texturbibliothek für subtile Muster zu Ihren Photoshop-Mustern hinzugefügt, die meiner Meinung nach für Ihre Projekte weitaus besser geeignet ist als die Standardmusterbibliothek von Photoshop!).

Schritt 2: Erstellen eines neuen Dokuments

Erstellen Sie ein neues Dokument (Strg + N) 500 x 500 Pixel mit weißem Hintergrund:

New Document 500px x 500px, White Background

Fügen Sie als Nächstes dem Dokument eine Musterebene hinzu (Ebene → Neue Füllebene → Muster ...).

Wählen Sie in der neu heruntergeladenen Musterbibliothek "Helle Quadrate" aus.

Schritt 3: Einstellungsebenen

Eines der ersten Dinge, die Sie an der Subtle Patterns-Bibliothek bemerken werden, ist, dass fast alle Texturen monochromatisch und entweder dunkel oder hell sind. Dies ist zwar ideal für ein Design, das auf Schwarz- und Weißtönen basiert, macht es jedoch schwieriger, die Textur einzufärben.

Wir werden diese sehr helle Textur in ein paar Schritten hellblau machen, aber zunächst müssen wir die Kurven, den Kontrast und die Sättigung der Textur anpassen.

Fügen Sie zunächst eine neue Kurvenebene hinzu (Ebene → Neue Einstellungsebene → Kurven) und ändern Sie die Eingabe auf 132 und die Ausgabe auf 109.

Fügen Sie als Nächstes eine neue Ebene für Farbton/Sättigung hinzu (Ebene → Neue Einstellungsebene → Farbton/Sättigung) und ändern Sie den Farbton auf 360, die Sättigung auf 100, die Helligkeit auf -28 und aktivieren Sie das Kontrollkästchen 'Kolorieren'.

Fügen Sie als Nächstes eine Einstellungsebene für Ebenen hinzu (Ebene → Neue Einstellungsebene → Ebenen) und ändern Sie den schwarzen Schwellenwert auf 30, den grauen Schwellenwert auf 1,1 und den weißen Schwellenwert auf 200.

Fügen Sie abschließend eine Einstellungsebene für Helligkeit/Kontrast hinzu (Ebene → Neue Einstellungsebene → Helligkeit/Kontrast), ändern Sie die Helligkeit auf -10 und stellen Sie den Kontrast auf 10 ein.

Add a brightness/contrast Adjustment Layer

Schritt 4: Färben Sie die Textur

Fügen Sie in Ihrem Ebenenstapel eine Farbfüllungsebene hinzu (Ebene → Neue Füllebene → Volltonfarbe ...) und setzen Sie die Farbe auf #00b4ff. Stellen Sie den Mischmodus auf "Farbe" und halten Sie die Deckkraft bei 100%.

Beachten Sie, dass abhängig von Ihrer Farbauswahl für die endgültige Farbüberlagerung alle Einstellungsebenen einzeln angepasst werden müssen und möglicherweise ein Versuch und Irrtum erforderlich ist. Aus diesem Grund ist es manchmal einfacher, die Farbüberlagerung zuerst hinzuzufügen und die zu überfüllen Anpassungsebenen, sodass Sie eine Vorschau des Endergebnisses anzeigen können, während Sie mit den Einstellungen der Anpassungsebenen spielen.

Schritt 5: Fügen Sie gemusterten Text hinzu

Nachdem wir unsere kolorierte und angepasste Textur erstellt haben, schließen wir dieses Miniprojekt mit gemustertem Text ab.

Schreiben Sie mit einer fett gedruckten Schrift (ich verwende Bebas Neue) das Wort 'Textur' in die Mitte des Dokuments:

Fügen Sie als Nächstes über der Textebene eine neue Musterebene hinzu (Ebene → Neue Füllschicht → Muster) und wählen Sie 'Betonwand 2' aus der Musterbibliothek aus.

Um das Muster auf den Text zu beschränken, verwenden wir eine Schnittmaske. Erstellen Sie bei ausgewählter Musterebene eine Schnittmaske (Ebene → Schnittmaske erstellen).

Schritt 6: Beenden von Ebenenstilen

Fügen Sie der Textebene die folgenden Ebenenstile hinzu, um das Erscheinungsbild des Texts zu vervollständigen:

Endergebnis

Unser Endergebnis:

Texturen zum Definieren eines bestimmten Aussehens, Tons oder Gefühls

Wir haben gesehen, wie Designer Texturen verwenden, um im vorherigen Beispiel einfach visuelles Interesse zu wecken. Wenn Sie diese Idee noch einen Schritt weiter gehen, können Texturen auch verwendet werden, um ein bestimmtes Aussehen, einen bestimmten Ton oder ein bestimmtes Gefühl zu definieren, das mit dem Gesamtkonzept der Website übereinstimmt.

Nehmen Sie zum Beispiel die Website von i-Avion, einer französischen Flugvergleichswebsite.

Die Hauptillustration und die Überschriftenschrift verleihen der Website ein unverwechselbares Retro-Erscheinungsbild, während sie sich dennoch frisch und modern anfühlt. Was das Gefühl der 1970er Jahre jedoch wirklich lebendig macht, ist die Verwendung eines einfachen blau-weißen Tupfenhintergrunds und eines stilisierten Starbursts, die beide mit den in Printmedien der Mitte des Jahrhunderts häufig verwendeten Designmustern übereinstimmen.

Wenn Sie nur die Abbildung und den Header extrahieren und die Texturen entfernen würden, würde dieses Retro-Look & Feel bestenfalls verwässert und im schlimmsten Fall überhaupt nicht vermittelt, da weder die Schriftart noch die Abbildung ausreichend stilisiert sind, um die zu tragen gesamtes Design.

Ein weiteres effektives Beispiel für Texturen, mit denen eine Designästhetik aus einer anderen Zeit kommuniziert wird, finden Sie auf der Website von Onst Creative.

Auch hier wurden Illustrationen häufig verwendet, um das Erscheinungsbild der Website zu vermitteln, aber wie immer steckt der Teufel im Detail:

Die Site verwendet stark körnige Rauschtexturen über den meisten Elementen auf der Site der Site, vom Hintergrund über die Abbildungen bis zu den Überschriften. Diese weit verbreitete Verwendung einer rohen Textur, begleitet von konsistenten Schriftarten und Designmustern aus der Mitte des Jahrhunderts, führt zu einer Benutzererfahrung, bei der der Site-Besucher eher das Gefühl hat, in einem Dime-Store-Comic aus den 1950er Jahren zu blättern, als die Site zu betrachten auf ihrem neuen Retina-Display.

Einfache sich wiederholende Pixelmuster

Bis zu diesem Punkt haben wir uns hauptsächlich auf die Anwendung von Texturen im Website-Design konzentriert. Kein Artikel zu diesem Thema wäre vollständig ohne einen Blick auf die Verwendung sich wiederholender Pixelmuster im Website-Design.

Wie wir bereits erwähnt haben, wird es nicht viel einfacher als Pixelmuster. Pixelmuster, die oft nur neun oder 16 Pixel (oder sogar weniger) einnehmen, können für einen dramatischen Effekt verwendet werden.

Schauen wir uns für unser erstes Beispiel von Pixelmustern in Aktion die Website von Outside The Wire an, einer US-amerikanischen Theatergruppe.

Die Website bietet ein beeindruckendes Foto in voller Breite und Höhe, ein Designmuster, das mit zunehmender Bandbreite und Bildschirmgröße der Benutzer weltweit immer beliebter wird. Obwohl dies ein dramatisches Designkonzept ist, ist es wichtig, sich daran zu erinnern, dass der Inhalt der Website das Wichtigste ist ... und bei einem so hochauflösenden Bild kann es leicht sein, wichtige Elemente wie die Navigation und das Hauptlogo in der Website zu verlieren Farben, Ton und Kontrast des Bildes.

Um dieses Problem zu beheben, haben die Designer dieser Site ein sehr kleines sich wiederholendes Raster (12 x 12 Pixel und satte 1 KB, um genau zu sein) überlagert, das die Auswirkung des Bildes verringert und den Kontrast zwischen dem Hintergrund und den Designelementen der Site erhöht .

Eine weitere beliebte Anwendung von Pixelmustern im Website-Design besteht darin, Header-Tags, insbesondere Titeln für Blog-Posts und ähnliche Inhalte, zusätzlichen Kontrast zu verleihen.

Erinnern Sie sich an das TutsPlus-Beispiel, das wir zuvor gesehen haben? Schauen wir uns noch einmal an, wie ihre H2-Tags gestaltet sind:

Wie Sie sehen können, ergibt die Verwendung eines Pixelmusters ein verfeinertes, interessanteres Aussehen als nur die Verwendung einer festen Blockfarbe. Und da sich dieses spezielle Muster wiederholt, kann es bei Bedarf auf mehrere Linien und sogar unterschiedliche Längen skaliert werden.

Lassen Sie uns in unserem nächsten Mini-Tutorial einen ähnlichen Effekt erzielen:

Mini-Tutorial: Gestalten Sie einen Header mit einem Pixelmuster

Für dieses kleine Projekt werden wir einem Blog-Post-Titel durch die Verwendung von CSS ... und ohne Bilddateien ein wenig mehr Finesse verleihen.

Ich werde dieses Beispiel ziemlich einfach halten und Ihnen nur die wichtigsten Techniken zeigen ... Es gibt hier viel Spielraum für weiteres Styling, also zögern Sie nicht zu experimentieren.

Schritt 1: Erstellen eines Pixelmusters in Photoshop

Starten Sie Photoshop und erstellen Sie ein neues Dokument (Strg + N) (12 x 12 Pixel) mit transparentem Hintergrund.

Zeichnen Sie mit einem 1 x 1 Pixel großen schwarzen Quadratstift (B) das folgende Muster (ich habe ein 1 Pixel-Raster verwendet, um mir hier zu helfen).

Exportieren Sie das Bild als PNG-24-Bild (Strg + Umschalt + Alt + S) und speichern Sie es auf Ihrem Desktop.

Schritt 2: Konvertieren des Musters in einen Daten-URI

In diesem Projekt wenden wir das Muster als Daten-URI an - eine Darstellung der PNG-Datei in reinen Daten, die der Browser als Bild rendern kann. Dies ist ein optionaler Schritt (Sie könnten einfach ein Bild verwenden), aber die Verwendung dieser Technik reduziert eine http-Anforderung und ist eine perfekte Anwendung für eine kleine Bilddatei wie diese.

Gehen Sie zum Abschnitt Ressourcen unter Web Semantics und laden Sie das Bild in den URI-Konverter:

Nehmen Sie im folgenden Bildschirm den Hintergrundbildcode aus dem Fenster "Als Rohdaten" und kopieren Sie ihn in Ihre Zwischenablage:

Schritt 3: Markieren und gestalten eines einfachen Blog-Beitrags

Starten Sie als Nächstes Ihren Texteditor und markieren Sie einen sehr einfachen Blog-Beitrag:

1	<article>
2	<h2>Using Pixel Patterns for Headers</h2>
3	<p>Suspendisse elementum odio vel ligula pretium eu vehicula libero gravida. Vestibulum porta pellentesque mauris. Curabitur a enim ac nibh sodales blandit. Donec faucibus tempus erat, non blandit enim euismod vitae. Duis adipiscing erat at nisi semper consectetur. Quisque non vestibulum elit. Curabitur ac lorem urna. Nullam rutrum tristique erat a bibendum. Quisque dapibus lacus elementum turpis accumsan accumsan.</p>
4	</article>

Erstellen Sie im Kopf des Dokuments ein Stil-Tag und definieren Sie einige grundlegende Stile (oder erstellen Sie ein neues CSS-Dokument und verknüpfen Sie es im Dokumentkopf):

body {background-color:gray;
}

article {
  width:600px;
  margin: 0 auto;
  background-color:white;
  padding:25px 20px 20px 20px;

  /* Postioning the article as relative allows us to position its children absolutely inside the container */
  position:relative;
}

h2 {
  font-family: arial;
  font-size:25px;
  display:inline-block;
  padding:0 20px 20px 20px;
  line-height:1.5;
  margin-bottom:35px;
}

Schritt 4: Gestalten des H2-Hintergrunds

In diesem Schritt geben wir unserem H2-Tag einen Hintergrund mit unserer neu erstellten Daten-URI.

Fügen Sie in Ihrem CSS den folgenden Code hinzu, indem Sie die Rohdaten des Konverters aus dem vorherigen Schritt verwenden:

h2:before {
  content:'';

  /* The Data URI is added directly into the code */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0FDRkFCMDVFRjhBMTFFMUEyNThCMjM4M0E1NUNBQzciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0FDRkFCMDZFRjhBMTFFMUEyNThCMjM4M0E1NUNBQzciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQUNGQUIwM0VGOEExMUUxQTI1OEIyMzgzQTU1Q0FDNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQUNGQUIwNEVGOEExMUUxQTI1OEIyMzgzQTU1Q0FDNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvYCwlYAAABQSURBVHjalM8xDgAgCAPAlv//GYMGoxEROzFcFQhAMUJVH+8RxyiEpMoP3l7O1nHcx9feK15vKOG0EGHbRn5w+EOGj8ILb4UKnoUqtjQBBgC7kCccYRlZngAAAABJRU5ErkJggg==);

  /* Make sure that the pattern repeats itself on the x and y axes */
  background-repeat:repeat;
  width:100%;
  height:40px;

  /* The element is positioned relatively to the article tag */
  position:absolute;

  /* Reduce the opacity of the pattern */
  opacity:.2;
  margin-left:-20px;
}

Dies sollte zwar ziemlich selbsterklärend sein, es sind jedoch einige Anmerkungen zu machen.

Erstens können wir durch Trennen des H2-Inhalts vom Hintergrund innerhalb des Pseudo: before-Elements eine Auffüllung für den Text festlegen und mit der Deckkraft des Hintergrundbilds spielen. Bei verschiedenen Hintergrundfarben können wir die Deckkraft nach Bedarf erhöhen oder verringern. Dadurch können wir einen einzelnen Daten-URI für eine gesamte Site verwenden, anstatt mehrere PNG-Dateien zu generieren und jede in ein eigenes Base64-codiertes Bild zu konvertieren.

Zweitens wird die Möglichkeit ermöglicht, den Hintergrund hinter dem h2-Text zu positionieren, indem die Position <article> auf relativ und das Element <h2:before> auf absolut gesetzt wird.

Endergebnis

Hier ist ein Screenshot des Endergebnisses, oder Sie können hier mit der JS-Geige spielen.

Sie möchten Photoshop nicht verwenden? Sie können dieses Miniprojekt auch mit Patternify neu erstellen - einem Online-Mustergenerator, der sich sogar um die Daten-URI-Konvertierung kümmert!

Texturen für eine große Wirkung

Bisher haben wir hauptsächlich über subtile, unauffällige Muster gesprochen, die ein vorhandenes Design ergänzen und verbessern, aber nicht unbedingt ein großes Design-Statement für sich abgeben. Schauen wir uns in diesem Abschnitt einige Beispiele an, bei denen die verwendeten Texturen oder Muster an und für sich einen großen Einfluss haben.

Nehmen Sie zum Beispiel die jüngste Neugestaltung des Nationalen LGBT-Museums. Dieses Design verwendet mehrere Muster und Texturen mit großer Wirkung, und tatsächlich hätte die Site verwendet werden können, um die Verwendung von Texturen und Mustern in einigen anderen Abschnitten dieses Artikels hervorzuheben. Was ich hier hervorheben möchte, ist die kühne Verwendung eines einfachen Musters im Kontaktbereich der Website:

The Contact Section of the National LGBT Museum

Beachten Sie, wie das Design ein kühnes, sich wiederholendes Muster mit viel Leerraum ausgleicht, um die Site auszugleichen und eine Benutzererfahrung zu bieten, die anhält, aber nicht überwältigt.

Schauen wir uns in einem anderen Beispiel Pop The Box an, eine andere Website, die mutige und subtile Texturen effektiv kombiniert, um eine dramatische Aussage zu machen:

Subtile Stofftexturen gleichen einen kühnen Tartan-Site-Hintergrund aus, der den Site-Inhalt ergänzt und dem Site-Benutzer eine klare Richtung für den Zweck der Site gibt.

Mini-Tutorial: Wer braucht Photoshop?

Bisher haben wir uns damit befasst, Texturen und Muster in Photoshop zu erstellen, die Bilder zu exportieren und sie als sich wiederholende Hintergrundbilder in CSS zu verwenden.

In diesem Mini-Tutorial werden wir die Tartan-Textur im vorherigen Beispiel ungefähr neu erstellen ... aber wir werden nur CSS-Verläufe ohne Bilder verwenden.

Als Einschränkung, bevor wir anfangen, gibt es Vor- und Nachteile dieses Ansatzes. Während wir den Bedarf an zusätzlichen Site-Ressourcen reduzieren und HTTP-Anforderungen reduzieren, die sich beide auf die Site-Leistung auswirken können, erreicht dieser Ansatz nicht das mit einem Bildeditor erreichbare Maß an Pixelperfektion. Das Ergebnis kann in verschiedenen Browsern unterschiedlich gerendert werden und erfordert einen Fallback für IE8 und darunter. Also mit Vorsicht verwenden!

Schritt 1: Markup

Das Markup für dieses Mini-Projekt ist kinderleicht. Alles, was wir tun müssen, ist, ein Div mit einer beliebigen Höhe von 600px zu erstellen, das den sich wiederholenden Verlaufshintergrund enthält:

1	<body>
2	<div></div>
3	</body>

Und jetzt die Basis CSS:

body {
  background-color:#91d1c0;
}

div {

  height:600px;
}

Schritt 2: Erstellen der ersten Hälfte unseres Verlaufs

Dieser Hintergrund wird zwei überlappende Gradientenüberlagerungen aufweisen, die aus mehreren Anschlägen bestehen, einer bei 45° und der zweite bei -45°.

Lassen Sie uns zuerst den untersten Farbverlauf erstellen:

Beachten Sie, dass ich der Einfachheit halber in diesem Beispiel nur -webkit-Präfixe einfüge. Sie müssen die entsprechenden Präfixe der Hersteller für weitere Browser hinzufügen.

div {

height:600px;

/* The gradient is defined within a background image property */
    background-image: 

/* The gradient is instructed to repeat on both x and y axes and at a 45deg angle */
    -webkit-repeating-linear-gradient(45deg, 

/* The first 60px of the pattern is transparent, where the body color will display */
    transparent 0%, transparent 60px, 

/* From 60px to 100px two stops are defined, each with an identical color (dark purple) */
    rgba(54,57,72,.8) 60px, rgba(54,57,72,.8) 100px, 

/* From 100px to 140px two stops are defined, each with the teal color */
    rgba(50,168,142,.8) 100px, rgba(50,168,142,.8) 140px,

/* From 140px to 160px, the thin yellow stripe is defined in two stops */
    rgba(194,201,147,.8) 140px, rgba(194,201,147,.8) 160px)

/* We need to add a comma at the end of the expression to tell the browser to expect a second background image component
    ,
}

Schritt 3: Erstellen der zweiten Hälfte des Verlaufs

Der letzte Schritt dieser Technik besteht darin, den bereits erstellten Verlauf genau zu replizieren, mit der Ausnahme, dass der Winkel des linearen Verlaufs auf -45° geändert wird.

Dank der Kaskadierung von CSS wird der zweite Gradient natürlich über dem ersten Gradienten gerendert, ohne dass der Z-Index der Eigenschaften geändert werden muss. Da wir rgba ausgewählt haben, um die Farben des Verlaufs zu definieren, müssen wir auch die Deckkraft des Elements nicht berücksichtigen.

1	div {
2	...
3	...
4
5	/* Note the change in the linear gradient angle */
6	-webkit-repeating-linear-gradient(-45deg,
7	transparent 0%,transparent 60px,
8	rgba(54,57,72,.8) 60px, rgba(54,57,72,.8) 100px,
9	rgba(50,168,142,.8) 100px, rgba(50,168,142,.8) 140px,
10	rgba(194,201,147,.8) 140px, rgba(194,201,147,.8) 160px)
11
12	/* A Semi-colon finalises the background-image property */
13	;
14	}

Endergebnis

Unser endgültiger Code:

1	body {
2	background-color:#91d1c0;
3	}
4
5	div {
6	height:600px;
7
8	background-image: -webkit-repeating-linear-gradient(45deg,
9	transparent 0%, transparent 60px,
10	rgba(54,57,72,.8) 60px, rgba(54,57,72,.8) 100px,
11	rgba(50,168,142,.8) 100px, rgba(50,168,142,.8) 140px,
12	rgba(194,201,147,.8) 140px, rgba(194,201,147,.8) 160px),
13
14	-webkit-repeating-linear-gradient(-45deg,
15	transparent 0%,transparent 60px,
16	rgba(54,57,72,.8) 60px, rgba(54,57,72,.8) 100px,
17	rgba(50,168,142,.8) 100px, rgba(50,168,142,.8) 140px,
18	rgba(194,201,147,.8) 140px, rgba(194,201,147,.8) 160px)
19	;
20	}

Hier ist ein Bild des Endergebnisses:

Sie können den Code auch anzeigen und live auf JS Fiddle bearbeiten

Wenn Sie abschließend ein noch saubereres Ergebnis erzielen oder die Möglichkeiten des bildfreien Musterdesigns erweitern möchten, können Sie mit dem Canvas-Element und dem Skript Patternizer.js hervorragende Ergebnisse erzielen. Es ist eine komplexere Methode, um das oben gezeigte Ergebnis zu erzielen, aber je nach Ihren Anforderungen ist es möglicherweise eine bessere Lösung.

Schlussfolgerung

Wenn Sie die Mini-Tutorials in diesem Artikel befolgt haben, sind Sie mit einigen der fortschrittlicheren Anwendungen von Texturen und Mustern im Website-Design bestens vertraut - und lassen sich hoffentlich von einer Vielzahl von Anwendungen inspirieren beste verfügbare Beispiele.

Natürlich haben wir gerade erst die Oberfläche der Verwendung von Texturen und Mustern im Webdesign zerkratzt. Jeden Tag erweitern innovative Designer die Grenzen der Verwendung von Texturen in ihren Projekten mit erstaunlichen Ergebnissen.

Wie haben Sie Texturen und Muster in Ihren Designs verwendet? Was sind deine Lieblingstechniken? Hinterlassen Sie einen Kommentar - wir würden uns freuen, Ihre Gedanken zu hören!

Das Was, Warum und Wie von Texturen im Webdesign

Terminologie: Texturen Vs. Patterns Vs. Hintergrundbilder

Muster

Texturen

Hintergrundbilder

Machen wir etwas Rauschen

Mini-Tutorial: Erstellen von Rauschen in Photohop

Schritt 1: Starten

Schritt 2: Bringen des Geräusches

Schritt 3: Mischen des Rauschens

Schritt 4: Fertigstellen der Berührungen

Texturen für lebensechte Effekte

Mini-Tutorial: Erstellen Sie in Photoshop ein realistisches Stoffband

Schritt 1: Erstellen eines neuen Dokument

Schritt 2: Zeichnen Sie eine Farbbandform

Schritt 3: Laden Sie die Textur herunter

Schritt 4: Fügen Sie die Textur zum Menüband hinzu

Schritt 5: Ebeneneffekte

Schritt 6: Fügen Sie ein subtiles Leuchten hinzu

Schritt 7: Fertig stellen

Texturen, um visuelles Interesse hinzuzufügen

Mini-Tutorial: Ändern und Kolorieren einer Textur

Schritt 1: Laden Sie die Texturbibliothek herunter und installieren Sie sie

Schritt 2: Erstellen eines neuen Dokuments

Schritt 3: Einstellungsebenen

Schritt 4: Färben Sie die Textur

Schritt 5: Fügen Sie gemusterten Text hinzu

Schritt 6: Beenden von Ebenenstilen

Endergebnis

Texturen zum Definieren eines bestimmten Aussehens, Tons oder Gefühls

Einfache sich wiederholende Pixelmuster

Mini-Tutorial: Gestalten Sie einen Header mit einem Pixelmuster

Schritt 1: Erstellen eines Pixelmusters in Photoshop

Schritt 2: Konvertieren des Musters in einen Daten-URI

Schritt 3: Markieren und gestalten eines einfachen Blog-Beitrags

Schritt 4: Gestalten des H2-Hintergrunds

Endergebnis

Texturen für eine große Wirkung

Mini-Tutorial: Wer braucht Photoshop?

Schritt 1: Markup

Schritt 2: Erstellen der ersten Hälfte unseres Verlaufs

Schritt 3: Erstellen der zweiten Hälfte des Verlaufs

Endergebnis

Schlussfolgerung

Weitere Ressourcen