Wie baue ich eine gekachelten Hintergrund für Ihre HTML5 und CSS3-Site
Oft wollen Sie ein Hintergrundbild die gesamte Seite auf HTML5 und CSS3 Website zu decken. Dies kann schwieriger sein, als es scheint, weil Sie nicht wissen, wie groß die Seite in den Browser des Benutzers sein wird.
Schlimmer noch, große Bilder kann eine riesige Menge an Platz in Anspruch nehmen und die Erfahrung des Benutzers verlangsamen. Die gemeinsame Lösung ist ein gefliestes Bild zu verwenden, die im Hintergrund zu wiederholen entworfen ist. Gimp hat einige sehr nützliche Werkzeuge für den Aufbau gekachelte Bilder.
Daran erinnern, dass die Hintergrund Wiederholung CSS-Eigenschaft können Sie festlegen, wie ein Hintergrund wiederholt. Die Standardeinstellung wiederholt den Hintergrund unendlich sowohl in der X- und Y-Achsen. Sie können auch den Hintergrund horizontal zu wiederholen (repeat-x), Vertikal (repeat-y), oder überhaupt nicht (no-repeat).
Das Ziel eines gekachelten Hintergrund ist eine relativ kleine Grafik die ganze Seite füllen machen und sehen aus wie ein größeres Bild. Das Geheimnis ist, um das Bild zu schaffen, so dass es schwierig ist, zu sehen, wo das Bild wiederholt. Hier ist eine Möglichkeit, einen gekachelten Hintergrund in Gimp zu machen. Natürlich können Sie diese Technik für Ihre eigenen Zwecke anpassen.
Erstellen Sie ein neues Bild.
Die Größe des Bildes ist wichtig. Kleinere Bilder sind viel effizienter zum Download, aber das Muster ist viel offensichtlicher. Beginnen Sie mit 256 von 256 Pixel.
Bauen Sie ein zufälliges Muster.
Sie können die Plasma-Filtertechnik verwenden oder eine ähnliche Technik versuchen, durch Filter-Render-Wolken-Differenz-Wolken wählen. Der Differenz-Wolken-Filter erzeugt ein Graustufenbild, aber mit einer Reihe von interessanten Optionen. Die Verfliesbare Option erstellt ein Muster, das auf Fliese bereit ist. Spielen Sie mit diesen Optionen, bis Sie etwas interessant.
Stellen Sie den Kontrast.
Für die beste Wirkung, möchten Sie eine relativ gleichmäßige Verteilung von Werten von hell bis dunkel. Der einfachste Weg, dies zu tun ist durch die automatische Normalisierung Werkzeug (Farben-Auto-Normalisieren).
Wählen Sie einen Farbverlauf.
Sie werden Farben zu Ihrem Muster fügen Sie eine Technik namens Gradient Mapping. Verwenden Sie das Verlaufsdialogfeld (Windows-andockbare Dialoge-Gradients) einen Gradienten zu holen. Dunklere Farben auf dem Bild Karte Farben auf der linken Seite des Gradienten, und hellere Farben Karte auf der linken Seite. Sie können die Farben anpassen, also keine Sorge, wenn die Farben nicht genau das, was Sie wollen.
Verwenden Sie den Farbverlauf-Werkzeug (Farben # 10154- Karte # 10154- Gradient Map) die Farben des Gradienten zu Ihrem Wolkenmuster abzubilden.
Offset auf das Bild um Fliesen zu überprüfen.
Der einfachste Weg, um zu sehen, ob die Bildkacheln gut ist, das Bild zu kompensieren. Dies bringt die Kanten in der Mitte, damit Sie sehen, wie das Bild aussehen wird, wenn mehrere Kopien nebeneinander sind. Öffnen Sie den Offset-Dialog, indem Sie Layer-transformations Offset. Der Offset-Dialog hat eine handliche x / 2, y / 2-Taste. Klicken Sie auf die Schaltfläche, um zu sehen, wie Ihr Bild aussieht.
Reinigen Sie das Bild, wenn nötig.
Wenn Sie die Verfliesbare Option gewählt haben, als Sie die Cloud-Image erstellt, wird das neue Bild gut aussehen. Wenn nicht, können Sie einige sichtbare Nähte haben. Verwenden Sie die Verschmieren und Clone-Tools diese Nähte zu bereinigen, wenn nötig. Tragen Sie die Offset-Werkzeug ein zweites Mal zu überprüfen, ob die Nähte gut aussehen.
Anwenden von Filtern um den gewünschten Effekt zu erhalten.
Vielleicht möchten Sie Ihr Bild zu kolorieren oder es ein bisschen verwischen alle Artefakte der Bereinigung zu decken. Denken Sie daran, dass Hintergrundbilder sollten mit sehr geringem Kontrast extrem dunklen oder extrem leicht sein, wenn Sie lesbaren Text möchten.
das Bild Testen Sie, indem Sie das Bild in XCF-Format und ein web-freundlichem Format (wie PNG) zu speichern, eine einfache Seite mit dem Bild als Hintergrund, und laden Sie die Seite in Ihren Browser es Fliesen wie erwartet, um sicherzustellen, bauen.
