Share
Im heutigen Tutorial werde ich Ihnen zeigen, wie Sie eine Benutzeroberfläche für ein Smartphone-Quizspiel in Adobe Illustrator CS6 erstellen. Ich werde eine Benutzeroberfläche erstellen, die einer öffentlichen Kreidetafel ähnelt, und mit dem Pattern-Tool ein Holzmuster erstellen, um einen Holzrahmen hinzuzufügen. Dieses Tutorial ist der erste Teil eines Tuts + cross over, in dem Sie erfahren, wie Sie das Spiel auf Mobiletuts erstellen können+.
Bevor ich mit der Erstellung der Benutzeroberfläche begann, musste ich wissen, welche Elemente vom Game-Designer benötigt werden, um das zu erstellen, wonach sie gesucht haben. Ich war in einer knappen Frist, also habe ich vorherige Kommunikations- und Konzeptbilder verwendet, um zu helfen.
Das erste Konzeptbild wurde vom Spieledesigner erstellt. Er gab an, dass er ein Hintergrundbild, Schaltflächen, einen Bereich für ein Banner / Header, einen Bereich für eine Frage und Variationen des Textes für die Beantwortung der Fragen richtig / falsch haben wollte.
Ich wurde dann von einem anderen Designer, der zuvor ein Kreidetafel-Thema für das Quiz vereinbart hatte, nachgespielt und vom Game-Designer genehmigt.
Also genug Geschwätz, lass uns weitermachen, wir müssen eine Frist einhalten! Da mir keine spezifischen Abmessungen für die Benutzeroberfläche gegeben wurden, habe ich mich für ein RGB-Bild (600 x 800 Pixel, Ausrichten an Pixelraster, Neues Dokument) entschieden. Da es sich dabei um einen Vektor handelt, ist es einfach, die Abmessungen später zu ändern, wenn der Kunde zu mir kommt. Lassen Sie uns bis dahin an unserem Design arbeiten und den Großteil der Arbeit aus dem Weg räumen.
Lassen Sie uns mit den Informationen, die wir erhalten haben, ein Modell mit einer Reihe schwarzer Konturen erstellen, die mit dem Rechteckwerkzeug (M) weiße Füllungsformen erzeugen. Ich weiß, ich möchte einen Holzrahmen, einen Hintergrund, einen Bereich für das Kopfbild und Fragen. Es gibt auch die Möglichkeit, dass der Designer ein Popup- und ein Start-Symbol haben möchte. Ich habe mich entschieden, in Richtung einer Kreidetafel im Stil eines öffentlichen Hauses zu gehen, anstatt einer im Stil einer Schule. Der Unterschied ist, dass die Version des öffentlichen Hauses ein bisschen schmutziger und traditioneller aussieht.
Ich beginne mit den meisten statischen Elementen, deren Chancen während des Spiels nicht verändert werden. Bereiche wie Text und Schaltflächen ändern sich, Rahmen, Kopfzeile und Hintergrund jedoch nicht. Also fange ich mit dem Holzrahmen an. Zeichnen Sie ein langes Rechteck (M) mit mittlerer brauner Füllung, und öffnen Sie dann Objekt> Muster> Erstellen, um das Dialogfeld Musteroptionen zu öffnen. Ich habe die Breite und Höhe des Musters nicht geändert, da ich direkt über dem bereits definierten Bereich zeichnen werde.
Wir streben ein organisch aussehendes Holzmuster mit unterschiedlichen Stärken im Korn an. Eines meiner Lieblingswerkzeuge hierfür ist das Blob-Pinsel-Werkzeug (Umschalt + B) mit einem Grafiktablett. Beginnen Sie damit, einen Knoten im Holz zu zeichnen, indem Sie einen Wirbel zeichnen, und dann den Wirbel über den Bereich des Musters ausdehnen. Dieses überlappende Ende wird dann am unteren Rand Ihres Musterbereichs angezeigt.
Verwenden Sie dieses Ende, um sich um Ihren ursprünglichen Knoten zu krümmen. Ich habe dann den Kacheltyp in Ziegelstein für Spalte geändert, sodass der Knoten zueinander versetzt ist.
Zeichnen Sie mit einer ähnlichen Methode zum Überlappen der Maserung über die Mustergrenze hinaus weitere Linien in derselben Farbe. Fügen Sie eine Linie hinzu, die sich an der Seite der Mustergrenze überlappt, sodass sie horizontal mit den anderen Kacheln verknüpft wird.
Sobald Sie zufrieden sind, fügen Sie eine hellere Farbe für weitere Details hinzu. Wenn Sie mit Ihrem Muster fertig sind, klicken Sie auf Fertig und es wird automatisch in Ihrem Farbfeldbedienfeld gespeichert.
Zeichnen Sie ein 600 x 800-Rechteck (M) über die Zeichenfläche. Wenn Sie Smart Guides aktiviert haben (Strg + U), können Sie alles in diesem Tutorial leichter erstellen, da Elemente effektiv einrasten. Da wir nicht über die Zeichenfläche hinausgehen möchten, geben Sie dem Rechteck ein Strichgewicht von 45pt, das auf Ausrichten des Strichs nach innen eingestellt ist.
Gehen Sie nach Auswahl zu Objekt> Erweitern, um den Strich in eine gefüllte Form zu konvertieren.
Zeichnen Sie mit dem Liniensegment-Werkzeug (\) diagonale Linien in einem Winkel von 45 Grad über die Ecken des Rahmens. Wählen Sie Alle (Strg + A) der Komponenten aus und verwenden Sie Pathfinder> Divide, um die Form in vier Teile zu teilen.
Wenden Sie Ihr Holzmuster auf den Rahmen an. Wenn ich es angewendet habe, war es zu groß, um alle Details aufzugreifen. Um dies zu korrigieren, habe ich nur den Maßstab des Musters reduziert, indem Sie zu Objekt> Transformieren> Skalieren und nur das Transformationsmuster anhaken. Dadurch wird der Maßstab des Musters verringert, nicht das Objekt.
Ich werde jetzt im Appearance-Panel arbeiten, um den Formen des Rahmens einen subtilen Rahmen zu geben. Mit den dunklen und hellen Farben des Holzmusters habe ich zwei Füllungen unterhalb der Holzmusterfüllung hinzugefügt. Der erste ist der dunkle, der zweite ist der hellere und dies ist Versatzpfad um -2pt. Ich habe dann die Musterfüllung auf einen Versatzpfad von -4pt eingestellt.
Der Grund, warum ich dies getan habe, ist, wenn Sie die Konturen mit einem Strich versehen möchten. Die Formecken können Punkte im Strich erzeugen, die aus dem Bereich des Rahmens herausragen. Ich möchte, dass dies alles in der Zeichenfläche enthalten ist, wenn Sie sich erinnern, und anstatt mit Gehrungen zu fummeln und die Winkel der Ecken anzupassen, habe ich mich entschieden, einen "falschen" Strich zu erzeugen, indem Sie Versatzpfade verwenden. Dies ist ein praktischer Tipp, wenn Sie mit hartnäckigen Ecken arbeiten, die nicht fair spielen, oder wenn Sie einen "gefälschten" Farbverlauf auf einen Strich anwenden möchten, ohne Adobe Illustrator CS6 zu verwenden.
Ich wette, Sie dachten, ich würde den oberen und den unteren Bereich des Rahmens mit der gleichen Musterausrichtung verlassen, oder? Da Sie das Muster skalieren können, ohne die Form zu ändern, können Sie ein Muster auch drehen, ohne die Form zu drehen. Wählen Sie die Formen aus, deren Füllung Sie ändern möchten, und wechseln Sie zu Objekt> Transformieren> Drehen. Ich habe in einem 90-Grad-Winkel eingegeben und dann nur Transformationsmuster angekreuzt.
Wählen Sie im Bereich "Darstellung" die Seitenrahmen und das Element "Duplizieren" für die Musterfüllung aus. Dadurch werden die Versatzpfadwerte beibehalten. Füllen Sie dann einen braunen transparenten linearen Farbverlauf auf. Machen Sie dasselbe für den oberen und unteren Rand des Rahmens und ändern Sie einfach den Neigungswinkel auf 90 Grad.
Fügen Sie im Grafikstilbedienfeld den oberen und den unteren Rahmen hinzu, während Sie den neuen Grafikstil hinzufügen. Wenden Sie diese dann auf die Form an, die für die Kopfzeile / das Banner der Benutzeroberfläche verwendet wird. Ändern Sie die Farbverlaufsfüllung dann in einen radialen Farbverlauf.
Ich werde jetzt den Kreidebretthintergrund erstellen, indem ich das Erscheinungsbildbedienfeld und eine Vektorversion von 100% eines inneren Glühens verwende. Wie das geht, erfahren Sie im folgenden Video-Tutorial.
Klicken Sie im Pinselbedienfeld auf das Drilldown-Menü und wählen Sie „Bürstenbibliothek öffnen“> „Künstlerisch“> „Künstlerisch“ „Zeichnen“ und verwenden Sie den Pinsel „Kreide“, um weiße Striche über die gesamte Tafel zu ziehen. Wenn Sie fertig sind, gruppieren Sie sie zusammen (Strg + G)..
Kopieren Sie den Kreidebretthintergrund und verwenden Sie diesen in der Gruppe Kreidestriche, um eine Schnittmaske zu erstellen (Strg + 7)..
Ich werde eine Freeware-Schriftart für die Fragen und Antworten auf der Tafel verwenden. Verwenden Sie das Textwerkzeug (T), um Ihren Text hinzuzufügen. Ich habe "Film Cryptic" in der Schriftgröße 48pt verwendet.
Ich habe weitere Elemente hinzugefügt, z. B. eine Box um die Antworten, ein Häkchen und eine Linie mit einer Antwort, die den Holzkohle-Bleistift-Pinsel verwendet. Für das untere Feld habe ich die Deckkraft auf 30% gesetzt.
Fügen Sie nun einen subtilen Schlagschatten unter der Kopf- / Banner-Tafel hinzu. Zeichnen Sie mit dem Liniensegment-Werkzeug (\) eine horizontale Linie über die Unterseite der Tafel und duplizieren Sie sie. Stellen Sie den unteren Strich auf Strichgewicht 18pt und Deckkraft auf 0% und den oberen Strich auf 1pt, 100%. Beide Striche sollten Profile: Width Profile 1 verwenden und eine schwarze Strichfarbe haben.
Wählen Sie beide Striche aus und erstellen Sie eine Mischung (Strg + Alt + B). Gehen Sie dann zu Objekt> Überblenden> Überblendoptionen und ändern Sie den Abstand in Angegebene Schritte und den Wert auf 10. Klicken Sie auf OK, wenn Sie fertig sind. Ändern Sie dann den Mischmodus der Mischung auf Multiplizieren und verschieben Sie sie an ihren Platz.
Duplizieren Sie es und platzieren Sie es unter der Oberseite der Header- / Banner-Platine.
Ich werde ein paar kleine Nieten an den Seiten der Platine hinzufügen, die mit dem Rahmen verbunden sind. Dies ist wieder die Verwendung des Bedienfelds Aussehen mit den Einstellungen unten in einem geraden Kreis mit dem Ellipse-Werkzeug (L)..
Fügen Sie einen Einzug in den Niet ein, indem Sie eine diagonale Linie über den Bolzen ziehen und den Blending-Modus auf Multiplizieren setzen. Niete und Einzug zusammenfassen (Strg + G), dreimal duplizieren und an Ort und Stelle verschieben. Um sicherzustellen, dass alles parallel und ausgerichtet ist, verwenden Sie das Bedienfeld Ausrichten.
Unser Game Designer hat Kontakt aufgenommen! Oh nein, wir haben die falschen Dimensionen für unser Spiel und es ist nicht das gleiche Verhältnis. Die angegebenen Abmessungen betragen 480 x 800 Pixel. Dies ist keine große Sache, weil wir in Vector arbeiten und es leicht zu beheben ist. Zuerst müssen Sie die Größe des Artboards auf die neue Größe ändern und dann mit dem Rechteckwerkzeug (M) von 480 x 800 ein Führungsrechteck zeichnen.
Duplizieren Sie die Seiten des Rahmens und erstellen Sie einen zusammengesetzten Pfad (Strg + 8). Verwenden Sie dann diese Form für Pathfinder> Vom oberen und unteren Rahmen trennen und überschüssige Formen löschen.
Bringen Sie Ihre Seitenelemente an den richtigen Platz, damit Ihnen Smart Guides (Strg + U) helfen können.
Fügen Sie für die Kopfleiste die Attribute des Bedienfelds „Erscheinungsbild“ zum Bedienfeld „Grafikstile“ hinzu und wenden Sie sie dann auf eine neue Form an. Der Kreidebretthintergrund kann mit dem Free Transform Tool (E) in der Größe verändert werden. Denken Sie jedoch daran, auch die Gruppe der Schnittmasken mit den Strichen für Kreide zu ändern. Ich habe die Schriftgröße entsprechend verringert, um die neue Breite zu kompensieren. Diese Dimensionsänderung dauerte fünf Minuten, einschließlich der Überprüfung der Vorschau, um sicherzustellen, dass ich die richtigen Abmessungen habe.
Fahren wir mit dem Header / Banner fort. Ich werde im Public House-Stil spielen und dem Design eine Messingplatte hinzufügen. Zeichnen Sie ein Rechteck (M), dessen Ecken auf die Mitte der Nieten treffen. Dann zeichnen Sie einen geraden Kreis (L) auf eine der Nietenmitten und duplizieren / platzieren Sie die anderen Nieten. Verwenden Sie Pathfinder> Minus Front, um die Form Ihrer Messingplatte zu erstellen.
Wenden Sie den Grafikstil für die Schrauben auf die Platte und anschließend „Neue Füllung hinzufügen“ an, und verwenden Sie einen linearen Farbverlauf mit verschiedenen Grautönen. Es spielt keine Rolle, wo Sie die Schieberegler für diesen Farbverlauf platzieren, solange Sie den Kontrast anzeigen von Highlights und Schatten im Farbverlauf.
Ich habe dann die Attribute geändert, um einen Messing / Golden-Ton durchzumachen.
Ich war mit den Farben der Nieten nicht zufrieden, also habe ich die Farben der Nieten mit den gleichen Farben wie die Messingplatte geändert. Jetzt passen sie besser zusammen.
Zum Schluss füge ich noch den Kopfzeilentext hinzu. Der Spieledesigner möchte den Titel "Android Game" im Bannertitel, daher füge ich dem Text einen schnellen Gravureffekt hinzu ... und das ist so einfach. Zuerst fügen Sie Ihren Text hinzu, ich habe die "Engravers MT" verwendet und auf Blending Mode Multiply gesetzt. Geben Sie ihm dieselbe Messingfarbe wie in der Platte. Duplizieren Sie den Text und verschieben Sie den Text mit den Pfeiltasten auf der Tastatur um zwei Stellen nach unten und zwei Stellen nach rechts. Ändern Sie dann den Mischmodus auf Bildschirm.
Sie haben jetzt Ihre Kreidebrett-Benutzeroberfläche im Stil eines öffentlichen Hauses für ein Smartphone-Spiel erstellt! Es ist jetzt zu Mobiletuts + für den zweiten Teil dieses Tutorials, wie man das eigentliche Spiel erstellt. Sie können die erforderlichen Grafiken herunterladen, um das Spiel selbst dort zu erstellen. Habe Spaß!
Accentsconagua