Kachelbare Muster für das Hintergrundbild der Website erstellen - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:23

Hier ist eine unkomplizierte und einfache (glaube ich) Methode zum Erstellen von Bildern, die gekachelt werden können, ohne zu "rasterartig" auszusehen. Dieses Tutorial verwendet Inkscape (www.inkscape.org), einen Open-Source-Vektorgrafikeditor. Ich kann mir vorstellen, dass diese Methode auch auf teure Vektorgrafikprogramme wie Adobe Illustrator angewendet werden kann. Hey, es ist dein Geld.

Schritt 1: Einrichten des Dokuments

Nach dem Öffnen von Inkscape möchten Sie die Dokumenteigenschaften einrichten. ([Datei -> Dokumenteigenschaften])Ändern Sie zuerst die Breite und Höhe des Dokuments auf eine Zahl, die einfacher zu handhaben ist. Für dieses Tutorial habe ich ein quadratisches Bild erstellt, aber jede Proportion ist ausreichend. Als nächstes möchten Sie das Raster einrichten. In älteren Versionen von Inkscape war nur ein Raster möglich. In neueren Versionen müssen Sie ein neues Raster erstellen. Ändern Sie den Rasterabstand so, dass sich diese Werte gleichmäßig in die Werte der Dokumentbreite und -höhe aufteilen. Im Allgemeinen ist es eine gute Idee, mit einem großen Bild zu arbeiten und dann nach Bedarf zu verkleinern. Da es sich um Vektorgrafiken handelt, spielt die Größe technisch keine Rolle, aber praktisch wird es mit größeren Zahlen konzeptionell einfacher. In diesem Tutorial habe ich ein 500x500px-Bild verwendet und mein Raster ist in 10px-Intervallen. Stellen Sie abschließend sicher, dass die Option "Einrasten aktivieren" aktiviert ist.

Schritt 2: Rechteckwerkzeug

Verwenden Sie das Rechteckwerkzeug, um ein Quadrat/Rechteck zu zeichnen, das die gesamte Dokumentgröße einnimmt. Ein großer Rasterabstandswert (siehe vorheriger Schritt) lässt das Rechteckwerkzeug leicht an den Dokumenträndern einrasten.

Schritt 3: Klonen des Musters

Gruppe])", "oben":0.38721804511278196, "links":0.354, "height":0.35902255639097747, "width":0.372}]">

Fügen Sie das Bild hinzu, das Sie in Ihrem Muster haben möchten. Wenn Ihr Bild eine SVG-Datei ist, können Sie es normalerweise einfach per Drag & Drop in Ihr geöffnetes Dokument ziehen. Erstellen Sie einen Klon dieses Bildes. ([Bearbeiten -> Klonen -> Klon erstellen] oder Sie können Alt + D drücken) Verschieben Sie das Originalbild aus dem Weg, damit es Ihren Arbeitsbereich nicht beeinträchtigt. Verschieben Sie das geklonte Bild in das Quadrat und erstellen Sie ein paar Kopien des Klons. Der Grund für die Verwendung von Klonen anstelle von Kopien des Originals wird später ersichtlich. Hier ist eine einfache Möglichkeit, Kopien im Inkspace zu erstellen: Ziehen Sie das zu kopierende Objekt und drücken Sie die Leertaste, um eine Kopie an dieser Stelle abzulegen (halten Sie die Maustaste gedrückt).). Im Allgemeinen benötigen Sie wahrscheinlich nicht mehr als 2 oder 3 Kopien, um das Muster zu erstellen. Wie Sie sehen können, hatte ich 3 Kopien des Bildes, aber ich habe eine später gelöscht. Wenn Sie denken, dass Sie genug haben, gruppieren Sie diese Elemente.

Schritt 4: Mehr Klonen

Aktivieren Sie das Fangen erneut, wenn Sie es im vorherigen Schritt deaktiviert haben, wie ich es getan habe. Auf dem Screenshot sehen Sie das Raster nicht, aber es ist aktiviert. Wählen Sie die soeben erstellte Objektgruppe aus und erstellen Sie einen Klon dieser Gruppe. Richten Sie die Kanten des Klons am Seitenrand aus und legen Sie weiterhin Kopien von. ab den Klon, bis Sie in der Mitte mindestens ein 3x3-Gitter von Klonen um das Original herum haben.

Schritt 5: Fachkundige Umzugshelfer

Nachdem Sie nun die Klone verteilt haben, ist es an der Zeit, Ihr Muster zu glätten. Im Moment sieht das Muster eher blockig und zu regelmäßig aus, daher möchten wir die Dinge etwas verteilen. Um Objekte innerhalb einer Gruppe zu verschieben, wäre die einfachste Methode, zuerst die Gruppierung der Objekte aufzuheben, das fragliche Objekt zu verschieben, und gruppieren Sie dann die Objekte neu. Dadurch werden jedoch die Verbindungen zu den Klonen unterbrochen. Stattdessen möchten wir die Gruppe intakt halten, während wir einzelne Objekte innerhalb der Gruppe manipulieren. Halten Sie dazu die Control-Taste gedrückt und klicken Sie auf das Objekt, das Sie ändern möchten. Strg-Klick wählt einzelne Objekte innerhalb einer Gruppe aus. Wenn Sie die Objekte jetzt verschieben, spiegeln auch die umgebenden Klone die Änderung wider. Mit dieser Methode können Sie die Bilder nun verschieben, bis Sie mit Ihrem Gesamtmuster zufrieden sind. Sie können die Bilder auch in der Größe ändern, drehen oder löschen. Am Ende habe ich eines der Bilder gelöscht, weil ich nur 2 brauchte, um das Muster zu erfüllen.

Schritt 6: Über die Verwendung geklonter Bilder

Ich habe in Schritt 3 erwähnt, dass Sie Klone anstelle von Kopien von Bildern verwenden sollten, wenn Sie das mittlere Quadrat ("das Original") erstellen. Der Grund dafür ist, dass, wenn Ihr Bild selbst eine Gruppe von Objekten ist, die Strg-Klick-Methode zum Auswählen gruppierter Elemente die einzelnen Objekte des Bildes auswählt. Klone selbst können nicht bearbeitet werden (mit Ausnahme von Größe und Farbe), und daher bewirkt die Control-Click-Methode, dass das gesamte Klonobjekt ausgewählt wird, unabhängig davon, aus wie vielen Objekten das Originalbild besteht.

Schritt 7: Feinschliff

Als optionalen Schritt wählen Sie das Hintergrundquadrat aus (Strg-Klick) und stellen Sie die Füllfarbe auf Keine (dh transparent) oder eine beliebige Hintergrundfarbe ein. ([Objekt -> Füllung und Strich]) Ich habe auch die Deckkraft der Gruppe insgesamt verringert (durch regelmäßiges Klicken auswählen), damit das Muster im Hintergrund sein kann und nicht aufdringlich ist. Zum Schluss der wichtige Schritt des Exportierens. Öffnen Sie das Exportfenster ([Datei -> Bitmap exportieren]). Klicken Sie auf die Schaltfläche "Seite". Dadurch werden nur die Teile des Dokuments exportiert, die innerhalb der Seitengrenzen liegen, dh innerhalb des Quadrats des "Originals". Ändern Sie die exportierte Bitmap-Größe, wenn Sie möchten, und klicken Sie dann auf "Exportieren".

Schritt 8: Endprodukt

Fertig! Legen Sie es auf Ihren Desktop, verwenden Sie es für Ihre Website oder drucken Sie es aus und verkaufen Sie es als Hintergrundbild!