Gekachelte Hintergründe eignen sich sowohl für Website-Hintergründe als auch für alle Arten von Photoshop-Arbeiten. Sie sind besonders nützlich, wenn Sie mit Texturen arbeiten, bei denen Sie einen größeren Gesamthintergrund benötigen als das kleine Bild, mit dem Sie arbeiten müssen. In diesem kurzen Tutorial werde ich Sie durch die Textur nehmen und in ein Hintergrundbild verwandeln, das für nahtloses Kacheln bereit ist. Es ist eine nützliche kleine Technik, die es schon immer gibt. Wir benötigen diese Technik für das andere Tutorial von heute - Wie ein einfaches Layout mit Mustern, Fotos und Hintergründen gemischt werden kann.
Dieser Beitrag ist Tag 9 unserer Webdesign-Sitzung. Tag 8 der Creative SessionsIn diesem Tutorial möchten wir also einen gekachelten Hintergrund einer Grasbeschaffenheit erstellen. Es gibt ein fantastisches Foto von Gras auf Flickr von 100kr
die wir verwenden können. Wenn wir das Bild jedoch nur so kacheln, wie es ist, ist das Ergebnis nicht sehr gut. Wie Sie oben sehen können, ist es sehr klar, wo das Bild wiederholt wird und die dunklen Flecken sehen ziemlich komisch aus. Um das Foto in einen gekachelten Hintergrund zu verwandeln, müssen wir zunächst alle Unregelmäßigkeiten entfernen und dann die Kanten miteinander verschmelzen lassen.
Der erste Schritt ist also, das Hauptbild zu packen und dann in einen Abschnitt zu schneiden, der keine wirklich dunklen Eckfelder hat. So etwas wie die Box oben.
Hier ist unser Segment. Ich habe es tatsächlich ein bisschen verkleinert, so dass die Textur nicht so stark gespitzt ist. Obwohl es größtenteils gleichmäßig gefärbt ist, könnten wir die Kanten aufhellen. Je gleichmäßiger das Bild ist, desto besser sind die kleinen Unterschiede, wenn der Hintergrund gefliest wird.
Also schnapp dir einfach die Ausweichwerkzeug (O) Mit einem großen weichen Pinsel streichen Sie den linken und den rechten Rand vorsichtig mit einem sanften Pinsel, um sie etwas aufzuhellen. Gehen Sie jedoch nicht über Bord, da das Gras ausgewaschen aussieht.
Wie Sie oben sehen können, sieht das Gras viel einheitlicher aus. Aber oben links befindet sich ein kleines Blatt, das zu einem toten Hinweis wird, wenn dasselbe Blatt immer und immer wieder auftaucht, also sollten wir es loswerden. Dazu das Patch-Werkzeug (J) Zeichnen Sie eine Form um das Blatt und ziehen Sie es mit der Maus, um einen Bereich in der Nähe zu erhalten, in dem Sie das Flicken ausführen können. (Beachten Sie, dass das Patch-Tool auf Source und nicht Destination festgelegt sein sollte, ansonsten verwenden Sie es etwas anders.)
Deshalb sieht unser Hintergrund jetzt ziemlich einheitlich aus. Wir müssen nur die Kanten ineinander bluten lassen. Dupliziere also die Grasschicht. Bewegen Sie dann die erste Ebene nach links und die zweite Ebene nach rechts. Machen Sie so weiter, bis Sie beide Ebenen mit einer weißen Lücke dazwischen sehen. Jetzt bringen Sie sie zusammen, so dass die rechte Kante der ersten Ebene die linke Kante der zweiten Ebene berührt.
Hier sieht man die beiden Schichten fast berührend. Bringe sie zusammen, sodass kein Weiß dazwischen ist, und füge die beiden Ebenen zu einer zusammen.
Jetzt verwenden wir erneut das Patch-Werkzeug, um eine grobe Form an der Kante, an der sich die beiden Ebenen treffen, zu zeichnen. Dann ziehen Sie mit der Maus einen nahegelegenen Bereich darüber, um ihn zu patchen.
Das Patch-Tool führt diese Art von Vorgang aus Ja wirklich einfach, besonders mit einem so lauten Hintergrund wie dieses Gras. Wie Sie sehen, wenn Sie nicht genau hinschauen, ist nicht klar, wo sich die Mischlinie befindet. Wenn Sie möchten, können Sie bis ins Detail gehen und einzelne Grashalme klonen. Dies ist jedoch gut für unsere Zwecke.
Jetzt wiederholen wir denselben Vorgang vertikal. Dupliziere also die Ebene und bewege eine nach unten und eine nach oben, bis sich die untere und obere Kante treffen. Füge die Ebene zusammen und verwende das Patch-Tool, um die Kante zu entfernen.
Und jetzt sind wir bereit für das Fliesenlegen!
Der Grund, warum dies funktionieren wird, ist, dass wir diese Ränder effektiv beseitigt haben. Die neuen Ränder des Dokuments stimmen bereits überein, weil wir die Ebenen gleichermaßen nach links und rechts verschoben haben, so dass der rechte Rand dieses Dokuments tatsächlich liegt ist das nächste Pixel entlang der linken Kante.
Drücken Sie also STRG-A um alles auszuwählen und zu gehen Bearbeiten> Muster definieren.
Nun geben wir dem Muster einen Namen
Wenn Sie nun auf einer beliebigen Ebene Mischoptionen auswählen und das Kontrollkästchen "Musterüberlagerung" aktivieren, können Sie aus den benutzerdefinierten Mustern auswählen, einschließlich der gerade erstellten Grasmuster. Im Bild oben sehen Sie, wie ich das Muster in einen Website-Hintergrund einbringe.
Natürlich sollten Sie das Musterbild auch als PSD oder JPG selbst speichern, da Sie es möglicherweise als Standalone-Bild benötigen. Wenn Sie es beispielsweise als Hintergrundbild in einem HTML-Dokument verwenden, benötigen Sie ein einzelnes JPG-Bild, kein Photoshop-Muster..
Hier ist unser gefliestes Gras. Wie Sie sehen, gibt es ein bisschen dunkle Flecken, die es verraten, aber da ich dies als Hintergrund für eine Website verwenden werde, ist das keine große Sache, da es über alles zu viel geben wird. Trotzdem können Sie leicht zurückkehren und diese Stelle flicken, um sie nahtloser zu gestalten.
Vielen Dank an die Kommentatoren, die darauf hingewiesen haben, dass es tatsächlich einen einfacheren Weg gibt, den Hintergrund mit einem Filter auszugleichen! Gehen Sie einfach zu Filter> Andere> Versatz und wählen Sie einen Pixelwert aus, um das Bild horizontal und vertikal zu verschieben. Danke für die Tip Jungs! Ich lerne jeden Tag etwas Neues :-)
Dieser Beitrag ist Tag 9 unserer Webdesign-Sitzung. Tag 8 der Creative Sessions