Erstellen Sie ein sich wiederholendes Muster in Illustrator, Kreativer Bloq
Drehen 01. die Basis Grafik in ein Muster
Öffnen Pattern.ai (in den unterstützenden Dateien für dieses Tutorial zur Verfügung gestellt) in Illustrator. Dies ist die Ausgangs Grafik für das Tutorial, aber wenn Sie Ihren eigenen Entwurf haben, können Sie das gleiche Verfahren verwenden, die in ein sich wiederholendes Muster turrn.
Unser grundlegendes Design. Wir werden es in ein sich wiederholendes Muster drehen
Sobald Sie ‚Pattern.ai‘ geöffnet haben, wählen Sie Objekt> Muster> Stellen.
Illustrator CS6 der neue Tool helfen, den Prozess der Mustererstellung automatisiert
Dadurch wird das Muster Optionen-Dialog öffnen. Passen Sie, bis Sie ein Muster erhalten, die Sie mögen. Sobald Sie fertig sind, klicken Sie auf die Schaltfläche Fertig oberhalb der Zeichenfläche.
Die Pattern-Optionen-Dialog ermöglicht es Ihnen, wie wiederholt Ihr Muster steuern
02. Holen Sie sich das Muster auf der Zeichenfläche
Nun, da das Muster in der Farbpalette ist (wenn Sie nicht Ihre Farbpalette geöffnet haben, gehen Sie auf Fenster> Farbfelder) klicken und die Swatch auf die Zeichenfläche ziehen.
Klicken und ziehen Sie das Muster aus den Farbfeldern auf die Zeichenfläche
03. Erstellen Sie eine neue Zeichenfläche für das Muster wiederholen
Zoom in, bis Sie einen rechteckigen Kasten innerhalb des Musters sehen. (Keine Sorge: Das ist kein Fehler - es zeigt nur, wo die Wiederholung beginnt.)
Das Muster bearbeitet wird: das Rechteck zeigt, wo es wiederholt
Sobald Sie den rechteckigen Kasten gefunden haben, gehen Sie auf die Werkzeugleiste und wählen Sie das Artboard Werkzeug. Halte [Umschalt], zeichnen andere artboard wie unten gezeigt. Release [Shift], wenn Sie fertig sind.
Zeichnen Sie eine neue Zeichenfläche mit den Abmessungen hier gezeigt
04. Speichern Sie das Muster für die Verwendung im Web
Wählen Sie die neue Zeichenfläche, indem Sie auf Fenster> Zeichenflächen die Zeichenflächen-Palette zu öffnen. Sie sollten zwei artboards in der Palette haben: die zweite wählen.
Nun gehen Sie Datei> Für Web speichern.
Verwenden Sie Für Web speichern Ihre Mustereinheit zu speichern
Ein weiterer Dialog erscheint. gehen für beste Qualität, auf die Preset Dropdown-und wählen Sie PNG-24. Stellen Sie sicher, Transparenz ist markiert, so dass Sie eine eigene Farbe hinter dem Muster haben können.
Klicken Sie auf Speichern. Wenn Sie nach einem Ort aufgefordert werden, das imgs Verzeichnis in Ihrem Projektordner wählen.
Verwenden Sie das PNG-24 Preset für Ihr Muster
Körper Hintergrund-Bild: URL ( '../ imgs / pattern.png');
background-repeat: repeat;
>
(Sie wollen die background-repeat Linie hinzuzufügen, weil manchmal Browser Schwierigkeiten beim Laden Muster hat, so dass diese deckt alle Basen.)