Loading images...

Technik-Zeugs

Eridani goes Mobile

Ach ja, diese Usability – wenn man mal damit anfängt …

 

Ich habe ja zwei Kolleginnen in der Firma, die sich beide mit Usability-Themen beschäftigen. Der einen habe ich die Anmerkungen zur Navigierbarkeit zwischen den Kapiteln zu verdanken, wie schon berichtet. Mit der anderen habe ich über das Projekt geplaudert, und sie hat die Site ihrem Mann gezeigt (der wohl auch SciFi-Fan ist). Das Feedback war: ja, er hat versucht, das auf seinem Smartphone zu lesen, aber er kam nicht so recht klar, weil die Darstellung nicht auf mobile devices optimiert ist.

Nach meiner ersten Empörung (den Comic auf dem Smartphone angucken? Dafuq?!?) und altersbedingten Abwehrreaktion (also Sowas hat’s früher nicht gegeben!) hab ich mich eingekriegt, angefangen zu recherchieren, und festgestellt, dass es dank entsprechender Plugins garnicht soo schwer ist, eine WordPress-basierte Site mobile-tauglich zu machen.

Und so habe ich nach einigen Tüfteln eine Site online, die hoffentlich kompatibel zu möglichst vielen mobilen Endgeräten ist.

mobile

Meine Bitte an Euch da draußen: könnt Ihr eridani-projekt.de Euch mal mit Eurem Smartphone/Tablet aufrufen und mir ein kurzes Feedback darüber geben, wo und mit welchem Gerät die Darstellung bzw. Navigation noch Probleme macht? Danke!

Facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=322550901209505"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Eine Frage der Usability

Als altgedienter Informatiker habe ich bei Software natürlich in erster Linie immer an die Funktionalität geachtet; bei der Website ist das Design dazugekommen. Woran ich chronisch zu wenig Aufmerksamkeit (jetzt wollte ich schreiben: verschwende, aber das ist genau das Problem; ups, freudscher Versprecher) – also, was ich immer vernachlässige, ist die Usability, also die Bedienbarkeit von Software (bzw. in unserem Fall: der Website).

 

Zum Glück gibt’s bei uns in der Firma 2 Usability-Expertinnen, und der einen hab ich neulich mal die Website gezeigt. Abgesehen davon, dass sie das alles etwas befremdlich, aber ganz lustig findet, hatte sie ein paar handfeste Tipps, um die Site logischer und bedienbarer zu machen (an dieser Stelle: Danke Sabine!!).  

Usability  

Einer davon (auf den ich nie selbst gekommen wäre): Navigationsbuttons am Kapitelende. Da hat man bis ganz runtergescrollt, und würde gern weiterlesen, aber muß erst wieder ganz nach oben und in die Kapitelauswahl. Ist etwas umständlich, und Umständlichkeit ist der Erzfeind der Usability. OK, Das hab ich umgesetzt, aber 2 andere Tipps von ihr bisher nicht – ich sag aber nicht, welche.

 

Man muß es ja auch nicht übertreiben mit der Benutzerfreundlichkeit.  

Facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=322550901209505"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

3, 2, 1 – Aashwaasaan, meins!

Obwohl die Story ja größtenteils innen spielt, braucht’s immer mal wieder ein paar Außenaufnahmen – natürlich auch von der Aashwaasaan. Und da hatte ich ein Problem: von der Aashwaasaan hatte ich nur ca. ein Dutzend frei verfügbare Bilder, zudem noch in schlechter Auflösung, die ich verwenden konnte.

 

Bei anderen Raumfahrzeugen, die nur kurz auftauchen, geht das noch, aber bei dem Schiff, das sich durch die ganze Handlung zieht, ist es nicht schön, wenn man es in den immer selben Blickwinkeln sieht. Ich habe nach langem Überlegen in den sauren Apfel gebissen und mir letzte Woche das 3D-Modell angeschafft (angeboten vom großartigen 3D-artist Stefano Tartarotti) .

aashwaasaan blender Mit blender, dem freeware-Rendering-Programm, mit dem ich bereits die Brücke von Band 4 modelliert habe, kann ich das Modell jetzt aufpeppen und in beliebigen Szenen verarbeiten. Nach dem Einarbeiten und Herumspielen hab ich angefangen, dem guten Stück Fenster und coole Lichteffekte zu verpassen, und mich einige Tage im Basteleifer verloren. Dafür sieht das (vorläufige) gerenderte Ergebnis auch ganz schick aus:

aashwaasaan light Also: wenn Ihr in den künftigen Bänden wieder ein Bild der Aashwaasaan seht: diesmal ist es *mein* Schiff! :)

Facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=322550901209505"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Mehrschichten-Comicisierung

Nach den beiden Shootings im Januar hab ich ja erstmal genug Bastelmaterial für ein paar Szenen. Dabei sind auch auch 2 actionreichere Sequenzen, und die stellen etwas höhere Anforderungen als Dialog-Szenen – u.A. auch bei der Bildgestaltung.

 

Eine Methode, um Bildern in Comics mehr Dramatik zu geben oder Bewegung zu simulieren, sind Speed lines – eine Technik, die schon in den alten Superhelden-Zeiten entstanden ist und die im Manga-Universum weiterentwickelt wurde.   speedlines

Jeder, der Comics kennt, kennt auch Speed Lines (wenn auch vielleicht nicht so ausgeprägte wie in diesem Beispiel), selbst in naturalistisch gezeichneten Comics wie Tim & Struppi findet man sie. Ich versuche, diese Technik auch bei Eridani weiterzuentwicklen, aber Speed Lines haben eine merkwürdige Besonderheit: sie sind nicht real. Im Unterschied zu den abgebildeten Personen, Objekten und Hintergründen zeigen sie etwas, das es eigentlich ich der Szene gar nicht gibt, sondern versinnbildlichen Bewegung, Zeit oder Emotionen (zum Glück hat unser Gehirn kein großes Problem damit, diese ‚realen‘ und nicht-realen Bildinhalte auseinanderzuhalten, und es stört sich noch nicht einmal daran).

 

Für einen Comic- der auf realen Fotos und Standbildern von 3D-Objekten basiert, ist das natürlich blöd. Zum Glück gibt’s da den Bewegungs- und Radial-Filter in Photoshop, mit dem sich manche solcher Effekte ganz gut erzeugen lassen. Aufgrund unseres Workflows – erst Compositing, dann Comicisierung – ist das aber nicht immer ganz so leicht: schließlich soll – wenn man einen Effekt erzielen will wie im obigen Manga – der Hintergrund, aber nicht das Vordergrund-Objekt ge-speed-linet werden (was für ein wunderbares Wort). Die Technik, mit der ich gerade experimentiere: Mehrschichten-Comicisierung.  

Schichten

Das Bild wird in mehreren Schichten erstellt, einzeln comicisiert, dann wird der Hintergrund mit speed lines bearbeitet und alles zusammengefügt.  

Klingt kompliziert? Öhm, ja, schon. Aber zum Glück verlangt ja nicht jedes Bild eine so dramatische Überzeichnung 😉 Ich finde, das Ergebnis gewinnt dazu (oben ohne, unten mit Speed lines )

Mascha_result2

Facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=322550901209505"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Brückenbau

In den Tagen, bevor die Comic-Produktion mit echten Darstellern wieder anläuft, hab ich mir ein wenig (ähem) Zeit zum Experimentieren genommen. Es gibt da nämlich ein Thema, vor dem ich bisher aus Komplexitätsgründen immer zurückgeschreckt bin: die Konstruktion von echten 3D-Objekten (bisher ließ sich immer noch alles in 2 1/2D zusammenbasteln). Für Band 4 brauchen wir aber eine Brücke, die ein wichtige Rolle spielen wird und die ich mit den bisherigen Mitteln nicht zufriedenstellend visualisieren konnte (umso mehr, als dass sie nachher spektakulär in die Luft fliegen wird 😉 ).

Das ist eine gute Gelegenheit, um mich endlich mal ernsthafter mit 3D-Modellierung auszueinanderzusetzen. Die Wahl Wahl fiel auf Blender, weil es ziemlich mächtig vom Funktionsumfang, und als Open Source-Projekt verfügbar ist. Vor vielen, vielen Jahren hab ich ja schonmal ein bisschen modelliert, mit POVray (erinnert sich vielleicht noch jemand an POVray? Das waren noch Zeiten! ), aber das war alles per Hand geskriptet, während Blender komplett UI-gestützt arbeitet.

Brücke_3D

Nach ein paar Tagen Arbeiten muß ich sagen: ja, Blender ist mächtig! :) Nach dem Konsum vieler Tutorials bin ich jetzt in der Lage, das Ding soweit zu bedienen, dass ich ein bisschen arbeiten kann, aber ich hab bisher nur an der Oberfläche gekratzt, und dato hätte nicht gedacht, mal mit einem Programm zu arbeiten, das komplexer als PhotoShop ist. Das Ergebnis ist zwar noch überschaubar, aber läßt trotzdem hoffen:

bruecke

