Share
Im heutigen Tutorial werde ich Ihnen zeigen, wie Sie verschiedene Grafikstile in Adobe Illustrator CS6 vorbereiten und erstellen, um sie dann in einem Spiel zu verwenden. Die Vorteile der Verwendung von Grafikstilen sind, dass Sie sie anschließend auf eine Vielzahl von Formen anwenden können, ohne dass Sie jeden Look neu erstellen müssen. Lass uns in dieses lustige Tutorial einsteigen!
Ich werde Adobe Illustrator CS5 für meine ersten Teile dieses Lernprogramms verwenden. Dies ist eine rein persönliche Präferenz, da ich es auf meinem PC etwas stabiler finde. Die Verwendung von AI CS6 von Anfang bis Ende ist jedoch völlig in Ordnung. Beginnen Sie mit dem Erstellen eines neuen Dokuments im Farbmodus RGB.
Ich werde etwas Neues für mich ausprobieren und das ist eine andere Art, eine Farbpalette vorzubereiten. Diesen Tipp erhielt ich aus Tutorials von Beto Garza, von denen er mehrere auf Vectortuts + hier hat. Beginnen Sie mit dem Zeichnen von zwei Formen, und legen Sie aus den Formen eine bestimmte Anzahl von 3-Schritten (Strg + Alt + B) fest. Ändern Sie Ihre Start- und Endfarbe, um eine allmähliche Farbänderung zu erhalten. Dies ist die Grundlagen, um eine Farbpalette zu erhalten.
Mischen Sie es und versuchen Sie, eine Farbe aus dem Standard-Farbfeldbedienfeld auszuwählen. Gehen Sie dann in das Farbhilfefenster und wählen Sie dort eine Farbe aus. Dadurch erhalten Sie möglicherweise eine andere Farbenvielfalt.
Bevor ich mit dem Vorbereiten meiner Paletten fortfahre, muss ich wissen, welche Farbsätze ich für die Vielfalt der Elemente benötigen werde, die ich erstellen werde. Beginnen Sie mit einer grundlegenden Skizze einer Spielszene. Hier habe ich sechs mögliche Bereiche hinzugefügt, die erstellt werden sollen.
Mit den sechs Bereichen erstelle ich für jedes Element eine Farbmischung. Ich habe gerade die ursprüngliche Mischung dupliziert und dann die Start- und Endfarben geändert.
Sobald Sie mit Ihren Paletten zufrieden sind, können Sie mit dem Befehl Objekt> Ausblenden die Mischung entfernen und für jedes Element stehen Ihnen fünf Farben zur Verfügung. Wählen Sie jede Farbgruppe einzeln aus und klicken Sie unten im Farbfeldbedienfeld auf Neue Farbgruppe. Dadurch werden die Farben dieser Gruppe in einem eigenen Palettenordner hinzugefügt. Sie können dann doppelt auf den Palettenordner klicken und ihm den Namen Boden / Gestein, Gras usw. geben, um ihn später leichter referenzieren zu können.
Element für Element zeige ich Ihnen, wie Sie jeden Grafikstil erstellen. Wir fangen mit dem "Gras" an. Beginnen Sie mit dem Zeichnen einer gekrümmten Linie mit dem Stiftwerkzeug (P) oder dem Bogenwerkzeug. Geben Sie ihm eine schwarze Strichfarbe und wenden Sie dann ein 4pt Stroke Weight an. Fügen Sie im Konturbedienfeld das Profil: Breitenprofil 1 hinzu.
Wenn Sie diese Option ausgewählt haben, wählen Sie im Pinselbedienfeld den Befehl „Neuen Pinsel hinzufügen> Streubürste“ und verwenden Sie die folgenden Optionen. Ändern Sie die Färbemethode in Tönungen und klicken Sie auf OK.
Zeichnen Sie eine Linie mit dem Liniensegment-Werkzeug (\) auf der Zeichenfläche. Im Erscheinungsbild-Bedienfeld möchten Sie neun Striche mit dem hellsten Grün oben und dem dunkelsten unten hinzufügen. Wenden Sie Ihre Grasbürste auf jeden Strich und dann von oben nach unten die folgenden Strichstärken an: 0,5, 0,75, 0,75, 1,0, 1,25, 1,25, 1,5, 1,5, 1,75pt.
Klicken Sie anschließend im Grafikstil-Bedienfeld auf Neuer Grafikstil, um ihn dem Bedienfeld hinzuzufügen. Doppelklicken Sie auf das erstellte Symbol und benennen Sie es in etwas einprägsamer um.
Jetzt haben wir unser erstes Element. Ich werde mein Ebenenbedienfeld einrichten, sodass für jedes Element eine Ebene vorhanden ist.
Ich habe dann Grundformen für jedes Element mit den Farben aus meinen benutzerdefinierten Paletten hinzugefügt. Ich kann von hier aus sehen, ob die Farben gut zusammenpassen. Im Moment bin ich mir des Rosa nicht ganz sicher, aber ich werde das später ändern, wenn ich eine bessere Vorstellung davon habe, wie die Elemente zusammenarbeiten.
Weiter geht es mit dem Erstellen unserer Soil / Rocks. In diesem Stil beginnt Adobe Illustrator CS6 aufgrund des wunderbaren Pattern-Tools mit dem Preis. Wir beginnen mit dem Zeichnen mehrerer Formen mit dem abgerundeten Rechteckwerkzeug. Ich habe ein Strichgewicht von 4pt hinzugefügt und mittlere Farben aus dieser Farbgruppe für Füllung und Kontur verwendet.
Wählen Sie nach dem Erstellen alle Formen aus, und wechseln Sie zu Effekte> Transformieren und Verzerren> Aufrauen, und verwenden Sie die folgenden Optionen. Dies erzeugt einen unregelmäßigeren Stil für die Formen.
Gehen Sie dann zu Objekt> Darstellung erweitern, um den Effekt zu entfernen und Ihnen die eigenständigen Formen zu geben.
Wählen Sie Ihre Formen aus und gehen Sie zu Objekt> Muster> Erstellen, um die Musteroptionen zu verwenden.
Verschieben Sie die Formen mithilfe des Auswahlwerkzeugs (V) in Position, drehen Sie sie bei Bedarf und ändern Sie dann die Musteroptionen, um das gewünschte Muster zu erhalten. Das Ziel, die Steine in einer Formation zu platzieren, würde so wenig Lücken wie möglich zulassen, aber auch damit die Formen sich nicht berühren. Wir sind nicht ruhig mit der Erstellung dieses Musters fertig…
Fügen Sie mit dem Stiftwerkzeug (P) den Felsen Schatten hinzu. Nun wird der Adleraugen als erster sagen: "Wie kann es sein, dass sich Felsen auf Schattierungen befinden, weil sie alle unter der Erde liegen?" Durch das Hinzufügen von Schattierungen wird eine rockigere Textur erzeugt. Fügen Sie also zunächst eine der helleren Farben zu den Felsen hinzu, und denken Sie daran, unregelmäßige Formen zu zeichnen.
Fügen Sie dann mit einer helleren Farbe weitere Akzente an den Felsen an. Wenn Sie mit Ihrem Muster zufrieden sind, klicken Sie auf "Fertig". Das neue Muster wird nun Ihrem Farbfeldbedienfeld hinzugefügt und kann sofort verwendet werden.
Als ich das Muster auf die Bodenfläche des Spiels auftrug, war das Muster zu groß. Während die Form ausgewählt ist, gehen Sie zu Objekt> Transformieren> Skalieren und reduzieren Sie die Skalierung des Musters nur um 50%..
Ich habe dann nur die Farben aus der Mischpalette verwendet, die wir erstellt haben. Ich habe einen Grafikstil mit einem transparenten linearen Farbverlauf von oben und einem mittelhellen braunen Körper hinter dem Muster erstellt. Nach dem Speichern habe ich diesen Grafikstil als "Soil Rocks" gespeichert..
Im Hintergrund auf unsere Berge / Hügel ziehen. Beginnen Sie mit dem Zeichnen eines langen Rechtecks mit dem Rechteckwerkzeug (M). Verwenden Sie dann den Effekt> Transformieren & Verzerren> Zick-Zack-Effekt mit glatten Punkten, um eine Welle zu erstellen.
Dann Objekt> Erweitern Sie Ihre eigenständige Form.
Jetzt diese stacheligen Enden entfernen. Zeichnen Sie zwei Rechtecke (M) über ein Ende der Form, wählen Sie beide aus und erstellen Sie einen zusammengesetzten Pfad (Strg + 8)..
Verwenden Sie dann Pathfinder> Minus Front, um diese unschönen spitzen Enden zu entfernen.
Lassen Sie uns nun das Pattern-Tool verwenden, um ein schönes Wellenmuster zu erstellen. Ändern Sie zunächst die Optionen, um sicherzustellen, dass Sie an jedem Peak glatte Kurven ohne unnötige Ecken haben.
Duplizieren Sie die Wave und die Paste in Front (Strg + F) und ändern Sie dann die Farben des Weges mit den Farben Ihrer Gebirgspalette. Klicken Sie auf Fertig, wenn Sie mit dem Ergebnis zufrieden sind.
Ich habe einige Berge / Hügel im Cartoon-Stil mit dem Stiftwerkzeug (P) im Hintergrund gezeichnet. Zeichnen Sie dann einzeln und nicht als Teil einer großen Form.
Ich habe dann den folgenden Grafikstil mit den folgenden Optionen im Bedienfeld Aussehen erstellt. Der dunklere Verlauf hat einen Versatzpfad von -4pt, während der hellere Bereich, der von der Spitze der Hügel kommt, auf -10pt eingestellt ist.
Lassen Sie uns den grafischen Stil der Berge recyceln und auf den Himmel anwenden.
Wenn Sie diese Option ausgewählt haben, klicken Sie auf Recolor Artwork und klicken Sie auf die Sky Color-Gruppe neben der Seite. Klicken Sie anschließend auf OK.
Ich habe einige der Effekte und Konturen in der Form entfernt, so dass es sich nur um ein Muster und zwei lineare Gradienten handelt.
Ich werde in das Musterelement selbst einsteigen und es modifizieren, da die aktuelle Farbkombination für den Himmel zu fett ist.
Ich habe die zwei hellsten Blues in der Palette verwendet, um ein Muster aus zwei Wellen zu erzeugen.
Um es flockiger zu machen, wende ich einen Glattpunkt-Zickzack-Effekt auf die Formen mit den folgenden Einstellungen an.
Verwenden Sie dann Objekt> Erweitern für die Formen.
Wenn Sie direkt hineinzoomen, können Sie feststellen, dass wieder ein Problem mit diesen stacheligen Kanten vorliegt!
Gehen Sie diesmal jedoch mit dem Stiftwerkzeug (P) hinein und entfernen Sie einfach die unnötigen Punkte. Sie müssen nicht alle entfernen, nur diejenigen, die eine Verzerrung des Musters verursachen. Klicken Sie auf Fertig, wenn Sie mit dem Ergebnis zufrieden sind.
Im Gegensatz zu den Felsen / Böden ist dieses Muster für den Himmel zu klein. Also werde ich die Skala des Musters ändern und es um 200% erhöhen..
Ich habe dann die Farbverläufe geändert, um ein viel subtileres Muster zu erzeugen. Mit dem Himmel möchten Sie nicht, dass das Muster so hervorsticht, dass es Sie vom tatsächlichen Spiel / der Aktion ablenken kann. Wenn Sie mit dem Ergebnis zufrieden sind, erstellen Sie Ihren neuen Grafikstil und benennen Sie ihn entsprechend.
Ich möchte, dass die Hügel im Hintergrund mehr vom Vordergrund entfernt erscheinen, also füge ich dem bereits vorhandenen Grafikstil einen weiteren Verlauf hinzu. Mit dem Farbverlauf, der für den unteren Bereich des Sky-Grafikstils verwendet wird, füge ich diesen über die Striche und Füllungen des Hill-Grafikstils hinzu. Wenn Sie dies anwenden und speichern, werden Hintergrund und Vordergrund jetzt eindeutig voneinander getrennt.
Jetzt machen wir den Grafikstil für die Mystery Boxes. Zeichnen Sie zwei Rechtecke (M) auf zwei von einander und wenden Sie zwei verschiedene Farbtöne aus der Palette "Mystery Box" an.
Drehen Sie das Transformationsfeld um 45 Grad.
Lassen Sie uns ein Muster mit diesen Formen mit dem Musterwerkzeug erstellen. Ich habe eine der Formen und eine dunklere Farbe hinter den zwei ursprünglichen Rechtecken hinzugefügt, um einen dreifachen Streifeneffekt zu erzielen. Nun, da ich mit dem Muster zufrieden bin, klicken Sie auf Fertig.
Ich habe unseren Mystery Box Graphic Style fertig gestellt und Striche in einem ähnlichen Stil der Berge sowie einen leichten Gradienten hinzugefügt, der Offset Path von -4pt ist.
Die Sonne wird mithilfe von Zick-Zack-Effekten mit verschiedenen Einstellungen und Farben erstellt. Beginnen Sie mit einem geraden Kreis, der mit dem Ellipse-Werkzeug (L) erstellt wurde. Hier sind die Einstellungen des ersten Effekts.
Mit einer dunkleren Farbe, fügen Sie hinter der ersten eine neue Füllung hinzu.
Fügen Sie dann auf beiden Füllungen eine neue Füllung mit einer helleren Farbe hinzu.
Fügen Sie mit demselben Gelb einen transparenten radialen Farbverlauf unter dem hellsten Gelb mit einem Versatzpfad von 40pt hinzu. Speichern Sie dann Ihren Grafikstil und benennen Sie ihn entsprechend.
Jetzt haben wir unsere kompletten Grafikstile, ich werde sie ausreden. Ich habe eine zusätzliche Plattform hinzugefügt, um unseren Boden zu testen, und einen Grasanstrich hinzugefügt. Die Ränder des Bodens scheinen jedoch unvollständig zu sein.
Ich habe den grafischen Stil des Bodens durch Hinzufügen von zwei Strichen geändert. Dadurch kann es einem ähnlichen Stil wie der Rest unserer Szene folgen.
Wie vermutet, entsprechen unsere Mystery-Boxen nicht unserem allgemeinen Farbschema. Daher habe ich die Boxen ausgewählt und dann Recolor Artwork und die Soil Rocks-Farbgruppe verwendet.
Ich habe die Reihenfolge der Farben in der Gruppe geändert, indem Sie auf das Drilldown-Menü geklickt und Helligkeit - hell bis dunkel ausgewählt haben. Dadurch wird der dunkle Umriss und dann ein hellerer Umriss um die Form erstellt.
Verwenden Sie das Textwerkzeug (T), um ein Fragezeichen in eine der Mystery-Boxen einzufügen, und wenden Sie den Grafikstil "Soil 2" an.
Ich werde die Farben der Gesamtszene ändern, um unserem Spiel einen anderen Look zu geben, vielleicht für ein anderes Level. Dupliziere alle Elemente und gib ihnen eine eigene Ebene.
Ich werde durcharbeiten und Artwork für jedes der Elemente neu einfärben. Für den Himmel bin ich auf die Registerkarte Bearbeiten des Dialogfelds Optionen gegangen. Klicken Sie auf Harmoniefarben verbinden, um das gleiche Verhältnis zwischen den Farben zu erhalten.
Wenn Sie eine der Farben verschieben, werden alle drei Farben geändert. Ich werde der Szene einen Sonnenuntergang / Sonnenaufgang-Look verleihen, indem ich einen gedämpften rosa Himmel hinzufüge.
Ich möchte nicht, dass die Farben der Berge zu unterschiedlich sind, also werde ich einen ähnlichen Farbton wählen und die Berge in die ursprüngliche Mystery Box-Farbgruppe umwandeln.
Ich habe dann das Gras geändert, indem ich auf die Registerkarte Bearbeiten gegangen bin. Dasselbe gilt für die Mystery Boxes und Soil / Rocks. Ich habe auch die Farben der Sonne und die Position der Sonne geändert, um sie an das Farbschema für den Sonnenuntergang / Sonnenaufgang anzupassen.
Vergessen Sie nicht, Ihre neuen Grafikstile zum Panel hinzuzufügen und sie entsprechend umzubenennen. Dies erleichtert die zukünftige Verwendung.
Ich hoffe, Ihnen hat das heutige Tutorial gefallen, wie Sie einige Spielelemente erstellen können, indem Sie verschiedene Grafikstile erstellen. Wenn Sie lernen, wie Sie die Grafikstile nutzen können, können Sie viel Zeit mit Ihrem Workflow verbringen und Spieldesignern die Erstellung der gewünschten Elemente durch einfaches Anwenden eines Stils auf eine grundlegende Form erleichtern.
Accentsconagua