So erstellen Sie ein Website-Maskottchen

Ein paar Mal pro Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte von Vectortuts +. Dieses Tutorial von Scott Jackson wurde am 8. Mai 2009 erstmals veröffentlicht.

In diesem Tutorial werde ich einen Überblick darüber geben, wie sich ein Charakter von der ersten Anweisung bis zum endgültigen Maskottchen der Site entwickelt hat, und dann mehrere Posen für verschiedene Teile der Site erstellen.

Dieser Charakter wurde ursprünglich für eine Envato-Site entwickelt, die nicht abgenommen hat, und das Artwork wurde nicht verwendet. Daher habe ich dies etwas überarbeitet, um ein Vectortuts + -Charakter zu werden. Schauen wir uns den Prozess an, mit dem diese Website zu Maskottchen gemacht wird, und lernen Sie auf dem Weg zahlreiche Tipps!


1. Einleitung

Charakter und Maskottchen sind nichts Neues und schon lange nicht mehr, aber mit dem Aufkommen des Internets hat es eine Renaissance erlebt. Im Netz sehen wir uns täglich mit Informationen, Daten und Bildern konfrontiert. Die Verwendung eines Site-Maskottchens kann ein wirksames Mittel sein, um diese Informationsüberflutung zu überwinden und auf emotionaler Ebene mit dem Betrachter in Verbindung zu treten. Maskottchen und Charaktere können als Teil eines Logos oder unabhängig voneinander verwendet werden. Der Vorteil gegenüber einem Logo allein liegt jedoch darin, dass sie einen eigenen Charakter und eine ganz eigene Persönlichkeit haben.

Ich habe Adobe Illustrator verwendet, um das Maskottchen mit den grundlegendsten Werkzeugen und Funktionen zu erstellen. Aus diesem Grund werde ich mich darauf konzentrieren, die Entwicklung und den Arbeitsablauf darzustellen. Hoffentlich geben wir Ihnen einen Einblick in die Charaktererstellung und helfen Ihnen, Ihre eigenen Maskottchen zu kreieren.

Ich werde auch einige der besten Websites zum Thema Charakterdesign im Web vorstellen und einige Tipps fallen lassen.


2.Character Freebie

Für zusätzliche Inspiration und als Bonus geben die guten Leute von Vectortuts + Ihnen die Möglichkeit, die Originaldateien für Ihren eigenen Gebrauch herunterzuladen, was ein super Freebie ist. Weitere Informationen zur Verwendung finden Sie in der Download-Datei. Der Charakter ist in den Formaten AI und EPS verfügbar.


3. Der Brief

Obwohl es sich um eine fiktive Studie handelt, basierte sie ursprünglich auf einem tatsächlichen Envato-Projekt. In diesem Tutorial werde ich jedoch davon ausgehen, dass dieses Maskottchen für die Vectortuts + -Seite gedacht ist. Dies gibt uns ein Ziel, das als Beispiel dienen kann.

Das Maskottchen soll "The Tuts Guy" sein und er soll die Leserschaft von Vectortuts + und die Autoren der Tutorials repräsentieren. Eine positive, freundliche Gesinnung und Anklang an alle Altersgruppen. Professionell und doch lässig wirken. Außerdem muss er sich an das Farbschema der Site anpassen, um den Charakter problemlos in das Seitenlayout integrieren zu können.


4. Bevor ich anfange, hier sind ein paar Dinge zu beachten

Von Natur aus sind Maskottchen im Web zu verwenden. Vergessen Sie nicht, Ihre Datei auf RGB einzustellen.

Wie in The Brief erwähnt, muss der Charakter in das Farbschema der Site passen. Mit einem menschlichen Maskottchen kann dies gemacht werden, indem Kleidung und Haare verwendet werden, um den Standort zu akzentuieren. Mit einem Tier oder einer fiktiven Kreation haben Sie viel mehr Flexibilität.

Achten Sie sorgfältig auf die Zielgruppe, das Bild und die Website. Sehen wir uns noch ein paar weitere Tipps an.


5.Enteile

Soll der Charakter neben einem Logo oder Kopf eingefügt werden? Wenn dies der Fall ist, ist die Leinwand in der Regel ein breiter Streifen und die Verwendung einer hohen, aufrechten Figur kann dazu führen, dass sie verloren aussieht und die Gesichtszüge nachlassen. Was kann man dagegen tun??

Stellen Sie die Zeichenhöhe so nahe wie möglich an die Breite her.


6.Das Bild abschneiden

Durch Beschneiden des Oberkörpers und Konzentration auf die wichtigsten Merkmale können Sie wertvollen Platz sparen und die Wirkung der Maskottchen erhöhen. Sie können auch sehen, wie sich das komprimiertere Zeichen für das Format der Kopfzeile besser eignet.


7.Dynamik des Bildes oder der Schärfentiefe

Es kann für den Designer sehr hilfreich sein, die Site zusammenzustellen, wenn Sie ihm ein Maskottchen in einer flachen, seitlichen Ansicht zur Verfügung stellen, da dies die Integration in das Layout der Site erheblich vereinfacht. Alternativ kann die Schärfentiefe ein interessanteres Bild ergeben.


8.Liniengewichte und -konturen

Ich habe keine feste Regel, wenn es um Strichstärken geht oder ob ich überhaupt Stricharbeiten verwenden möchte. Wenn Sie keine Linienarbeit verwenden, kann das Maskottchen ein leichtes Gefühl haben, es kann jedoch auch im Hintergrund verloren gehen, insbesondere wenn es viel los ist. Die Verwendung von Linien und / oder einer stärkeren Kontur kann dem Bild mehr Präsenz und Definition verleihen.