Das Coole ist: die ganze Brücke ist modular aufgebaut (jeder bodenplatte und jeder Pfeiler ei eigenes Objekt), und ist damit auch einzeln beliebig manupulierbar. Z.B. eben in der Weise, dass man sie spektakulär in die Luft jagt.

Facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=322550901209505"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Dschungel-Bootcamp

Der Planet Zion, der im Fokus von Band 3 und 4 stehen wird, ist ja ein Dschungelplanet. Solange die Produktion von Band 3 noch nicht angefangen hat, möchte ich die Zeit nutzen und schon mal ein wenig an Stil und Technik feilen.

Erste Annäherung: ich mach’s genauso wie in den ersten Bänden (der Mensch ist ein Gewohnheitstier…). Die Strafe für diese Trägheit folgt auf dem Fuße: Die Ergebnisse sind noch – nun – ausbaufähig. 😉

Wo der Comicfilter  mit den klaren Konturen von Raumschiff-Innenräumen hervorragende Ergebnisse erzielt, ist er mit der unregelmäßig texturierten und konturreichen Dschungelkulisse ein wenig überfordert: die Ergebnisse wirken noch etwas durcheinander und matschig.

Dschungel2 Dschungel1

 

Da geht auf jeden Fall noch was.  Ich werde also wohl noch mein persönliches Bootcamp durchlaufen, weiter am Stil feilen und Euch die (hoffentlich besseren) Ergebnisse posten, sobald ich sie habe.

 

Facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=322550901209505"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Zion – ein Planet entsteht

Während ich hier in Bad Godesberg im Hotelzimmer festsitze (off the record: ich wollte mir Anfang der Woche eigentlich Walking Dead Staffel 3 zur abendlichen Zerstreuung kaufen (ja, ich bin altmodisch, ich kaufe mir die Serien, die ich schätze, auf DVD), musste aber feststellen, dass es in Bonn keinen MediaMarktSaturn gibt, und bis nach Köln zu fahren war ich zu faul), während ich also hier festsitze, nutze ich die Zeit und bastle schon mal an ein paar Objekten, die ich für die künftigen Bände nutzen kann.

Das – rein ästhetisch gesehen – schönste ist: Zion.

 

Zion0

 

Zion1

Ab Teil 3 wird Zion, einer der 2 Siedlungsplaneten im Eridani-System, eine größere Rolle spielen, und dadurch in diversen Bildern auftauchen.

Ich hab mir mal verschiedene Photoshop-Tutorials vorgenommen, Texturen gebastelt und – voila. Zion ist ein Dschungel-Planet ohne große Wasserflächen, deshalb sollte er ein bisschen, aber nicht zu erd-ähnlich aussehen. Der einzige Wehmuts-Tropfen: so schön wird er im Comic niemals aussehen, durch die Stilisierung des Comic-Filters. Seufz…

zion_comicisiert

Facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=322550901209505"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Forever Nerd…

Ich kanns nicht leugnen: ich bin ein Nerd, und werd wohl auch einer bleiben… Und was macht ein Nerd, wenn ihm etwas zu umständlich ist oder zu lang dauert? Er macht einen hack. Konkret heißt das: die Handhabung der ganzen Bilddateien hat mich zunehmend genervt – verschieben, kopieren, umbenennen, in die Dropbox werfen… Also hab ich mir ein kleines Tool programmiert, das mir ein bisschen Arbeit abnimmt: den Eridani Wizard!

eridaniWizard

Da ich der einzige Benutzer bin (und bleiben werde), aber zu eitel, um’s ganz für mich zu behalten, muß ich das einfach posten. Ich bitte um Nachsicht …

Facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=322550901209505"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

iPad-GAU

Wir hatten Ende Juni einen iPad-GAU: Sascha iPad (auf dem er die Comicisierung macht) war abgestürzt, und die Comic-App ließ sich nach der Wiederherstellung nicht mehr aus dem App-Store installieren (über die Lizenzpolitk von Apple werde ich mich hier nicht weiter auslasen, sonst schwillt mir der Kamm).

ipad3

Drama! Tage der Ungewissheit! Zum Glück hat Sascha den Nachfolger der App installiert, und jetzt gehts wieder, aber der Stil ist ein etwas anderer. ich weiß noch nicht so richtig, ob mir das gefällt. Das Ding glättet anders, was zu klareren Formen führt , aber zum Teil auch zu Flächen, die (für meinen Geschmack) zu weich wirken. damit Ihrs selbst beurteilen könnt, hier ein Vergleich:

comicfilter alt-neu

Facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=322550901209505"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));