Der vorige Teil dieser Reihe fasste zusammen, warum es nicht möglich ist, einfach nur eine einzige vektorbasierte Version eines Icons zu erstellen, um diese auf jede gewünschte Größe zu skalieren. Dieser Teil wirft einerseits die Frage auf, welche Unterstützung durch Tools es in Zukunft geben müsste, um einen Icon Designer in seiner täglichen Arbeit angemessen zu unterstützen und andererseits, welche Unterstützungen durch Tools bereits existieren, die zum jetzigen Zeitpunkt das Leben des Icon Designers zumindest ein wenig erleichtern.
Was die Erstellung qualitativ hochwertiger Icons in den verschiedensten Größen mühsam macht, dass der Designer für jede Icongröße eine neue Bildvariante erstellen, diese manuell am Raster ausrichten und verwalten muss. Dies ist insbesondere im Fall von Änderungen spät im Designprozess mühselig sein kann.
„Hinting“
Ein möglicher Weg aus diesem Dilemma könnte es sein, Grafikdesign-Tools wie Photoshop, Illustrator oder Expression Design um eine Funktion zu erweitern, mit der einmalig für ein Exemplar eines Icons definiert werden kann, wie ein Vektorpfad, Effekt oder Layer sich in den verschiedenen Größen verhalten soll. Ein ähnlicher Ansatz, das „Hinting“ ist bereits seit einiger Zeit im Bereich der Typografie wohlbekannt und der Grund dafür, dass vektorbasierte Schriftarten, wie beispielsweise Frutiger oder Garamond, auf jede Größe skaliert werden können und trotzdem noch unter den meisten Bildschirmauflösungen und auf den meisten Ausgabegeräten schön aussehen, sogar in so kleinen Größen wie 8 Pixel. Man muss natürlich zugeben, dass die Qualität moderner Schriftarten, die sich in heutigen Betriebssystemen finden, zum Teil darauf zurückzuführen ist, dass anspruchsvolle Glättungsalgorithmen während des Renderings auf jedes einzelne Zeichen angewendet werden. Jedoch wäre die Zeichenglättung alleine nicht ausreichend, um schöne Schriften zu erhalten.
Rasteranpassungs-Hints
Was die Schriftart makellos aussehen lässt ist die sog. „Rasteranpassungs-Hinting-Information“, die der Font-Zeichenmethode etwas sagt, wie: „Obwohl du diesen Pixel mathematisch an Position 12,5×12,1 rendern müsstest, empfehle ich, ihn ein wenig nach links, auf die Position 12×12 zu verschieben, so dass er perfekt in das Pixelraster passt und dadurch in einer kleineren Größe wesentlich schöner aussieht.“ Genau diese Art von Rasteranpassung ist es, die bei Schriftarten automatisch abläuft und die Icon Designer noch immer von Hand durchführen müssen (wie im vorigen Teil beschrieben). Für einen hervorragenden Einblick in das Hinting von Schriftarten und die Rasteranpassung empfehle ich den Artikel von Microsoft über TrueType Hinting.
In der Icon Design Welt können wir also mit Sicherheit von den Methoden der Typografie-Welt lernen: die Möglichkeit, Rasteranpassungs-Hints auf die verschiedenen Vektorpfade, die ein Icon beschreiben, anzuwenden sollte ein funktionales Hauptmerkmal eines Icon Design Tools darstellen.
Leider ist ein mehrfarbiges, sehr detailliertes Icon eine deutlich komplexere bildliche Darstellung als ein einfarbiges, Schriftzeichen, weshalb die automatisierte Rasteranpassung als Hinting Information nicht ausreicht, um unsere Bedürfnisse (und vermutlich auch die Bedürfnisse anderer Icon Designer) zu befriedigen. Die folgende Aufzählung gibt an, welche weiteren Arten von Hinting durch Grafikdesign-Tools zur Verfügung gestellt werden müssten, um unseren Anforderungen bei Centigrade zu entsprechen.
Skalierungs-Hints
Wenn ein kleines Icon hochskaliert wird, macht es häufig keinen Sinn, seine Konturlinien proportional hoch zu skalieren, da die Linie in großen Größen klobig aussehen könnte. Bei visuellen Effekten, wie Schlagschatten oder Glanzeffekten, könnte eine solche proportionale Skalierung hingegen intendiert sein. Eine adäquate Unterstützung seitens der Tools müsste den Designern detaillierte Kontrolle darüber geben, wie Iconelemente, z.B. Linien oder Effekte, sich in der Größe verändern, wenn das Icon skaliert wird.
Sichtbarkeits-Hints
Bei einem qualitativ hochwertigen Icon wird vermieden, zu viele Details in kleinen Größen zu verwenden, wohingegen bei Icons großer Abmessungen Details hinzugefügt werden. Icondesigner müssten deshalb die Möglichkeit haben zu definieren, welche Layer-Gruppen oder einzelne Layer, aus denen das Icon zusammengesetzt ist – egal ob vektor- oder pixel-basiert – in welchen Icongrößen gezeigt bzw. versteckt werden sollen.
Farb-Hints
Wie im Abschnitt über Kontrastverbesserung des vorigen Teils dieser Reihe bereits beschrieben, ist das „Übertreiben“ von Farben bei kleinen Icongrößen ein unumgänglicher Schritt, damit kleine Icons erkennbar bleiben. Farb-Hints könnten dies automatisieren: für eine spezifische Farbe müsste der Designer nur definieren, um welchen Faktor dessen Farbton erhöht werden soll bzw. um welchen Faktor die Helligkeit reduziert werden soll, wenn das Icon in kleinen Größen dargestellt wird.
Obwohl jede der vorgestellten Hinting-Funktionen in der Theorie absolut sinnvoll ist, sind sie in der unserer täglichen Praxis leider nutzlos, da bis dato kein Programm existiert, dass diese Funktionen nur im Entferntesten zur Verfügung stellt. Deshalb werden wir in naher Zukunft weiterhin mit mehreren verschiedenen Versionen pro Icon arbeiten, jedes einzelne optimiert für eine bestimmte Auflösung. Wir nennen dies ein Multi-Scale Icon. Wie bereits erwähnt, macht dies den Icon Design Prozess zeitaufwändiger – und es führt sogar zu einem weiteren Problem.
Multi-Scale Icons in Rich Internet Applications
Heutzutage gewinnen Rich Internet Applications stark an Popularität, da sie mehr und mehr wie Desktop-Anwendungen aussehen und sich auch so anfühlen, wobei sie außerdem noch all die Vorteile der Vernetzung mit dem Internet mit sich bringen. Moderne Rich Internet Applications sind natürlich mit anspruchsvollen Icons ausgestattet und laufen auf verschiedensten Geräten mit verschiedenen Bildschirmauflösungen (von Handys bis zu Desktop PCs). Eine Anwendung, die auf einem bestimmten Gerät mit einer bestimmten Bildschirmauflösung läuft, muss ihre Icons selten in mehr als zwei verschiedenen Größen anzeigen. Daher wäre es höchst ineffizient, alle verschiedenen Bildversionen eines Icons über die Netzwerkverbindung (während Deployment oder zur Laufzeit) zu übermitteln, besonders, wenn eine speicherhungrige, enorm große Version eines Icons übermittelt wird, diese aber überhaupt nicht in der Anwendung gezeigt wird, da die Bildschirmauflösung des Gerätes ohnehin zu gering ist.
Idealerweise sollte die Anwendung nur die eine Iconversion laden, die in einem bestimmten Darstellungskontext benötigt wird (sagen wir 48×48 Pixel, da die Anwendung auf einem 100 ppi Gerät läuft). Sobald sich die Bildschirmauflösung ändert (z.B. weil der Benutzer den virtuellen ppi Wert des Betriebssystems verändert hat um die Anzeige zugunsten einer besseren Lesbarkeit zu vergrößern), würde eine größere und angemessenere Iconversion geladen (z.B. 64×64 Pixel).
Die Unterstützung eines derartigen inkrementellen Ladens von Iconbildern klingt komplex und vergleichsweise schwer erreichbar wie die Unterstützung des Hinting. Dennoch ist diese Unterstützung seit einigen Monaten erhältlich und es könnte sein, dass Sie sie schon mit ihr in Berührung gekommen sind – und zwar beim Zoomen in eine Satellitenansicht der Erde.
Multi-Scale Icons – Der Deep Zoom Ansatz
Wir beziehen uns auf einen Ansatz, der sich Deep Zoom nennt. Der Deep Zoom Ansatz wurde ursprünglich genutzt, um es Benutzern zu erlauben, in hochdetaillierte Bilder und Fotos im Internet hinein zu zoomen und dabei gleichzeitig die benötigte Netz-Bandbreite gering zu halten. Dies wird dadurch erreicht, dass nur derjenige Bereich des Bildes heruntergeladen wird, der tatsächlich angesehen wird und zwar nur in der Auflösung die für die aktuelle Zoomstufe notwendig ist. Die umliegenden Bereiche werden erst heruntergeladen, wenn der Benutzer dorthin schwenkt (oder dort hinein zoomt); Animationen werden genutzt, um ruckartige Übergänge zu vermeiden (siehe Wikipedia). Microsoft stellte seine Umsetzung dieser Idee vor fast einem Jahr auf der MIX Convention in Las Vegas vor, wobei sie mit der Hard Rock Café Website ein eindrückliches Beispiel präsentierten. Microsofts Tool zur Umsetzung von Deep Zoom, Seadragon, erlaubt es Programmierern, „deep-zoom-bare“ Bilder entweder als reine Ajax-basierte Implementierung, die in jedem Internetbrowser laufen, als Teil einer Silverlight-Anwendung oder sogar als Teil einer iPhone-Anwendung zu verwenden. Bei allen Implementierungen wird ein „deep-zoom-bares“ Bild in dem offenen und XML-basierten DZI/DCI-Dateiformat abgespeichert. Nur der Vollständigkeit halber: ein ähnlicher Ansatz ist durch die Verwendung des Zoomify Plugins für Adobe Photoshop oder durch Einsetzen der Deep Zoom Implementierung für Flash möglich.
Wie kann diese tolle Deep Zoom Technologie nun aber für das Zeichnen verschiedener Bildversionen eines Icons entsprechend der benötigten Icongröße herangezogen werden? Eigentlich ist dies relativ simpel. Microsoft bietet das Tool Deep Zoom Composer an, welches auf der offiziellen Webseite kostenlos heruntergeladen werden kann. Mit Deep Zoom Composer ist es möglich, die verschiedenen Bildversionen eines Icons zu laden und sie auf einem gemeinsamen Canvas anzuordnen. Anschließend können diese Bilder einfach in das DZI/DCI-Dateiformat exportiert werden. Alternativ kann Deep Zoom Composer sogar ein komplettes Expression Blend Projekt erstellen, welches direkt als Silverlight-Anwendung kompiliert und zur Verfügung gestellt werden kann sowie das Deep Zoom Verhalten für spezifische Zwecke adaptieren. Und genau das ist es, was wir uns in der Icon-Skalierungs-Demo zu Nutze gemacht haben, die wir nun vorstellen möchten, um unsere Blog-Reihe über auflösungsunabhängiges Icon Design abzuschließen.
Multi-Scale Icon Demoanwendung
Für die Demoanwendung muss das Silverlight Plugin installiert sein. Das Icon, das in der Anwendung gezeigt wird, besteht aus mehreren verschiedenen Bildversionen, von denen jede in Photoshop für eine spezifische Größe zwischen 16×16 und 1024×1024 Pixel optimiert wurde. Die Demo illustriert den Vorteil, den wir aus bestehenden Tools ziehen, wie beispielsweise das schnelle anfängliche Laden eines 16×16 Pixel Icons in Verbindung mit weichen Übergängen beim Umschalten auf größere Bildversionen.
Ein interessanter Test, zu dem ich Sie ermuntern möchte, wäre es, IE Throttle oder Firefox Throttle herunterzuladen, um so künstlich Ihre Netzwerk Bandbreite zu verringern und so zu sehen, wie sich dies auf das Rendering des Icons auswirkt. Wie Sie merken werden, bleiben die Zoom-Übergänge weiterhin sehr sanft, auch wenn das Laden des Icons einer bestimmten Größe beim ersten Mal etwas länger dauert. Wenn eine Bildversion einer spezifischen Größe aber einmal geladen wurde, wird sie gecached und ohne Verzögerung wieder geladen.
Wir können das Problem des inkrementellen Ladens von Icons also heutzutage lösen, indem wir die Deep Zoom Technologie einsetzen, die nicht einmal für solche Zwecke entwickelt wurde. Natürlich könnte die Demo immer noch einige Verbesserungen vertragen. Beispielsweise wäre es schön, wenn für jede große Icongröße eine vektorbasierte XAML-Version des Icons geladen würde.
Fazit
Um meine Reihe von Blogartikeln über auflösungsunabhängiges Icon Design abzuschließen, hier eine kurze Zusammenfassung. Im ersten Artikel habe ich erklärt, was Auflösungsunabhängigkeit bedeutet und warum sie im Kontext von Icon Design so wichtig ist. Der zweiten Artikel stellte die Unterschiede zwischen Vektor- und Pixelgrafiken heraus und erläuterte, warum es nicht möglich ist, ein einzelnes vektorbasiertes Icon zu erstellen, das dann in jeder Größe gut dargestellt wird. Der dritte Teil beschrieb, welche Schritte wir bei Centigrade manuell durchführen, damit ein Icon tatsächlich in jeder Größe gut aussieht. Dieser letzte Teil beschäftigte sich schließlich mit der Frage, welche Form von Unterstützung durch Tools es gibt bzw. welche es geben müsste, um das Leben des Icon Designers zu vereinfachen. Wenn Sie nun neugierig geworden sind, mehr Icon Design Beispiele zu sehen, besuchen Sie unsere Galerie oder sehen Sie sich die Folien meines Vortrags auf dem UXCamp 2009 in Berlin an.
