Photoshop Quick Tip 08: Grafik für den Website-Hintergrund erstellen

von meggs | 0 | 11337 Aufrufe

Anzeige Hier werben

Dieser Artikel ist Teil der Serie Photoshop Quick Tips.

Mit Hilfe von CSS ist es möglich Hintergrundgrafiken für Websites einzubinden. Dazu werden Muster erstellt, die an allen vier Kanten so bearbeitet sind, dass sich bei Wiederholung der Grafik keine Übergänge sichtbar sind, sondern der Hintergrund monochrom wirkt. Doch wie erstellt man selbst solche Muster. Hier gezeigt anhand einer einfachen Maserung.

Bild zu Photoshop Quick Tip 08: Grafik für den Website-Hintergrund erstellen
Vorlage

Würde ich nun mit CSS dieses Muster als Hintergrund verwenden würde das so aussehen:

Bild zu Photoshop Quick Tip 08: Grafik für den Website-Hintergrund erstellen
unschöne Kanten

Man sieht die Kanten die jedoch nicht zu sehen sein sollten. Die eine Kante muss also so enden wie die gegenüberliegende.

Öffnen Sie ihre Grafik - falls noch nicht geschehen - in Photoshop.

Bearbeitung

Wählen Sie einen Bereich an der linken Kante aus, klicken Sie rechts und wählen Sie im Kontextmenü Ebene durch Kopie.

Wählen Sie die erstellte Ebene aus. Drücken Sie nun cmd + T bzw. Strg + T um Frei Transformieren zu aktivieren und rechtsklicken Sie in die Transformationsebene. Im aufklappenden Kontextmenü wählen Sie Horizontal spiegeln.

Bild zu Photoshop Quick Tip 08: Grafik für den Website-Hintergrund erstellen

Verschieben Sie nun die Ebene auf die gegenüberliegende Kante, sodass das Objekt mit der Ober-, Unter- und gegenüberliegenden Kante pixelgleich abschließt.Fpr die horizontalen Kanten müssen Sie Vertikal spiegeln verwenden.

Erstellen Sie auf der Ebene eine Maske um die eventuell im Bild entstandene Kante zu retuschieren. Mit einem weichen schwarzen Pinsel malen Sie nun in der Maske die Kante glatt.

Bild zu Photoshop Quick Tip 08: Grafik für den Website-Hintergrund erstellen
Ergebnis nach der Bearbeitung

Wiederholen Sie den Vorgang ab der Überschrift "Bearbeitung" für die obere (oder untere) Kante.

Wiederholt man dann die Grafik nebeneinander, sind die Übergänge schön glatt und das einzelne Muster nicht mehr erkennbar.

Eine andere Möglichkeit stellt der Mustergenerator dar. Dieser ist aber seit Photoshop CS4 nicht mehr Teil der Anwendung.

Er ist über Filter » Mustergenerator oder über den Shortcut ⌥ ⇧ ⌘ X aufrufbar.

Bild zu Photoshop Quick Tip 08: Grafik für den Website-Hintergrund erstellen
Wiederholt nach der Bearbeitung
Über den Autor: meggs
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten