Testen, ob ein Hintergrundbild die Kachel in Photoshop ordnungsgemäß wiederholt?

9

Ich arbeite häufig daran, Hintergrundtexturen in Photoshop zu erstellen, die im Web verwendet werden sollen. Leider muss ich normalerweise raten oder nur Werbegeschenke von anderen Websites verwenden.

Ich möchte meine eigenen Texturen in Photoshop erstellen und prüfen, ob sie richtig gekachelt sind, bevor ich das Bild exportiere. Gibt es eine Möglichkeit, dies schnell zu tun? Ich erinnere mich an eine Methode mit Offset, bin aber mit den Werkzeugen nicht vertraut.

Im Folgenden finden Sie einige Beispiel-Hintergrundkacheln, damit Sie sehen können, wovon ich spreche:

tile1

tile2

adobe-photoshop website-design background tiles Schicksalsinseln
quelle

Antworten:

17
  • Erstellen Sie Ihr Bild. Nehmen wir zum Beispiel an, es ist ein 200-Pixel-Quadrat
  • Gehen Sie zu FILTERS> OTHER> OFFSET und geben Sie x- und y-Zahlen ein, die der Hälfte Ihrer Bildgröße entsprechen (in diesem Fall 100px).
  • Dadurch wird Ihr Bild um so viele Pixel verschoben und die Pixel, die von der Leinwand verschoben wurden, auf die andere Seite verschoben. Sie sehen jetzt eine Naht in der Mitte Ihres Bildes, in der sich das Muster nicht vollständig wiederholt.
  • Bearbeiten Sie diese Naht, um mit den gewünschten Werkzeugen eine glatte Mischung zu erzielen (Klonwerkzeug ist eine gängige Option).
  • Speichern Sie Ihr neues Bild.

Bei komplexeren Bildern müssen Sie möglicherweise einen endgültigen Versatz von beispielsweise 1/4 der Pixelabmessungen vornehmen, um die Kanten auszubessern, die Sie möglicherweise beim ersten Mal verpasst haben, als Sie in die Nähe der Kante der Leinwand fielen.

DA01
quelle
Danke das ist perfekt! Genau das, wonach ich gesucht habe
Destiny Islands
5

DA01 beantwortet, wie man es macht, aber Ihre Frage ist, wie man es testet. Die Antwort auf diese Frage lautet:

  1. Wählen Sie Ihre Musterebene aus
  2. Bearbeiten> Muster definieren
  3. Neue Ebene erstellen
  4. Wählen Sie Alle
  5. Bearbeiten> Füllen> Muster> Wählen Sie Ihr Muster
  6. Klicken Sie auf OK und sehen Sie, ob es gut aussieht
Ryan
quelle
2
Pfui. Ich habe die Frage total falsch verstanden! Guter Tipp. Eine andere Möglichkeit besteht darin, einfach eine Test-HTML-Datei mit einem sich wiederholenden Hintergrund zu erstellen. Speichern Sie dann einfach die Datei erneut und laden Sie den Browser neu.
DA01
1
Ja, ich wusste, wie es in HTML / CSS geht, wusste aber nicht, dass Photoshop auch testen kann. Danke für den Hinweis!
Destiny Islands
2

Ich speichere das Bild traditionell als JPG oder PNG und verwende dann einfaches HTML, um die Kacheln zu testen.

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

Öffnen Sie das in einem Browser und Sie können die Kacheln sehen und einfach "image.jpg" erneut speichern und die Webseite aktualisieren, um Revisionen zu überprüfen.

Scott
quelle
1

Es gibt auch eine andere Möglichkeit, dies zu tun, aber die Grenze besteht darin, dass alle anderen Muster dieselbe Größe haben müssen. Sie werden sehen, warum.

Schritte:

  • Erstellen Sie eine 200 x 200 Pixel große Box.
  • Konvertieren Sie es in ein intelligentes Objekt.
  • Dupliziere und richte es so aus, dass 3 Felder horizontal sind. Stellen Sie sicher, dass sich keine Überlappungen oder Leerzeichen dazwischen befinden.
  • Duplizieren Sie die drei ausgewählten Felder in drei vertikale Spalten.
  • Wenn noch nicht aktiviert, aktivieren Sie schwebende Fenster in den Einstellungen.
  • Doppelklicken Sie und öffnen Sie das Smart-Objekt.
  • Richten Sie beide Fenster so aus, dass Sie beide Dateien sehen können.
  • Füllen Sie das Smart-Objekt mit einem beliebigen Muster und sehen Sie es gleichzeitig in einem anderen Fenster in Aktion.
Muhammad Umer
quelle
1

Es gibt ein großartiges Tool (Freeware für den persönlichen Gebrauch) namens AMP Tile Viewer , mit dem Sie sehr schnell überprüfen können, ob ein Bild kachelbar ist und wie es gekachelt aussieht. Ich benutze es die ganze Zeit und es funktioniert einfach super. In Photoshop müssen keine Muster erstellt werden, die Sie niemals verwenden oder anschließend löschen müssen.

TaranQ
quelle
1

Ich habe eine Chrome-Erweiterung namens Tile View geschrieben , mit der Sie mit der rechten Maustaste auf ein Bild klicken und sehen können, wie es gekachelt wird.

tknomad
quelle
Es gibt auch dieses webbasierte Tool, das ich kürzlich herausgefunden habe: tile.toyls.com
Thomas Guyot-Sionnest
0

So wie ich es mache, speichere ich die Kachel einfach als JPG und setze sie auf Kachel auf meinem Desktop. Ziemlich schnell und einfach.

jill
quelle