Haben Sie sich jemals gefragt, wie manche Webdesigner so tolle Hintergrundtexturen finden? Es ist eigentlich viel einfacher als Sie vielleicht denken. Es dauert nur ein paar Minuten und einen einzigen Photoshop-Filter, den Sie wahrscheinlich noch nie verwendet haben.
Fasziniert? Lesen Sie weiter, um die Schritt-für-Schritt-Anleitung zum Erstellen fließfähiger Texturen aus nahezu jedem Bild zu sehen.
Der leichte Weg oder der harte Weg
Es gibt zwei Möglichkeiten, wie Sie dieses Projekt starten können. Sie können entweder eine vorgefertigte Textur nehmen oder eine eigene Textur erstellen. Für dieses Tutorial möchte ich Ihnen den Wert Ihres Geldes zeigen, also nehmen wir die Straße und schaffen unsere Starter-Textur von Grund auf.
Wenn Sie es eilig haben, nehmen Sie einfach eine freie Textur von irgendwo und überspringen Sie die ersten Schritte. Hier sind drei großartige Ressourcen, die Ihnen den Einstieg erleichtern (aus unserem Artikel? 40 Amazing Resources for Design Freebies?).
Verloren und genommen
CG Texturen
Texture King
Wenn Sie etwas Einzigartigeres wünschen, öffnen Sie Photoshop und folgen Sie ihm.
Schritt 1: Neue Leinwand
Das Kacheln von Hintergrundbildern kann relativ leicht zu erkennen sein, wenn sie klein sind, daher werde ich meine ziemlich groß machen. Wir speichern es als JPG-Datei, sodass die Dateigröße groß genug sein sollte, um die meisten Verbindungen schnell laden zu können. Wenn Sie mit der Größe nicht einverstanden sind, verkleinern Sie sie einfach!
Erstellen Sie in Photoshop ein neues Dokument mit 800 x 800 Pixeln bei 72 DPI und in RGB.
Füllen Sie jetzt Ihre Leinwand mit einem mittleren bis dunklen Vollton. Sie können alles auswählen, was Sie möchten, aber ich bin mit # 80ac4b gegangen.
Schritt 2: Erstellen Sie einen benutzerdefinierten Pinsel
Ich habe bemerkt, dass Bokeh-Texturen in letzter Zeit sehr populär zu sein scheinen. Ich beschloss, Ihnen zu zeigen, wie man eine baut. Dies ist ein gutes Beispiel, weil dadurch eine Textur erzeugt wird, die ein wenig schwieriger zu kacheln ist als die meisten anderen.
Erstellen Sie zunächst ein neues Dokument, nehmen Sie einen harten runden Pinsel und klicken Sie einmal in die Mitte der Leinwand, um einen schwarzen Punkt zu erstellen. Ich habe mir einen leichten schwarzen äußeren Schein gegeben, um den Bokeh-Effekt etwas hinzuzufügen. Gehen Sie jetzt zu Bearbeiten> Pinselvorgabe definieren.
Benennen Sie Ihren Pinsel, speichern Sie ihn und wechseln Sie zurück zu Ihrer anderen Leinwand.
Wählen Sie nun diesen Pinsel aus, gehen Sie zu Ihrer Pinselpalette und wenden Sie die folgenden Optionen an, um einen schönen Streueffekt zu erzielen.
Ste 3: Malen Sie es
Jetzt haben Sie einen schönen Pinsel zum Malen in einem Bokeh. Lassen Sie sich nicht zu sehr mitreißen, denken Sie daran, je komplexer es ist, desto schwieriger wird es sein, das Problem zu beheben, wenn wir es in ein sich wiederholendes Muster umwandeln.
Hier ist das Muster, das ich mir ausgedacht habe:
Schritt 4: Versatz
In diesem Bereich übernimmt Photoshop einen ordentlichen Trick, der uns viel Zeit spart. Stellen Sie zunächst sicher, dass Ihre Ebenen in einem flachen Dokument zusammengefügt werden. Gehen Sie nun zum Menü und wählen Sie "Filter"> "Andere"> "Offset".
Stellen Sie Ihren horizontalen und vertikalen Versatz auf die Hälfte der Pixelabmessungen Ihrer Leinwand ein und wählen Sie die Option "Umlauf".
Voila! Eine nahtlose Hintergrundbeschaffenheit. Ok vielleicht nicht. Ein Großteil der Arbeit wurde jedoch für uns erledigt und wir brauchen nur eine kleine Aufräumaktion, damit es funktioniert.
Schritt 5: Säubern Sie die Nähte
Wenn wir mit einer fotografischen Textur arbeiten würden, würden wir hineingehen und entlang der Nähte klonen, um sicherzustellen, dass alles anständig aussah. Hier haben wir jedoch einen einfarbigen Hintergrund, so dass wir eigentlich nur mit einem grünen Pinsel malen können.
Gehen Sie rein und streichen Sie alle problematischen Bereiche vollständig aus. Es ist in Ordnung, wenn Sie dabei ein Bokeh zerstören. Wie Sie auf dem Bild unten sehen können, habe ich einen meiner Kreise etwas abgeflacht, während ich die Textur reparierte. Wir werden das im nächsten Schritt beheben.
Schritt 6: Hinzufügen weiterer Bokeh
Nehmen Sie jetzt den Bokeh-Pinsel, den Sie erstellt haben, und deaktivieren Sie alle Streueffekte, die Sie zuvor aktiviert haben. Fügen Sie in einem zusätzlichen Bokeh einen Klick nach dem anderen hinzu, wenn in der Bildmitte erkennbare Lücken auftreten (Abstand von den Rändern einhalten!). Verwenden Sie ein paar Ebenen und unterschiedliche Deckkraft, um es schön aussehen zu lassen, und ersetzen Sie alle Kreise, die Sie mit dem vorherigen Schritt durcheinander gebracht haben, indem Sie direkt über ihnen malen.
Wenn Sie mit diesem Schritt fertig sind, sollten Sie eine schöne und perfekt anpassbare Hintergrundgrafik haben. Speichern Sie das jetzt als JPG, und halten Sie dabei die Dateigröße so gering wie möglich, während Sie ein gestochen scharfes Bild erhalten. Ich beschloss, mein Bild bei 500px um 500px zu retten, damit ich das sich wiederholende Muster leicht erkennen und nach lästigen Bereichen suchen konnte.
Als Nächstes testen wir es in einem Webbrowser, um sicherzustellen, dass es funktioniert.
Schritt 7: Wirf es in eine Webseite
Am besten testen Sie die Textur, indem Sie einfach eine kurze Webseite erstellen. Erstellen Sie ein leeres HTML-Dokument, und formatieren Sie den Körper mit dem folgenden CSS:
Sehen Sie sich jetzt eine Vorschau in Ihrem Browser an, um zu sehen, wie Sie das gemacht haben. Machen Sie sich keine Sorgen, wenn es nicht perfekt ist, gehen Sie einfach zurück und optimieren Sie die zu reparierenden Bereiche. Wie Sie im Bild unten sehen können, sind wir sehr gut gefliest! Nicht schlecht für ein paar Minuten Arbeit.
Organische Texturen
Um nur gründlich zu sein, möchte ich Ihnen auch zeigen, wie dies mit einer Textur funktioniert, die bei den Ressourcen, die Sie online finden, etwas typischer ist. Hier ist einer, den ich von Flickr mitgenommen habe.
Schneiden Sie zuerst die Kanten ab, sie sind in einem wiederholten Muster zu leicht zu erkennen. Führen Sie dann den Offset-Befehl wie zuvor aus.
Wie Sie im obigen Bild sehen können, ist diese Textur für diese Technik so perfekt, dass es schwierig ist, die Nähte zu erkennen, noch bevor wir eine Reinigung durchführen! Gehen Sie mit dem Klonwerkzeug oder dem Heilungspinsel entlang der Nähte, um sicherzustellen, dass die Übergänge schön und allmählich sind.
Wenn Sie das getan haben, speichern Sie es und laden Sie es wie zuvor in den Browser, um zu sehen, ob Sie hässliche Bereiche haben.
Das Bild oben zeigt mein Endprodukt. Nachdem ich es ein zweites Mal mit einer viel einfacheren Textur durchgearbeitet habe, konnte ich meine Zeit auf ungefähr zwei Minuten reduzieren.
Fazit
Diese Methode ist so schnell und einfach, dass Sie wirklich keine Entschuldigung haben, das nächste Mal, wenn Sie den Hintergrund Ihres Webdesigns aufpeppen möchten. Wenn Sie Ihre eigenen gekachelten Texturen erstellen, anstatt sich eine fertige zu schnappen, wird Ihre Website einzigartig aussehen und Sie haben viel mehr Freiheit in der Art der gewünschten Textur.
Teilen Sie uns in den Kommentaren unten mit, ob Sie mit dieser Methode ein anständiges Plättchen finden konnten. Hinterlassen Sie einen Link zu Ihrem Endprodukt, damit wir es ausprobieren können!