German (Deutsch) translation by Valentina (you can also view the original English article)
Im heutigen Tutorial werde ich Ihnen zeigen, wie Sie eine Vielzahl von Grafikstilen in Adobe Illustrator CS6 vorbereiten und erstellen, um sie dann in einem Spiel zu verwenden. Die Verwendung von Grafikstilen bietet den Vorteil, dass Sie sie anschließend auf eine Vielzahl von Formen anwenden können, ohne jedes Erscheinungsbild neu erstellen zu müssen. Also lasst uns in dieses lustige Tutorial springen!
Schritt 1
Ich werde Adobe Illustrator CS5 für meine ersten Teile dieses Tutorials 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 der Erstellung eines neuen Dokuments im Farbmodus RGB.
Schritt 2
Ich werde etwas Neues für mich ausprobieren und das ist eine andere Art, eine Farbpalette vorzubereiten. Ich habe diesen Tipp aus Tutorials von Beto Garza erhalten, von denen er mehrere hier auf Vectortuts + hat. Zeichnen Sie zunächst zwei voneinander beabstandete Formen und erstellen Sie daraus eine bestimmte Mischung aus 3 Schritten (Strg + Alt + B). Ändern Sie Ihre Start- und Endfarbe, um eine schöne, allmähliche Änderung der Farbe zu erhalten. Dies sind die Grundlagen für die Erstellung einer Farbpalette.
Mischen Sie es und versuchen Sie, eine Farbe aus dem Standardfeld „Farbfelder“ auszuwählen. Gehen Sie dann jedoch in das Bedienfeld „Farbführung“ und wählen Sie dort eine Farbe aus. Dies kann Ihnen eine andere Vielfalt von Farben geben, mit denen Sie spielen können.
Schritt 3
Bevor ich mit der Vorbereitung meiner Paletten fortfahre, muss ich wissen, welche Farbsätze ich für die Vielzahl der Elemente benötige, die ich erstellen werde. Beginnen Sie also mit einer grundlegenden Skizze einer Spielszene. Hier habe ich sechs potenzielle 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.
Schritt 4
Wenn Sie mit Ihren Paletten zufrieden sind, klicken Sie auf Objekt > Erweitern, damit die Mischung entfernt wird und Sie für jedes Element fünf Farben übrig haben. Wählen Sie jede Farbgruppe einzeln aus und klicken Sie unten im Farbfeldbedienfeld auf Neue Farbgruppe. Dadurch werden die Farben dieser Gruppe in einen eigenen Palettenordner eingefügt. Sie können dann auf den Palettenordner doppelklicken und ihn Soil/Rocks, Grass usw. nennen, um später leichter darauf verweisen zu können.
Schritt 5
Element für Element zeige ich Ihnen, wie Sie jeden Grafikstil erstellen. Wir werden auf dem "Gras" beginnen. Zeichnen Sie zunächst mit dem Stiftwerkzeug (P) oder dem Bogenwerkzeug eine gekrümmte Linie. Geben Sie ihm eine schwarze Strichfarbe und wenden Sie dann ein 4-Punkt-Strichgewicht an. Fügen Sie im Strichbedienfeld das Profil: Breite Profil 1 hinzu.
Wählen Sie im Pinselbedienfeld bei Auswahl die Option Neuen Pinsel hinzufügen > Streupinsel und verwenden Sie die folgenden Optionen. Ändern Sie die Kolorierungsmethode in Farbtöne und klicken Sie auf OK.
Schritt 6
Zeichnen Sie eine Linie mit dem Liniensegment-Werkzeug (\) auf der Zeichenfläche. Im Bedienfeld „Darstellung“ möchten Sie neun Striche hinzufügen, wobei das hellste Grün oben und das dunkelste unten angezeigt werden. Tragen Sie Ihren Graspinsel auf jeden der Striche auf und dann von oben nach unten die folgenden Strichgewichte: 0.5, 0.75, 0.75, 1.0, 1.25, 1.25, 1.5, 1.5, 1.75pt.
Wenn Sie fertig sind, klicken Sie im Bedienfeld „Grafikstile“ auf „Neuer Grafikstil“, um ihn dem Bedienfeld hinzuzufügen. Doppelklicken Sie auf das Symbol, das es erstellt, und benennen Sie es in ein unvergesslicheres Symbol um.
Schritt 7
Jetzt haben wir unser erstes Element. Ich werde mein Layers-Bedienfeld so einrichten, dass für jedes Element ein Layer vorhanden ist.
Ich habe dann Grundformen für jedes Element unter Verwendung der Farben aus meinen benutzerdefinierten Paletten hinzugefügt. Ich kann von hier aus sehen, ob die Farben gut zusammenarbeiten. Im Moment bin ich mir des Pink nicht sicher, aber ich werde das später ändern, wenn ich eine bessere Vorstellung davon habe, wie die Elemente zusammenarbeiten.
Schritt 8
Weiter geht es mit der Erstellung unserer Böden/Felsen. In diesem Stil verdient Adobe Illustrator CS6 aufgrund des wunderbaren Musterwerkzeugs seinen Preis. Wir beginnen mit dem Zeichnen mehrerer Formen mit dem abgerundeten Rechteck-Werkzeug. Ich habe ein 4-Punkt-Strichgewicht hinzugefügt und mittlere Farben aus dieser Farbgruppe für Füllung und Strich verwendet.
Wählen Sie nach dem Erstellen alle Formen aus, gehen Sie zu Effekte > Transformieren & 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 die eigenständigen Formen zu erhalten.
Schritt 9
Wählen Sie Ihre Formen aus und gehen Sie zu Objekt > Muster > Erstellen, um die Musteroptionen zu verwenden.
Bewegen Sie Ihre Formen mit dem Auswahlwerkzeug (V) an ihren Platz, drehen Sie sie bei Bedarf und ändern Sie dann Ihre Musteroptionen, um das gewünschte Muster zu erhalten. Das Ziel, die Steine in eine Formation zu bringen, würde so wenig Lücken wie möglich zulassen, aber auch, damit sich die Formen nicht berühren. Wir sind noch nicht ganz fertig mit der Erstellung dieses Musters...
Schritt 10
Fügen Sie mit dem Stiftwerkzeug (P) den Felsen Schattierungen hinzu. Jetzt werden die Adleraugen als erste sagen: "Wie kann es Schatten auf Felsen geben, weil sie alle unter der Erde sind?" Meine Antwort lautet... "Künstlerische Lizenz, mein Party-Pooper-Freund!". Durch Hinzufügen von Schattierungen wird eine rockigere Textur erzeugt. Fügen Sie also zuerst eine Ihrer helleren Farben zu den Felsen hinzu und denken Sie daran, unregelmäßige Formen zu zeichnen.
Verwenden Sie dann wieder eine hellere Farbe und fügen Sie den Felsen weitere Glanzlichter hinzu. Wenn Sie mit Ihrem Muster zufrieden sind, klicken Sie auf "Fertig". Das neue Muster wird dem Farbfeldbedienfeld hinzugefügt und ist sofort einsatzbereit.
Schritt 11
Als ich das Muster auf den Bodenbereich des Spiels auftrug, war das Muster zu groß. Gehen Sie also bei Auswahl der Form zu Objekt > Transformieren > Skalieren und reduzieren Sie die Skalierung des Musters nur um 50%.
Dann habe ich unter Verwendung der Farben nur aus der von uns erstellten Mischpalette einen Grafikstil mit einem transparenten linearen Gradient von oben und einem mittelhellen braunen Körper hinter dem Muster erstellt. Sobald ich fertig bin, habe ich diesen Grafikstil als "Soil Rocks" gespeichert.
Schritt 12
Bewegen Sie sich auf unsere Berge/Hügel im Hintergrund. Zeichnen Sie zunächst mit dem Rechteck-Werkzeug (M) ein langes Rechteck. Verwenden Sie dann den Effekt > Transformieren & Verzerren > Zick-Zack-Effekt mit glatten Punkten, um eine Welle zu erstellen.
Dann Objekt > Zu Ihrer eigenständigen Form erweitern.
Schritt 13
Nun entfernen Sie diese stacheligen Enden. Zeichnen Sie zwei Rechtecke (M) über jedes Ende der Form, wählen Sie beide aus und erstellen Sie einen zusammengesetzten Pfad (Strg + 8).
Verwenden Sie dann Pathfinder > Minus Front, um diese hässlichen, stacheligen Enden zu entfernen.
Schritt 14
Lassen Sie uns nun das Muster-Werkzeug verwenden, um ein schönes Wellenmuster zu erstellen. Ändern Sie zuerst die Optionen, um sicherzustellen, dass Sie auf jedem Peak glatte Kurven ohne unnötige Ecken haben.
Dupliziere die Welle und füge sie vorne ein (Strg + F) und ändere dann die Farben des Weges mit den Farben aus deiner Bergpalette. Klicken Sie auf Fertig, wenn Sie mit dem Ergebnis zufrieden sind.
Schritt 15
Ich habe mit dem Stift-Werkzeug (P) einige Berge/Hügel im Cartoon-Stil 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 des Darstellungsfensters erstellt. Der dunklere Gradient hat einen Versatzpfad von -4pt, während der hellere, der von der Spitze der Hügel kommt, auf -10pt eingestellt ist.
Schritt 16
Lassen Sie uns den Grafikstil der Berge recyceln und auf den Himmel anwenden.
Gehen Sie bei Auswahl in Recolor Artwork und klicken Sie auf die Sky Color Group an der Seite und dann auf OK.
Schritt 17
Ich habe einige der Effekte und Striche in der Form entfernt, sodass es sich nur um ein Muster und zwei lineare Gradienten handelt.
Schritt 18
Ich werde in das Musterelement selbst gehen und es ändern, da die aktuelle Farbkombination für den Himmel etwas zu fett ist.
Ich habe die zwei hellsten Blautöne in der Palette verwendet, um ein Muster aus zwei Wellen zu erstellen.
Schritt 19
Um es viel flauschiger zu machen, werde ich einen Smooth Point Zig Zag-Effekt auf die Formen mit den folgenden Einstellungen anwenden.
Verwenden Sie dann Objekt > Erweitern für die Formen.
Schritt 20
Wenn Sie direkt hineinzoomen, können Sie sehen, dass wir wieder ein Problem mit diesen stacheligen Kanten haben!
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.
Schritt 21
Im Gegensatz zu den Felsen/dem Boden ist dieses Muster für den Himmel zu klein. Also werde ich die Skalierung des Musters ändern und um 200% erhöhen.
Ich habe dann die Gradienten geändert, um ein viel subtileres Muster zu erstellen. Mit dem Himmel möchten Sie nicht, dass das Muster so stark hervorsticht, dass es Sie vom eigentlichen Spiel/der eigentlichen Aktion ablenkt. Wenn Sie mit dem Ergebnis zufrieden sind, erstellen Sie Ihren neuen Grafikstil und benennen Sie ihn entsprechend.
Schritt 22
Ich möchte, dass die Hügel im Hintergrund mehr vom Vordergrund getrennt erscheinen, daher werde ich dem bereits vorhandenen Grafikstil einen weiteren Gradient hinzufügen. Unter Verwendung des Gradients, der für den unteren Rand des Sky-Grafikstils verwendet wird, füge ich diesen über den Strichen und Füllungen des Hill-Grafikstils hinzu. Wenn dies angewendet und gespeichert wird, werden Hintergrund und Vordergrund jetzt definitiv getrennt.
Schritt 23
Lassen Sie uns nun den Grafikstil für die Mystery Boxes erstellen. Zeichnen Sie zwei Rechtecke (M) aufeinander und wenden Sie zwei verschiedene Farbtöne aus der Mystery Box-Palette an.
Drehen Sie im Bedienfeld „Transformieren“ um 45 Grad.
Schritt 24
Lassen Sie uns mit dem Musterwerkzeug ein Muster mit diesen Formen erstellen. Ich habe eine der Formen und eine dunklere Farbe hinter den beiden ursprünglichen Rechtecken hinzugefügt, um einen dreifachen Streifeneffekt zu erzielen. Nachdem ich mit dem Muster zufrieden bin, klicken Sie auf Fertig.
Schritt 25
Zum Abschluss unseres Mystery Box-Grafikstils habe ich Striche in einem ähnlichen Stil der Berge sowie einen Lichtgradienten hinzugefügt, der um -4pt versetzt ist.
Schritt 26
Die Sonne wird mithilfe von Zick-Zack-Effekten mit unterschiedlichen Einstellungen und Farben erzeugt. Beginnen Sie mit einem geraden Kreis, der mit dem Ellipsen-Werkzeug (L) erstellt wurde. Unten finden Sie die Einstellungen des ersten Effekts.
Mit einer dunkleren Farbe Neue Füllung hinter der ersten hinzufügen.
Fügen Sie dann über beiden Füllungen eine neue Füllung mit einer helleren Farbe hinzu.
Schritt 27
Fügen Sie mit demselben Gelb einen transparenten radialen Gradient unterhalb des hellsten Gelbs mit einem Versatzpfad von 40pt hinzu. Speichern Sie dann Ihren Grafikstil und Namen entsprechend.
Schritt 28
Jetzt haben wir unsere kompletten Grafikstile, ich werde sie erzählen. Ich habe eine zusätzliche Plattform hinzugefügt, um unseren Boden zu testen, und einen Strich Gras 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 folgen wie der Rest unserer Szene.
Schritt 29
Wie vermutet, stimmen unsere Mystery Boxes nicht mit unserem Gesamtfarbschema überein. Daher habe ich die Boxen ausgewählt und dann Recolor Artwork und die Soil Rocks Color Group verwendet.
Ich habe die Reihenfolge der Farben in der Gruppe geändert, indem ich auf das Drilldown-Menü geklickt und Helligkeit - Hell bis Dunkel ausgewählt habe. Dadurch wird der dunkle Umriss und dann ein hellerer Umriss um die Form erstellt.
Schritt 30
Verwenden Sie das Textwerkzeug (T), um einem der Mystery-Felder ein Fragezeichen hinzuzufügen und den Grafikstil "Boden 2" anzuwenden.
Schritt 31
Ich werde die Farben der Gesamtszene ändern, um unserem Spiel ein anderes Aussehen zu verleihen, vielleicht für eine andere Ebene. Duplizieren Sie alle Elemente und geben Sie ihnen ein eigenes Layer.
Schritt 32
Ich werde jedes der Elemente durcharbeiten und die Kunstwerke neu einfärben. Für den Himmel habe ich die Registerkarte Bearbeiten des Dialogfelds Optionen aufgerufen. Klicken Sie auf Harmoniefarben verknüpfen, um das gleiche Verhältnis zwischen den Farben beizubehalten.
Wenn Sie eine der Farben verschieben, werden alle drei geändert. Ich werde der Szene ein Sonnenuntergang/Sonnenaufgang-Aussehen verleihen, indem ich einen gedämpften rosa Himmel hinzufüge.
Schritt 33
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 ändern.
Ich habe dann das Gras geändert, indem ich auf die Registerkarte Bearbeiten gegangen bin. Gleiches gilt für die Mystery Boxes und Soil/Rocks. Ich habe auch die Farben der Sonne geändert und die Position geändert, um sie an das Farbschema für Sonnenuntergang/Sonnenaufgang anzupassen.
Schritt 34
Wenn Sie fertig sind, denken Sie daran, Ihre neuen Grafikstile zum Bedienfeld hinzuzufügen und sie entsprechend umzubenennen. Dies wird die Verwendung in Zukunft erheblich vereinfachen.
Abschluss
Ich hoffe, Ihnen hat das heutige Tutorial zum Erstellen einiger Spielelemente durch Erstellen einer Vielzahl von Grafikstilen gefallen. Wenn Sie lernen, wie Sie Grafikstile nutzen können, können Sie viel Zeit in Ihrem Arbeitsablauf sparen und es Spieledesignern viel einfacher machen, die gewünschten Elemente zu erstellen, indem Sie einfach einen Stil auf eine Grundform anwenden.
By
