26Aug

Machen Sie einen nahtlosen Tiling-Hintergrund für Webseiten in ungefähr zehn Sekunden

click fraud protection

Das Erstellen eines Hintergrundbilds für Ihre Webseite( oder Desktophintergrund) ist keine Herausforderung. In der Tat kann sogar ein Neuling Photoshop-Benutzer in etwa zehn Sekunden einen aushecken. Hier ist die einfachste der einfachen Methoden mit überraschenden, großartigen Ergebnissen.

Versetzen des Bildes

Suchen Sie ein geeignetes Bild, wie dieses von Flickr. Sie können jedes Bild verwenden, aber einige Bilder funktionieren besser als andere als sich wiederholender Hintergrund.

Breakout Photoshop. Wenn Sie ein GIMP-Benutzer sind, können Sie den Offset-Filter ähnlich dem verwenden, den wir verwenden, und folgen Sie direkt mit uns.

Die "harte" Arbeit kann mit diesem "Offset" -Filter in einem Augenblick erledigt werden. Finde es, indem du zu Filter & gt; navigierstAndere & gt;Offset, wie gezeigt.

Wenn Sie ein Bild mit nur einer Hintergrundebene verwenden, verschiebt der Offset-Filter das Bild und umschließt das Bild in einer Kachelbewegung. Stellen Sie sicher, dass "Umbruch" in "Nicht definierte Bereiche" ausgewählt ist, um das Bild richtig zu kacheln. Das ist die meiste Arbeit, und wir haben gerade erst begonnen. Mal sehen, wie wir dieses sich wiederholende Foto ein wenig nahtloser machen können.

instagram viewer

Nahtlose Kanten mit einem Weichzeichner

Hier ist eine( etwas grobe) Methode, die nicht wirklich gut für dieses Bild funktioniert, aber möglicherweise für Ihr Bild funktioniert. Wir erstellen eine Unschärfeschicht, indem wir unseren Hintergrund duplizieren( Rechtsklick & gt; Ebene duplizieren).

Wenn diese Ebene ausgewählt ist, führen Sie einen Gaußschen Weichzeichner durch, indem Sie zu Filter & gt;Weichzeichnen & gt;Gaußscher Weichzeichner. Verwenden Sie eine Einstellung, die für Sie sinnvoll ist.

Erstellen Sie eine ausgeblendete Ebenenmaske durch Drücken der linken Maustaste auf das Symbol im Ebenenfenster.

Verwenden Sie dann einfach einen weichen Pinsel mit Weiß als Vordergrundfarbe, um die Kanten, an denen die Fliesen sichtbar sind, weicher zu machen. Dies könnte für einige Fotos sehr gut funktionieren, aber unser Bild ist kein erstaunliches Ergebnis, also versuchen wir eine zweite Technik.

Alternativ finden Sie das "Blur Tool" auch in der Toolbox. Es kann Ihnen ein sehr ähnliches Ergebnis geben, indem Sie Teile des Bildes selektiv verwischen.

Content Aware Blending für erstaunliche Ergebnisse

In solchen Situationen sehen content-aware-Tools aus, als würden sie Wunder wirken. Der "Spot Healing Brush" kann die harten, offensichtlichen Linien in den Fliesen schnell entfernen und Ihnen ein viel nahtloseres Aussehen geben. Wenn Sie den Bereichsreparaturpinsel auswählen, sollten Sie einen weichen Kantenpinsel verwenden.

Nach vier schnellen Pinselstrichen überzeugt das Bild überraschend. Es ist schwer zu glauben, dass es so wenig Arbeit gekostet hat.

Testen Sie es in einem Browser

Speichern Sie Ihr Bild auf Ihrem Desktop als repeat.jpg , dann laden Sie diese Datei auf Ihren Desktop und öffnen Sie sie in Ihrem Browser Ihrer Wahl. Dadurch wird das, was Sie erstellt haben, als sich wiederholender Hintergrund geladen, genau so, wie Sie es auf einer entfernten Webseite sehen würden. Wenn Sie HTML( ich bin mir sicher, viele von Ihnen) wissen, können Sie diese Datei in einem Notizblock bearbeiten, um einen anderen Dateinamen zu verwenden, wenn Sie bevorzugen.

Gedanken oder Kritik zu unserer heutigen Methode? Hast du Tricks, die noch besser funktionieren? Erzählen Sie uns davon in den Kommentaren oder mailen Sie uns einfach Ihre Fragen an [email protected], und wir können sie in einem zukünftigen How To Geek Grafikartikel vorstellen.

Bildnachweis: Wall of Books von benuski , Creative Commons.