Share
Haben Sie sich jemals gefragt, wie Sie perfekte, nahtlose Hintergrundmuster erstellen, die in Photoshop und im Web funktionieren? Suchen Sie nicht weiter, denn heute brechen wir es für Sie auf - Schritt für Schritt. Sie erstellen in kürzester Zeit Ihre eigenen Hintergrundmuster!
Heya alle zusammen! Heute setzen wir unsere Tutorialserie zum Erstellen von Hintergrundmustern, die im Web (und während der Entwurfsphase) verwendet werden können, mit unserer vierten Ausgabe fort: Synthetische Gewebetexturen. Wir werden untersuchen, wie glaubwürdige, fliesenfähige Stoffmuster erstellt werden können, indem wir mit einem einfachen Vanille-Ansatz beginnen und dann die gleichen Prinzipien anwenden, um erweiterte Versionen zu erstellen.
Unser Ziel ist einfach: Jeder soll lernen, wie man Hintergrundmuster erstellt, die für das Web bestimmt sind (aber auch während des Designprozesses problemlos verwendet werden können). Wir werden "programmunabhängig" sein, was bedeutet, dass die meisten Tipps sowohl in Photoshop als auch in Fireworks funktionieren.
Schauen Sie sich den Rest der Serie an, einschließlich Carbon Fiber, Noisy Backgrounds und den Intro to Patterns Post!
Heute ist Tag vier in unserer Serie - aber es ist erwähnenswert, dass alle diese Tutorials "Standalone" sind - was bedeutet, dass Sie Teil 4 direkt aufnehmen können, auch wenn Sie die ersten paar Teile verpasst haben.
Das Muster, das wir heute behandeln werden, ist das Erstellen einer effektiven "synthetischen Gewebestruktur", die in Photoshop als Muster verwendet werden kann, sowie als Hintergrund für die Kacheln auf Ihren Webseiten. Wir machen das in 4 Schritten:
In den letzten Monaten waren subtile, laute Texturen bei Webdesignern sehr beliebt (lesen Sie unser Tutorial zum Erstellen dieser hier). In den letzten Wochen bemerkte ich jedoch immer mehr "fortgeschrittene" Geräuschstrukturen. das heißt, die Menschen gehen über den einfachen Ansatz "Geräuschmuster hinzufügen" hinaus und probieren funkere Effekte aus. Ich möchte auf zwei Dinge hinweisen:
1: Die Texturen, die wir heute behandeln werden, werden zu 100% in Photoshop erstellt. In unserem nächsten Tutorial erfahren Sie, wie Sie fotografische Texturen erstellen.
2. Diese Texturen sollten subtil und sparsam eingesetzt werden. Nichts schreit 1995 wie eine flüchtige Hintergrundtextur unter Verwendung von Photoshop-Filtern mit harten Händen.
In Ordung? du wurdest gewarnt. Lass uns das machen!
Diese einleitende Textur ist unglaublich einfach zu erstellen, kann jedoch bei richtigem Gebrauch für einige professionell aussehende Ergebnisse verwendet werden.
Schauen Sie sich zum Beispiel die Textur hinter der Fußzeile des WordPress-Themes "qop" an:
Nicht schlecht, richtig? Wir beginnen mit einer leeren Leinwand. Stellen Sie die Größe auf 400 x 400 zur Zeit. Die Größe kann später geändert werden, aber Sie möchten nicht, dass sie zu klein ist, da an den Kanten etwas Platz benötigt wird.
Erstellen Sie eine neue Ebene und füllen Sie sie mit aus Schwarz Farbe.
Machen Sie weiter und nennen Sie es nur aus Gründen der Organisation als Black Layer.
Jetzt möchten wir einen schnellen Filter anwenden, um die Grundlage unserer groben Linienstruktur zu schaffen. Wenden Sie auf der schwarzen Ebene den folgenden Filter an: Filter> Skizze> Wasserpapier.
Sie können die Einstellungen anpassen, bis Sie Ihren eigenen benutzerdefinierten Effekt haben. Die Demo-Textur verwendet jedoch die folgenden Einstellungen:
Stellen Sie den Mischmodus der schwarzen Ebene auf Bildschirm so dass nur die weißen Linien durchscheinen. An dieser Stelle können Sie auch ein Hintergrundrechteck hinzufügen, um eine Farbe für Ihre Textur festzulegen. Beachten Sie, dass Sie die Farbe jederzeit an diesem Punkt ändern können.
Wir können jetzt nur noch Weiß sehen? Fügen wir also ein einfaches farbiges Rechteck hinzu und nennen es unsere Hintergrundfarbe. Ich habe die Farbe benutzt # 242d34, Sie können jedoch gerne alles verwenden, was Sie möchten.
Ahh viel besser! Jetzt können wir unsere Textur sehen. Es ist zwar etwas flach. Fügen wir unserer Textur also ein wenig Tiefe hinzu - wir erstellen dies, indem wir eine neue Ebene erstellen und diese mit Schwarz (wieder) füllen. Nennen Sie diese Ebene "Weiß" (in den nächsten Schritten werden Sie sehen, warum).
Jetzt fügen wir das hinzu Filter> Skizze> Wasserpapier wieder wirken, aber diesmal möchten wir den Einstellungen mehr Helligkeit und Kontrast hinzufügen:
Invertieren Sie jetzt einfach die Farben für dieselbe Ebene (Bild> Einstellungen> Umkehren) und stellen Sie den Mischmodus auf Multiplizieren. Reduzieren Sie die Deckkraft der Schicht auf ca. 90%, damit der Effekt nicht zu stark abfällt.
Whallah! Nicht zu schäbig richtig?
Der nächste Schritt ist das Beschneiden der Ränder dieses Musters, da Photoshop dazu neigt, an den Rändern ein wenig heftig zu sein. Beschneiden Sie etwa 50px von jeder Kante mit der Ernte Werkzeug.
Warum haben wir das zugeschnitten? Photoshop neigt dazu, an den Rändern des Wasserpapierfilters etwas heftiger zu sein, was bedeutet, dass wir offensichtliche "Nähte" bekommen, wenn wir versuchen, ein Muster daraus zu machen. Das Zuschneiden von der Kante hilft uns, diese sichtbaren Nähte zu beseitigen, wenn wir dies als Muster oder im Web verwenden.
Der letzte Schritt ist einfach: Stellen Sie die Hintergrundfarbe einfach auf die gewünschte Farbe ein, passen Sie die Deckkraft jeder Filterebene an, bis Sie die gewünschte Texturebene erreicht haben, und erstellen Sie dann ein Muster (Bearbeiten> Muster definieren). Alles erledigt!
Und das Endprodukt sollte so aussehen, wenn es als Muster verwendet wird:
Dies könnte in Bezug auf den Kontrast etwas zu dramatisch sein (ich wähle normalerweise die Intensität für Tutorials, um die Effekte offensichtlich zu machen). Fühlen Sie sich also frei mit der Deckkraft der Texturebenen, um sie "richtig" zu machen Ihr eigenes Design.
So passen Sie diesen Effekt an: Die wichtigsten Dinge, die Sie für das Tweaking interessieren könnten, sind die "Faserlängen" des Wasserpapierfilters und die Hintergrundfarbe. Darüber hinaus kann es auch Spaß machen, mit der Skala des endgültigen Musters herumzuspielen. Verändern Sie nach dem Zuschneiden das gesamte Bild, um die Dichte der Textur anzupassen (und verwenden Sie das Werkzeug "Scharfzeichnen", um die Schärfe zu verbessern.).
Diese nächste Textur ist heute wahrscheinlich die einfachste von allen vier. Drei einfache Schritte runden den Effekt ab:
Erstellen Sie zunächst ein neues Dokument (400 x 400) und zeichnen Sie ein farbiges Rechteck in das Dokument. Wir werden dies später verwenden, um die Farbe des endgültigen Musters anzupassen.
Erstellen Sie als Nächstes eine neue Ebene, füllen Sie sie mit Schwarz aus und fügen Sie den Filter hinzu: Filter> Textur> Texturierer. Verwenden Sie die folgenden Einstellungen:
Stellen Sie den Mischmodus für diese Ebene auf "Bildschirm".
Als Nächstes erstellen Sie eine neue Ebene, füllen Sie diesmal Weiß aus. Fügen Sie den gleichen exakten Filter hinzu: Filter> Textur> Texturierer. Verwenden Sie die folgenden Einstellungen:
Setzen Sie nun den Mischmodus dieser Ebene auf Color Burn, damit Sie die Hintergrundfarbe sehen können.
Zum Schluss passen wir die Hintergrundfarbe etwas subtiler an. Beachten Sie, dass Sie beim Anpassen der Hintergrundfarbe möglicherweise auch die Deckkraft und die Mischmodi der beiden obersten Ebenen anpassen möchten, bis der Effekt Ihren Wünschen entspricht.
Das letzte Muster wie in der Demo gezeigt:
Sie können das Muster hier erstellen (Bearbeiten> Muster definieren) oder Sie können mit der Hintergrundfarbe, der Deckkraft der Ebenen und dem Zuschneiden herumspielen, bis Sie ein nahtloses Muster haben, das zu Ihrem Design passt.
Diese nächste Textur ist etwas fortgeschrittener, also sollten Sie besonders aufpassen, wenn Sie diesen Effekt wiederherstellen möchten.
Beginnen Sie mit einem neuen Dokument (400 x 400) und zeichnen Sie ein blaues Rechteck (# 2b4891) als Hintergrund. Sie können tatsächlich eine beliebige Farbe auswählen, aber wir sind es gewohnt, blauen Denim zu sehen, also bleiben wir jetzt dabei.
Als Nächstes erstellen Sie eine neue Ebene und Füllen es mit 50% Grau (Sie können den Hotkey verwenden Umschalt + Rücktaste / Löschen). Nennen Sie ihm vorerst den Namen Horizontal Layer.
Als nächstes stellen Sie die Vordergrund und Hintergrund Farbe auf den Standardwert Schwarzweiß durch Drücken von D. Wir müssen die Grundlage für unser Denim-Muster hinzufügen. Wenden Sie auf unserer grauen Schicht den Filter an: Filter> Skizze> Halbtonmuster.
Verwenden Sie die folgenden Einstellungen:
Dies sollte ein grundlegendes Linienmuster erzeugen? aber Denim ist "unscharf", also wollen wir dies mit einem anderen Filter etwas durcheinander bringen: Filter> Pixelate> Mezzotint. Stellen Sie den Typ auf Feine Punkte.
Erstellen Sie nun eine Kopie dieser Ebene (Cntrl + J) und nennen Sie es "Vertical Layer".
Verwenden Sie das kostenlose Transformationstool (Cntrl + T), um es um 45 Grad zu drehen und so weit zu skalieren, dass es auf jede Ecke unseres Dokuments trifft. Ich habe es um 145% erhöht, falls Sie versuchen, meine genau zu vergleichen.
Machen Sie sich keine Sorgen, dass das Skalieren des Musters so groß wird, dass einige Raster-Unvollkommenheiten entstehen. Das wollen wir eigentlich. Machen Sie weiter und fügen Sie zusätzliche Unschärfe hinzu (Filter> Gaußscher Weichzeichner auf 0,3) sowohl für diese Schicht als auch für die erste nicht transformierte Schicht.
Stellen Sie abschließend den Mischmodus für die Diagonalebene auf Mehrere mit 70% Deckkraft -- und stellen Sie den Mischmodus für die horizontale Streifenebene auf Sanftes Licht mit 60% Deckkraft.
Das vervollständigt den Denim-Effekt! Sie können mit den Hintergrundfarben basteln und daraus ein Muster machen (Bearbeiten> Muster definieren).
Hinweis: Wenn Sie offensichtliche Nähte in Ihrem Muster feststellen, müssen Sie beim Zuschneiden ein wenig herumspielen. Der Trick hier ist, dass Sie sicherstellen, dass sich keine unnatürlich hellen oder dunklen Linien in der Nähe der Kanten befinden. Probieren Sie ein paar verschiedene Croppings aus, bis das Muster nahtlos ist.
Wenn Sie der Demoversion des Briefes gefolgt sind, können Sie die Höhe Ihres Dokuments einfach auf 400px herabschneiden 396px. Dadurch werden die Nähte entfernt (unten):
Whallah! Wie funktioniert das? Wenn Sie sich in unserem ersten Muster-Tutorial erinnern, ist die allgemeine Idee hier, dass die letzten paar Pixel auf der rechten Seite und am unteren Rand unseres Musters immer auf die linke und obere Seite des Dokuments verlinken müssen. Wenn Sie diese 4px-Dateien abschneiden, hilft dies, die untere Übereinstimmung nach oben zu erreichen. Da rechts und links schon zusammenpassen, können wir loslegen!
In Ordung! Wir haben die endgültige Textur des Tages erreicht. Inzwischen haben wir einige ziemlich knifflige Techniken angewandt, so dass dieser letzte Schritt ziemlich simpel erscheint.
Ein ... kreieren 200 x 240 dokumentieren. Fahren Sie fort und ziehen Sie die drei Rohebenen, die wir für unser Denimmuster verwendet haben (die beiden Texturebenen + die Hintergrundfarbe)..
Gruppiere diese Schichten (Strg + G) und legen Sie eine 50px breite Maske über den gesamten Gruppenordner. Wenn Sie zuvor noch keine Gruppenmaske erstellt haben, ist das ganz einfach: Verwenden Sie einfach die Rechteckiges Festzelt Auswahlwerkzeug zum Zeichnen einer 50px breiten Auswahl, die das Dokument von oben nach unten ausfüllt (siehe Info Panel, um Ihre Messung zu überprüfen). Klicken Sie dann unten im Ebenenfenster auf die Schaltfläche "Vektormaske hinzufügen":
Warum 50px? Bei einem Dokument mit einer Breite von 200 Pixeln möchten wir 4 Streifen mit 50 Pixeln anbringen.
Als nächstes duplizieren Sie diese Ebenengruppe, verschieben Sie sie nach rechts von der ersten Gruppe und drehen Sie sie (optional) horizontal, um ein entgegengesetztes Diagonalmuster zu erstellen.
Um den Streifen etwas Kontrast hinzuzufügen, ändern Sie einfach die Hintergrundfarbe (subtile Änderungen sind hier am besten), und zwar etwas heller oder dunkler als die ursprüngliche Farbe.).
Zum Schluss duplizieren Sie BEIDE von unseren Streifengruppen und verschieben Sie sie in den leeren Bereich unseres Dokuments.
Wir sind noch nicht fertig - um visuelles Interesse zu wecken, lassen Sie uns die Gruppenmasken für die letzten beiden Streifen entfernen, und verschieben Sie die 3 Denim-Schichten über etwa 100 Pixel, um eine etwas andere Streifenbildung zu erzeugen. Das Endergebnis unterscheidet sich nicht dramatisch, aber Menschen, die nach Nähten in Ihrem Muster suchen, werden durch diesen letzten Schritt abgeworfen.
Glückwunsch! Wählen Bearbeiten> Muster definieren, und fangen Sie an, dies in Ihren eigenen Projekten zu verwenden. Als letzten Gedanken können Sie natürlich noch viel mehr tun, indem Sie Ihre eigenen Anpassungen hinzufügen. Im folgenden Beispiel werden die Farben in einen braunen Farbton umgewandelt. Anschließend wurde der "Strick" des Musters verkleinert, indem die Bildgröße verringert wird. Schauen Sie sich unser letztes Beispiel an:
In Ordung! Nun sollten Sie über ein ausreichendes Grundverständnis verfügen, um Ihre eigenen Variationen dieser Synthetikfasermuster zu erstellen - spielen Sie mit den Ebenen, Farben, Dokumentgrößen und mehr, um Ihren eigenen persönlichen Twist hinzuzufügen. Sie können sogar die Schattierung umkehren, um subtile, helle Muster zu erzeugen.
In den nächsten Teilen dieser Serie zeigen wir Ihnen, wie Sie einige fortschrittliche, fotobasierte Texturmuster, mehr formbasierte Muster, transparente Muster und in Zukunft mehr erstellen.
Abonnieren Sie die Website oder besuchen Sie sie erneut, um alle Aktualisierungen dieser Serie zu sehen!
Accentsconagua