9. Es ist alles in den Augen

Es gibt ein Sprichwort, dass die Augen das Fenster zur Seele sind. Bei der Charakterdesigns sind die Augen das Erste, mit dem wir uns verbinden. Wir verbinden uns, wenn wir uns einen Charakter zum ersten Mal ansehen, als wenn wir jemanden zum ersten Mal treffen. Daher ist es wichtig, dies in Ihrem Entwurf zu berücksichtigen. Die Augen können sehr schnell eine Fülle von Emotionen vermitteln und dem Charakter Leben verleihen.

Es ist leicht zu glauben, je komplexer das Rendern der Augen ist, desto besser, aber wenn man es richtig macht, können ein paar Punkte dies genauso gut tun.


10.Einstieg und meine Ideen auf Papier bringen

Obwohl ich ein Wacom-Tablet habe, verwende ich es sehr selten, um Ideen zu skizzieren. Ich entscheide mich für Bleistift, Papier und die Fähigkeit, einen chaotischen Haufen von Ideen, die sich in meinem Arbeitsbereich verbreiten, zu verstehen.

In dieser Phase versuche ich, alles und jedes auf Papier zu bringen, bevor ich es durchsehe, um zu sehen, was für mich funktioniert. Ich verfeinere dann die Roughs, bevor ich ein Layoutpad für die letzten Roughs verwende. Ich bevorzuge Layoutpads dem Pauspapier, da diese viel billiger sind und der Bleistift weniger verschmiert.


11.Zeit, um digital zu gehen

Sehr selten schicke ich Bleistiftfrösche an einen Kunden. Normalerweise gehe ich die Extrameile und baue sie zu Vektoren auf, besonders wenn es mehrere Posen mit demselben Charakter geben soll, damit sie eine klare Vorstellung vom Endergebnis haben. Dies hat dazu geführt, dass ich kaum einen Scanner verwendet habe, um die Bleistift-Roughs mit einer Digitalkamera oder sogar die Kamera meines Handys zu schnappen, die schnell und einfach über Bluetooth importiert wird.

Hier habe ich eine Reihe von Variationen für den Kunden ausgearbeitet.

Ich werde davon ausgehen, dass ich Feedback erhalten habe und wir werden uns für den Charakter Nr. 4 entscheiden, aber ich denke, es würde besser funktionieren, wenn ein Ziegenbart entfernt wurde.
Hier ist die Hauptfigur (minus Ziegenbart), die auf der Startseite der Website angezeigt werden soll, aber ich muss jetzt die Charaktere für den Rest der Website entwickeln.


12.Zurück zu den Visuals

Alle haben eine sehr ähnliche Platzierung wie die Hauptfigur, so dass die Möglichkeit besteht, Elemente des ursprünglichen Charakters erneut zu verwenden. Dies reduziert nicht nur Ihre Arbeitslast drastisch, sondern fügt der Site ein Gefühl der Kontinuität hinzu. Hier hilft es, die einzelnen Teile des Charakters auf einzelnen Ebenen zu haben, da das Bewegen der Arme und das Neigen des Kopfes die Haltung verändern können.

Die Maskottchen sollten keinen Hintergrund haben, um ihren Zweck zu verdeutlichen, aber das Anpassen der Haltung und das Hinzufügen einiger einfacher Requisiten kann dies mit dem Betrachter kommunizieren.

Die Verwendung der Originalzeichnung für die Hauptfigur in Verbindung mit einem Layout-Pad gibt mir einen kleinen Vorsprung, wenn es um die anderen Posen geht. Bei den übrigen Posen müssen diese beim Kunden eingereicht und gegebenenfalls geändert werden, bis sie damit zufrieden sind.

Unten sind die fertigen Charaktere. Alles, was Sie noch tun müssen, ist, sie dem Kunden im Format ihrer Wahl zur Verfügung zu stellen. In diesem Fall können Sie hier die Originaldateien zur eigenen Verwendung herunterladen.


13. Weitere Informationen und Inspiration

Hier sind einige meiner Lieblings-Charakterdesignseiten für weitere Inspirationen:

  • Mojizu.com - Moji ist das japanische Wort für Charakter und genau darum geht es auf dieser Seite. Es ist eine Gemeinschaft von Charakterdesignern, in der Sie sich für ein Profil anmelden und Ihre eigenen Mojis einreichen können. Ein wöchentlicher Moji-Krieg führt sie gegeneinander an, um den Moji-Champ in mehreren Runden zu finden.

  • Ilikecharacters.com - Eine recht neue Website, die das beste Charakterdesign des Künstlers Steve Rack präsentiert.

  • characterhunter - Ein Blog, das auf der Suche nach Charakterdesign auf den Straßen Tokios steht. Ein guter, wenn du magst Kawai (süß). Diese Website wurde in Französisch über japanisches Design geschrieben und zeigt, wie Maskottchen sprachliche und kulturelle Unterschiede überwinden können.

  • Smashing Magazine 40 Charakter-Illustrations-Tutorials - Ein Monster fasst 40 Design-Tutorials zusammen.

  • vinylpulse - Charakterdesign, das in die 3D-Welt übergegangen ist.

  • patchtogether - Wenn Sie jemals daran gedacht haben, Ihre Arbeit auf Vinyl zu bringen, könnte dies der richtige Ort für Sie sein.

Abonnieren Sie den Vectortuts + RSS-Feed, um mit den neuesten Vektor-Tutorials und Artikeln auf dem Laufenden zu bleiben.