05.03.2010 20:00
[Tutorials]
Icon-Tutorial
Making of Health Potion
Warum “Pixelicons“ und nicht echt 3D?
Bei einem unendlichen Inventar, wie es in Risen zu finden ist, stößt man schnell an die Grenzen der Übersichtlichkeit. Da sich bis zu hundert Objekte im Verlaufe des Spieles im Inventar sammeln, war es wichtig, dass diese Gegenstände schnell erkennbar sind und alles dadurch übersichtlicher wird.
Da es aber vorrangig in RPGs viele Gegenstände der gleichen Kategorie gibt (beispielsweise gibt es die Unterteilung bei den Waffen in Bögen und Schwerter), müssen sich diese auch entsprechend von einander abheben. Bei einer verkleinerten 3D Darstellung, bei der auch das ganze Objekt sichtbar ist, kommt es sehr schnell zu Verwechslungen. Da gleicht oft ein Bogen dem anderen.
Deshalb haben wir uns dazu entschlossen, die Gegenstände als Icons in 2D darzustellen und hierbei den Fokus auf die charakteristischen Merkmale zu legen. Das kann entweder ein einzigartiger Schwertgriff oder aber auch die unterschiedlichen Farben eines Trankes sein. Zusätzlich sollten die Icons in den einzelnen Rubriken des Inventars eindeutige Hintergrundfarben besitzen. So sind Werkzeuge z.B. in Grau gehalten, während Pflanzen vor einem grünen Hintergrund stehen.
Die Erstellung eines Icons, welches lediglich 40x40 Pixel klein ist, bringt natürlich auch Probleme mit sich. Es ist leider zu wenig Platz vorhanden, um alle wichtigen Informationen gut sichtbar unterzubringen. Und wenn ein benötigtes Icon keine wirklich auffälligen Merkmale besitzt, so muss zumindest sichergestellt sein, dass es sich anhand seiner Form und Farbe sehr schnell erkennen lässt.
Auch kann die Zeit, die man für bestimmte Icons benötigt, stark variieren. So habe ich für das simple Icon des Besens in Risen fast genau so lange benötigt wie für die ganze Kategorie der Ringe. Richtig schwer wird es aber erst bei Icons, die ziemlich abstrakt sind.
Wie z.B kann man einen "Witz" darstellen?
Grundsätzlich haben sich für Risen zwei Arbeitsweisen etabliert.
Objekte, die schon als 3D Modelle vorhanden sind, werden meistens mit einem simplen Lichtsetting abgerendert. Zu dieser Gruppe gehören vor allem die Waffen und Rüstungen. Andere Icons werden hingegen von Hand gezeichnet. Betrachtet man das Beispiel des kleinen Heiltranks, kann man vor allem die erste Methode gut veranschaulichen:
1. Als erstes überlegt man sich die Basisformen der Getränkeflaschen. Wie man auf Bild 1 gut sehen kann, unterscheiden sich diese schon in den Anfängen sehr stark und sind zudem noch in unterschiedlichen Perspektiven gerendert.
Man muss aber vor allem darauf achten, dass man nicht zu viele Details in diese Modelle steckt, da aufgrund der geringen Endgröße des Icons diese Details sowieso wieder verloren gehen.
2. Das Bild wird auf die gewünschte Größe des Icons skaliert. Alles was über den Rand hinausgeht wird später abgeschnitten.
3. Da wir in Risen ja diverse Tränke in allen Farben und Formen haben, kann man sich die Arbeit ein bisschen erleichtern und die Flaschen jeweils umfärben. Das passiert in einem 2D Programm, indem man die Farbbalance ändert. Da sich aber der Korken der Flaschen nicht mit verändern soll, wird er vorher ausgeschnitten.
4. Hier sieht man das umgefärbte Icon mit dem angepassten Korken.
Um Details besonders hervorzuheben und Elemente plastischer vor deren Hintergrund erscheinen zu lassen, empfiehlt es sich verschiedene Schattenebenen einzufügen.
5. Um die Reflexionen von Glas darzustellen und gleichzeitig das Symbol noch deutlicher vom Hintergrund abzuheben, werden einige Lichtebenen eingefügt. Außerdem sieht man in dem Bild wie die Lichtkanten nachgemalt sind.
6. Jetzt kommen noch weitere Details, wie zusätzliche Lichtebenen und Lichtkanten hinzu um das Glas noch plastischer wirken zu lassen. Gleichzeitig erreichen wir damit, dass das Icon ein wenig "glüht". Als letztes kommen noch ein paar kleine Bläschen hinzu. Damit wird deutlich, dass es sich um eine (brodelnde) Flüssigkeit handelt.
7. Nun wird das Icon noch zugeschnitten und mit einem Rahmen versehen. Fertig.
Weitere Beispiele:
8. Rum
Im Prinzip ist es auch "nur" eine Flasche, allerdings braucht diese zusätzliche Details. Das erkennt man z.B. an dem Etikett. Hier ist eine winzige Palme zu sehen. Im Idealfall wird dann dieses kleine Detail mit der Form und der Farbe der Flasche verbunden und macht sie so leichter auffindbar im Inventar.
9. Schleichen
Dies ist ein Beispiel für ein "abstrakteres" Icon. Als erstes kommt einem natürlich in den Sinn für die Darstellung zwei schleichende Füße zu zeigen. Da aber dieses Symbol schon für die Fähigkeit "Sprinten" verplant war, entschied ich mich für eine "lauschende / lauernde Figur". Diese Figur habe ich, wie die Flaschen für den Heiltrank zuerst ganz grob erstellt und abgerendert. Das Ergebnis ist zumindest ein uniques Icon, welches man der Fähigkeit jederzeit zuordnen kann.
10. Tränke brauen
Als letztes noch ein Beispiel für ein recht aufwändiges Icon, dass aus ziemlich vielen Ebenen besteht.
Ich hoffe dieses kleine Making-Of war recht aufschlussreich und hat euch gefallen!
MfG, André Thiel
Warum “Pixelicons“ und nicht echt 3D?
Bei einem unendlichen Inventar, wie es in Risen zu finden ist, stößt man schnell an die Grenzen der Übersichtlichkeit. Da sich bis zu hundert Objekte im Verlaufe des Spieles im Inventar sammeln, war es wichtig, dass diese Gegenstände schnell erkennbar sind und alles dadurch übersichtlicher wird.
Da es aber vorrangig in RPGs viele Gegenstände der gleichen Kategorie gibt (beispielsweise gibt es die Unterteilung bei den Waffen in Bögen und Schwerter), müssen sich diese auch entsprechend von einander abheben. Bei einer verkleinerten 3D Darstellung, bei der auch das ganze Objekt sichtbar ist, kommt es sehr schnell zu Verwechslungen. Da gleicht oft ein Bogen dem anderen.
Deshalb haben wir uns dazu entschlossen, die Gegenstände als Icons in 2D darzustellen und hierbei den Fokus auf die charakteristischen Merkmale zu legen. Das kann entweder ein einzigartiger Schwertgriff oder aber auch die unterschiedlichen Farben eines Trankes sein. Zusätzlich sollten die Icons in den einzelnen Rubriken des Inventars eindeutige Hintergrundfarben besitzen. So sind Werkzeuge z.B. in Grau gehalten, während Pflanzen vor einem grünen Hintergrund stehen.
Die Erstellung eines Icons, welches lediglich 40x40 Pixel klein ist, bringt natürlich auch Probleme mit sich. Es ist leider zu wenig Platz vorhanden, um alle wichtigen Informationen gut sichtbar unterzubringen. Und wenn ein benötigtes Icon keine wirklich auffälligen Merkmale besitzt, so muss zumindest sichergestellt sein, dass es sich anhand seiner Form und Farbe sehr schnell erkennen lässt.
Auch kann die Zeit, die man für bestimmte Icons benötigt, stark variieren. So habe ich für das simple Icon des Besens in Risen fast genau so lange benötigt wie für die ganze Kategorie der Ringe. Richtig schwer wird es aber erst bei Icons, die ziemlich abstrakt sind.
Wie z.B kann man einen "Witz" darstellen?
Grundsätzlich haben sich für Risen zwei Arbeitsweisen etabliert.
Objekte, die schon als 3D Modelle vorhanden sind, werden meistens mit einem simplen Lichtsetting abgerendert. Zu dieser Gruppe gehören vor allem die Waffen und Rüstungen. Andere Icons werden hingegen von Hand gezeichnet. Betrachtet man das Beispiel des kleinen Heiltranks, kann man vor allem die erste Methode gut veranschaulichen:
1. Als erstes überlegt man sich die Basisformen der Getränkeflaschen. Wie man auf Bild 1 gut sehen kann, unterscheiden sich diese schon in den Anfängen sehr stark und sind zudem noch in unterschiedlichen Perspektiven gerendert.
Man muss aber vor allem darauf achten, dass man nicht zu viele Details in diese Modelle steckt, da aufgrund der geringen Endgröße des Icons diese Details sowieso wieder verloren gehen.
2. Das Bild wird auf die gewünschte Größe des Icons skaliert. Alles was über den Rand hinausgeht wird später abgeschnitten.
3. Da wir in Risen ja diverse Tränke in allen Farben und Formen haben, kann man sich die Arbeit ein bisschen erleichtern und die Flaschen jeweils umfärben. Das passiert in einem 2D Programm, indem man die Farbbalance ändert. Da sich aber der Korken der Flaschen nicht mit verändern soll, wird er vorher ausgeschnitten.
4. Hier sieht man das umgefärbte Icon mit dem angepassten Korken.
Um Details besonders hervorzuheben und Elemente plastischer vor deren Hintergrund erscheinen zu lassen, empfiehlt es sich verschiedene Schattenebenen einzufügen.
5. Um die Reflexionen von Glas darzustellen und gleichzeitig das Symbol noch deutlicher vom Hintergrund abzuheben, werden einige Lichtebenen eingefügt. Außerdem sieht man in dem Bild wie die Lichtkanten nachgemalt sind.
6. Jetzt kommen noch weitere Details, wie zusätzliche Lichtebenen und Lichtkanten hinzu um das Glas noch plastischer wirken zu lassen. Gleichzeitig erreichen wir damit, dass das Icon ein wenig "glüht". Als letztes kommen noch ein paar kleine Bläschen hinzu. Damit wird deutlich, dass es sich um eine (brodelnde) Flüssigkeit handelt.
7. Nun wird das Icon noch zugeschnitten und mit einem Rahmen versehen. Fertig.
Weitere Beispiele:
8. Rum
Im Prinzip ist es auch "nur" eine Flasche, allerdings braucht diese zusätzliche Details. Das erkennt man z.B. an dem Etikett. Hier ist eine winzige Palme zu sehen. Im Idealfall wird dann dieses kleine Detail mit der Form und der Farbe der Flasche verbunden und macht sie so leichter auffindbar im Inventar.
9. Schleichen
Dies ist ein Beispiel für ein "abstrakteres" Icon. Als erstes kommt einem natürlich in den Sinn für die Darstellung zwei schleichende Füße zu zeigen. Da aber dieses Symbol schon für die Fähigkeit "Sprinten" verplant war, entschied ich mich für eine "lauschende / lauernde Figur". Diese Figur habe ich, wie die Flaschen für den Heiltrank zuerst ganz grob erstellt und abgerendert. Das Ergebnis ist zumindest ein uniques Icon, welches man der Fähigkeit jederzeit zuordnen kann.
10. Tränke brauen
Als letztes noch ein Beispiel für ein recht aufwändiges Icon, dass aus ziemlich vielen Ebenen besteht.
Ich hoffe dieses kleine Making-Of war recht aufschlussreich und hat euch gefallen!
MfG, André Thiel