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 Tutorial-Reihe zum Erstellen von Hintergrundmustern fort, die im Web (und während der Entwurfsphase) verwendet werden können, mit unserer dritten Ausgabe: Kohlefaser-Texturen. Wir werden untersuchen, wie Sie schlanke, professionelle Kohlefasermuster erstellen, indem Sie 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 ersten Beitrag der Serie an, wenn Sie ihn verpasst haben!
Heute ist Tag drei 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 "Kohlenstofffaser-Textur", die in Photoshop als Muster verwendet werden kann, sowie als Hintergrund für die Kacheln auf Ihren Webseiten. Wir machen das in 4 Schritten:
Bereit? Lass uns das machen!
Die grundlegende Kohlefasertextur ist eigentlich ziemlich einfach zu erstellen. Es gibt tonnenweise Anleitungen für dieses grundlegende Muster im Web, sodass wir hier keine neuen Wege beschreiten. In diesem ersten Schritt ist es wichtig, dass Sie die Grundprinzipien aufgreifen, die wir in den fortgeschrittenen Stadien anwenden werden. Die wichtigsten Tricks sind:
Beginnen wir mit unserer Basisversion, indem Sie ein 4x4-Dokument erstellen:
Als Nächstes wählen Sie eine 2x4 px-Auswahl des Hintergrunds (dargestellt) und erstellen daraus eine neue Ebene (Strg + J):
Fügen Sie auf der neuen 2x4px-Ebene einen einfachen Farbverlauf im Bedienfeld Ebenenstile hinzu (doppelklicken Sie auf die Ebene oder klicken Sie mit der rechten Maustaste darauf und wählen Sie Ebenenstile aus). Der Farbverlauf, den wir hinzufügen, wird von unten nach oben ausgeführt und verwendet die Farben Schwarz (# 000000) auf der Unterseite zu Dunkelgrau (# 4f4f4f) an der Spitze:
Dieser Gradient wird die Grundlage unserer Kohlenstofffaser sein? Sie können also jederzeit zu diesem Schritt zurückkehren, um das Ergebnis des Endprodukts zu ändern.
Als Nächstes nehmen wir eine 1x4-Pixel-Auswahl der Verlaufsebene mit dem Rechteck-Auswahlwerkzeug und erstellen eine neue Ebene, indem Sie sie abschneiden (Rechtsklick> Ebene über Ausschneiden)..
Stellen Sie jetzt die Deckkraft für diese zweite Ebene auf 92%.
Warum? Wir versuchen sehr subtile Variationen in den Grautönen zu erzeugen, so dass die Kohlefaser eine glaubwürdige Lichtquelle zu haben scheint. Natürlich gibt es keine echte Lichtquelle, und wir können keine Lichtquelle erstellen, ohne ein massives Bild zu haben (was den Punkt eines Netzmusters besiegt), aber kleine Änderungen in der Schattierung täuschen das Auge vor der Annahme, dass es Tiefe gibt.
Fügen Sie die beiden 1x4 px-Ebenen zusammen (oben) und nehmen Sie dann mit dem Marque-Werkzeug eine 2x2-Auswahl aus der oberen Ebene der neuen Ebene:
Um unseren Mustereffekt zu erzeugen, tauschen Sie als Nächstes die Reihenfolge der zwei 2x2 px-Kacheln von oben nach unten und umgekehrt:
Unser Muster ist jetzt fertig! Speichern Sie es einfach in Ihrer Musterbibliothek, indem Sie die Bearbeiten> Muster definieren Werkzeug. Vergeben Sie einen Namen Ihrer Wahl und es wird jetzt angezeigt, wenn Sie das verwenden Ebenenstile> Musterüberlagerung Bibliothek.
In Ordung! Wir haben also eine sehr einfache Kohlefaser komplett? Lassen Sie uns zum nächsten Schritt übergehen, in dem wir einige Änderungen an dieser Idee vornehmen.
Die Grundkohlefaser kann sehr leicht manipuliert werden. In diesem nächsten kurzen Beispiel verwenden wir genau dieselben Verfahren und Prinzipien, um eine etwas größere Fasertextur zu erzeugen.
Hinweis: Ich werde absichtlich einige der sich wiederholenden Screenshots überspringen, die wir im letzten Schritt überprüft haben. Daher werde ich nur neue Techniken hervorheben.
Beginnen Sie diesmal mit einem 8 x 8 x 8-Dokument.
In dem ersten von uns erstellten Kohlefasermuster haben wir eine Abkürzung vorgenommen, indem wir einen einzigen Verlauf für die gesamte linke Seite des Dokuments erstellt haben. Dies funktionierte, weil das Dokument nur 4x4 war und wirklich nicht mehr Details verarbeiten konnte, als wir besprochen hatten.
In dieser zweiten Version werden wir mit unserer Form ein wenig akribischer. Beginnen Sie in Ihrem Dokument, indem Sie ein 4x4-Rechteck hinzufügen:
Fügen Sie ein weiteres 4x4-Rechteck für den unteren Bereich hinzu (ich habe es eingefärbt, damit Sie es besser sehen können):
Jetzt müssen wir dem unteren Quadrat einen subtilen Farbverlauf hinzufügen. Denken Sie daran, dass der untere linke Bereich dunkel ist. fast schwarz, verwende also einen sehr dunklen Farbverlauf:
Wiederholen Sie den Gradientenschritt für die oberste 4x4-Ebene. Diesmal wird es jedoch ein leichter Gradient sein:
Dupliziere beide 4x4-Ebenen und führe den "Fliperoo" -Trick aus, bei dem wir die Position jedes Quadrats an gegenüberliegenden Ecken des Dokuments vertauschen.
Jetzt haben wir unser grundlegendes Kohlefasermuster, aber fügen Sie eine Stufe für die Anpassung hinzu, indem Sie eine Ebene für die Ebenenanpassung hinzufügen. Tun Sie dies im Ebenen-Menü oben. Sie suchen nach der Schaltfläche "Ebene> Neue Einstellungsebene> Ebenen".
Mit der Ebenenanpassungsschicht können wir an der Helligkeit und dem Kontrast unseres Fasermusters basteln. Wenn Sie fertig sind, definieren Sie das Muster (Bearbeiten> Muster definieren), und Sie können loslegen. So wird Ihr Muster aussehen:
Hinweis: Wenn Sie versuchen, das Werkzeug "Muster definieren" zu verwenden, müssen Sie sicherstellen, dass Sie nicht auf der Anpassungsebene ausgewählt sind. Aus irgendeinem Grund können Sie in Photoshop nicht "Define Pattern" verwenden, wenn Sie sich auf Ebenen wie dieser befinden (es wird ausgegraut, bis Sie eine andere Ebene auswählen)..
Jetzt haben wir ein zweites Kohlefasermuster fertig! Sie können denselben grundlegenden Prozess immer wieder verwenden, um Ihre eigenen Variationen zu erstellen. Probieren Sie unterschiedliche Dokumentgrößen aus, fügen Sie Farbe hinzu, passen Sie den Kontrast der Farbverläufe an und alles, was Sie sich noch ausdenken können, um einzigartige Effekte zu erzeugen.
Ok, du hast die Grundlagen im Griff? das ist großartig! In diesem nächsten Schritt erstellen wir ein diagonales Kohlefasermuster nach den gleichen Grundprinzipien, die wir in den ersten beiden Schritten verwendet haben. Wir verwenden jedoch eine radikale kleine Drehung des Rasterlayouts unseres Musters, um ein Muster zu erstellen einzigartiger Effekt.
Beginnen Sie mit einem 30 x 30 x 30-Dokument. Wenn Sie diesen Schritt abgeschlossen haben, können Sie den Vorgang mit einer anderen Dokumentgröße wiederholen. Dies sollte jedoch ein guter Ausgangspunkt sein.
Als allgemeine Faustregel werden wir in Zellen von "5px" arbeiten? Beginnen wir also mit unserem Muster, indem wir ein Rechteck erstellen, das 5px groß und 15px lang ist.
Als nächstes fügen Sie einen Verlauf über unsere erste Form hinzu:
Fügen Sie nun eine quadratische Form von 5 x 5 x x mit der Farbe von hinzu # 191919 direkt neben unserer rechteckigen Form.
Spitze: Verwenden Sie das Werkzeug "Punkt konvertieren" (unter dem Stiftwerkzeugbereich), in dem Sie die Kanten anpassen oder schärfen müssen. Ihre Formen sollten genau auf definierte Pixel enden, und sollten keine unscharfen "halben Pixel" aufweisen..
Was wir hier haben, ist unser grundlegendes Muster, das wir einige Male wiederholen werden. Lassen Sie uns diese beiden Formen also in ein einzelnes "Smart Object" konvertieren, sodass wir immer wieder zu ihnen zurückkehren können, um den Verlauf zu bearbeiten.
Hinweis: Sie können jederzeit Ihre intelligenten Objekte bearbeiten, indem Sie mit der rechten Maustaste auf die Ebene klicken und "Inhalt bearbeiten" auswählen. Dadurch wird jede Instanz des Smart-Objekts bearbeitet. Das macht die Bearbeitung schnell und einfach, wenn Sie mindestens 10 Duplikate haben.
Als Nächstes müssen wir das Smart-Objekt duplizieren und es um 5px nach unten und um 5px nach links verschieben.
Wiederholen Sie den Vorgang "Duplizieren, dann Nudgen" so oft, bis Sie Ihr Dokument abgedeckt haben. Sehen Sie sich den Screenshot an, wenn Sie sich verlaufen haben, es sollte jedoch immer eine 5px-Maßeinheit zwischen allen wichtigen Teilen sein.
Nun fügen wir eine Hintergrundfarbe hinzu. Ich habe dazu ein einfaches Rechteck verwendet - setze die Farbe auf # 1e1e1e:
Um sicherzugehen, können wir schließlich eine weitere dieser vertrauenswürdigen Ebenenebenenebenen hinzufügen, sodass wir uns schnell mit der Dunkelheit und dem Kontrast beschäftigen können.
Whallah! Sie können das Werkzeug "Muster definieren" nun erneut verwenden und das Muster an beliebiger Stelle verwenden.
Für diesen letzten Schritt verwenden wir wieder dieselben Grundprinzipien? Aber diesmal drehen wir die Dinge um 45 Grad, um einen weiteren einzigartigen diagonalen Kohlefasereffekt zu erzeugen.
Dieses abschließende Muster ist eigentlich das einfachste von allen, das man meistern kann, also sollte dies ein Cakewalk sein, wenn Sie es bis hierher geschafft haben!
Beginnen Sie mit einem 8x8-Dokument und fügen Sie eine Hintergrundfarbe hinzu. Ich habe Black (# 000000) verwendet. Können Sie verwenden, was Sie möchten? Behalten Sie für den nächsten Schritt genau die Farbe im Auge:
Fügen Sie nun ein Rechteck hinzu, das 4px breit und 8px groß ist:
Alles sollte jetzt vertraut sein - fügen Sie einen subtilen Farbverlauf hinzu - die Endfarbe sollte mit unserer Hintergrundfarbe übereinstimmen (mein Farbverlauf hier ist # 555555 bis # 000000). Beachten Sie den Winkel - wir setzen ihn auf 135 (oder -45, je nachdem, wie Sie es wünschen), damit er beim Drehen der Ebene gut übereinstimmt:
Bingo! Wir haben unser endgültiges Muster? Passen Sie die Dokumentgröße und die Verlaufsfarben an, um Ihre eigenen benutzerdefinierten Variationen zu erhalten:
? und hier ist es:
In Ordung! Nun sollten Sie über ein ausreichendes Grundverständnis verfügen, um Ihre eigenen Variationen dieser Kohlefasermuster zu erstellen - spielen Sie mit den Formen, 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 fortgeschrittene 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