{"id":579,"date":"2009-05-21T18:32:39","date_gmt":"2009-05-21T16:32:39","guid":{"rendered":"https:\/\/www.centigrade.de\/blog\/en\/?p=579"},"modified":"2021-02-04T09:39:23","modified_gmt":"2021-02-04T08:39:23","slug":"aufloesungsunabhaengiges-icon-design-teil-4-unterstuetzung-durch-moderne-tools","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/aufloesungsunabhaengiges-icon-design-teil-4-unterstuetzung-durch-moderne-tools\/","title":{"rendered":"Aufl\u00f6sungsunabh\u00e4ngiges Icon Design \u2013 Teil 4: Unterst\u00fctzung durch moderne Tools"},"content":{"rendered":"

Der vorige Teil<\/a> dieser Reihe fasste zusammen, warum es nicht m\u00f6glich ist, einfach nur eine einzige vektorbasierte Version eines Icons zu erstellen, um diese auf jede gew\u00fcnschte Gr\u00f6\u00dfe zu skalieren. Dieser Teil wirft einerseits die Frage auf, welche Unterst\u00fctzung durch Tools es in Zukunft geben m\u00fcsste, um einen Icon Designer in seiner t\u00e4glichen Arbeit angemessen zu unterst\u00fctzen und andererseits, welche Unterst\u00fctzungen durch Tools bereits existieren, die zum jetzigen Zeitpunkt das Leben des Icon Designers zumindest ein wenig erleichtern.
\n<\/p>\n

Was die Erstellung qualitativ hochwertiger Icons in den verschiedensten Gr\u00f6\u00dfen m\u00fchsam macht, dass der Designer f\u00fcr jede Icongr\u00f6\u00dfe eine neue Bildvariante erstellen, diese manuell am Raster ausrichten und verwalten muss. Dies ist insbesondere im Fall von \u00c4nderungen sp\u00e4t im Designprozess m\u00fchselig sein kann.<\/p>\n

„Hinting“<\/h3>\n

Ein m\u00f6glicher Weg aus diesem Dilemma k\u00f6nnte es sein, Grafikdesign-Tools wie Photoshop, Illustrator oder Expression Design um eine Funktion zu erweitern, mit der einmalig f\u00fcr ein Exemplar eines Icons definiert werden kann, wie ein Vektorpfad, Effekt oder Layer sich in den verschiedenen Gr\u00f6\u00dfen verhalten soll. Ein \u00e4hnlicher Ansatz, das \u201eHinting\u201c ist bereits seit einiger Zeit im Bereich der Typografie wohlbekannt und der Grund daf\u00fcr, dass vektorbasierte Schriftarten, wie beispielsweise Frutiger oder Garamond, auf jede Gr\u00f6\u00dfe skaliert werden k\u00f6nnen und trotzdem noch unter den meisten Bildschirmaufl\u00f6sungen und auf den meisten Ausgabeger\u00e4ten sch\u00f6n aussehen, sogar in so kleinen Gr\u00f6\u00dfen wie 8 Pixel. Man muss nat\u00fcrlich zugeben, dass die Qualit\u00e4t moderner Schriftarten, die sich in heutigen Betriebssystemen finden, zum Teil darauf zur\u00fcckzuf\u00fchren ist, dass anspruchsvolle Gl\u00e4ttungsalgorithmen w\u00e4hrend des Renderings auf jedes einzelne Zeichen angewendet werden. Jedoch w\u00e4re die Zeichengl\u00e4ttung alleine nicht ausreichend, um sch\u00f6ne Schriften zu erhalten.<\/p>\n

Rasteranpassungs-Hints<\/h4>\n

Was die Schriftart makellos aussehen l\u00e4sst ist die sog. \u201eRasteranpassungs-Hinting-Information\u201c, die der Font-Zeichenmethode etwas sagt, wie: \u201eObwohl du diesen Pixel mathematisch an Position 12,5×12,1 rendern m\u00fcsstest, 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\u00f6\u00dfe wesentlich sch\u00f6ner aussieht.\u201c Genau diese Art von Rasteranpassung ist es, die bei Schriftarten automatisch abl\u00e4uft und die Icon Designer noch immer von Hand durchf\u00fchren m\u00fcssen (wie im vorigen Teil beschrieben). F\u00fcr einen hervorragenden Einblick in das Hinting von Schriftarten und die Rasteranpassung empfehle ich den Artikel von Microsoft \u00fcber TrueType Hinting<\/a>.<\/p>\n

In der Icon Design Welt k\u00f6nnen wir also mit Sicherheit von den Methoden der Typografie-Welt lernen: die M\u00f6glichkeit, Rasteranpassungs-Hints auf die verschiedenen Vektorpfade, die ein Icon beschreiben, anzuwenden sollte ein funktionales Hauptmerkmal eines Icon Design Tools darstellen.<\/p>\n

\"Grid<\/p>\n

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\u00fcrfnisse (und vermutlich auch die Bed\u00fcrfnisse anderer Icon Designer) zu befriedigen. Die folgende Aufz\u00e4hlung gibt an, welche weiteren Arten von Hinting durch Grafikdesign-Tools zur Verf\u00fcgung gestellt werden m\u00fcssten, um unseren Anforderungen bei Centigrade zu entsprechen.<\/p>\n

Skalierungs-Hints<\/h2>\n

Wenn ein kleines Icon hochskaliert wird, macht es h\u00e4ufig keinen Sinn, seine Konturlinien proportional hoch zu skalieren, da die Linie in gro\u00dfen Gr\u00f6\u00dfen klobig aussehen k\u00f6nnte. Bei visuellen Effekten, wie Schlagschatten oder Glanzeffekten, k\u00f6nnte eine solche proportionale Skalierung hingegen intendiert sein. Eine ad\u00e4quate Unterst\u00fctzung seitens der Tools m\u00fcsste den Designern detaillierte Kontrolle dar\u00fcber geben, wie Iconelemente, z.B. Linien oder Effekte, sich in der Gr\u00f6\u00dfe ver\u00e4ndern, wenn das Icon skaliert wird.<\/p>\n

\"Scaling<\/p>\n

Sichtbarkeits-Hints<\/h4>\n

Bei einem qualitativ hochwertigen Icon wird vermieden, zu viele Details in kleinen Gr\u00f6\u00dfen zu verwenden, wohingegen bei Icons gro\u00dfer Abmessungen Details hinzugef\u00fcgt werden. Icondesigner m\u00fcssten deshalb die M\u00f6glichkeit haben zu definieren, welche Layer-Gruppen oder einzelne Layer, aus denen das Icon zusammengesetzt ist \u2013 egal ob vektor- oder pixel-basiert \u2013 in welchen Icongr\u00f6\u00dfen gezeigt bzw. versteckt werden sollen.<\/p>\n

\"Visibility<\/p>\n

Farb-Hints<\/h4>\n

Wie im Abschnitt \u00fcber Kontrastverbesserung des vorigen Teils dieser Reihe bereits beschrieben, ist das \u201e\u00dcbertreiben\u201c von Farben bei kleinen Icongr\u00f6\u00dfen ein unumg\u00e4nglicher Schritt, damit kleine Icons erkennbar bleiben. Farb-Hints k\u00f6nnten dies automatisieren: f\u00fcr eine spezifische Farbe m\u00fcsste der Designer nur definieren, um welchen Faktor dessen Farbton erh\u00f6ht werden soll bzw. um welchen Faktor die Helligkeit reduziert werden soll, wenn das Icon in kleinen Gr\u00f6\u00dfen dargestellt wird.<\/p>\n

\"Color<\/p>\n

Obwohl jede der vorgestellten Hinting-Funktionen in der Theorie absolut sinnvoll ist, sind sie in der unserer t\u00e4glichen Praxis leider nutzlos, da bis dato kein Programm existiert, dass diese Funktionen nur im Entferntesten zur Verf\u00fcgung stellt. Deshalb werden wir in naher Zukunft weiterhin mit mehreren verschiedenen Versionen pro Icon arbeiten, jedes einzelne optimiert f\u00fcr eine bestimmte Aufl\u00f6sung. Wir nennen dies ein Multi-Scale Icon. Wie bereits erw\u00e4hnt, macht dies den Icon Design Prozess zeitaufw\u00e4ndiger \u2013 und es f\u00fchrt sogar zu einem weiteren Problem.<\/p>\n

Multi-Scale Icons in Rich Internet Applications<\/h3>\n

Heutzutage gewinnen Rich Internet Applications stark an Popularit\u00e4t, da sie mehr und mehr wie Desktop-Anwendungen aussehen und sich auch so anf\u00fchlen, wobei sie au\u00dferdem noch all die Vorteile der Vernetzung mit dem Internet mit sich bringen. Moderne Rich Internet Applications sind nat\u00fcrlich mit anspruchsvollen Icons ausgestattet und laufen auf verschiedensten Ger\u00e4ten mit verschiedenen Bildschirmaufl\u00f6sungen (von Handys bis zu Desktop PCs). Eine Anwendung, die auf einem bestimmten Ger\u00e4t mit einer bestimmten Bildschirmaufl\u00f6sung l\u00e4uft, muss ihre Icons selten in mehr als zwei verschiedenen Gr\u00f6\u00dfen anzeigen. Daher w\u00e4re es h\u00f6chst ineffizient, alle verschiedenen Bildversionen eines Icons \u00fcber die Netzwerkverbindung (w\u00e4hrend Deployment oder zur Laufzeit) zu \u00fcbermitteln, besonders, wenn eine speicherhungrige, enorm gro\u00dfe Version eines Icons \u00fcbermittelt wird, diese aber \u00fcberhaupt nicht in der Anwendung gezeigt wird, da die Bildschirmaufl\u00f6sung des Ger\u00e4tes ohnehin zu gering ist.<\/p>\n

Idealerweise sollte die Anwendung nur die eine Iconversion laden, die in einem bestimmten Darstellungskontext ben\u00f6tigt wird (sagen wir 48×48 Pixel, da die Anwendung auf einem 100 ppi Ger\u00e4t l\u00e4uft). Sobald sich die Bildschirmaufl\u00f6sung \u00e4ndert (z.B. weil der Benutzer den virtuellen ppi Wert des Betriebssystems ver\u00e4ndert hat um die Anzeige zugunsten einer besseren Lesbarkeit zu vergr\u00f6\u00dfern), w\u00fcrde eine gr\u00f6\u00dfere und angemessenere Iconversion geladen (z.B. 64×64 Pixel).<\/p>\n

Die Unterst\u00fctzung eines derartigen inkrementellen Ladens von Iconbildern klingt komplex und vergleichsweise schwer erreichbar wie die Unterst\u00fctzung des Hinting. Dennoch ist diese Unterst\u00fctzung seit einigen Monaten erh\u00e4ltlich und es k\u00f6nnte sein, dass Sie sie schon mit ihr in Ber\u00fchrung gekommen sind \u2013 und zwar beim Zoomen in eine Satellitenansicht der Erde.<\/p>\n

Multi-Scale Icons \u2013 Der Deep Zoom Ansatz<\/h3>\n

Wir beziehen uns auf einen Ansatz, der sich Deep Zoom nennt. Der Deep Zoom Ansatz wurde urspr\u00fcnglich genutzt, um es Benutzern zu erlauben, in hochdetaillierte Bilder und Fotos im Internet hinein zu zoomen und dabei gleichzeitig die ben\u00f6tigte Netz-Bandbreite gering zu halten. Dies wird dadurch erreicht, dass nur derjenige Bereich des Bildes heruntergeladen wird, der tats\u00e4chlich angesehen wird und zwar nur in der Aufl\u00f6sung die f\u00fcr 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 \u00dcberg\u00e4nge zu vermeiden (siehe Wikipedia<\/a>). 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\u00e9 Website<\/a> ein eindr\u00fcckliches Beispiel pr\u00e4sentierten. Microsofts Tool zur Umsetzung von Deep Zoom, Seadragon, erlaubt es Programmierern, \u201edeep-zoom-bare\u201c 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 \u201edeep-zoom-bares\u201c Bild in dem offenen und XML-basierten DZI\/DCI-Dateiformat abgespeichert. Nur der Vollst\u00e4ndigkeit halber: ein \u00e4hnlicher Ansatz ist durch die Verwendung des Zoomify Plugins f\u00fcr Adobe Photoshop oder durch Einsetzen der Deep Zoom Implementierung f\u00fcr Flash m\u00f6glich.<\/p>\n

Wie kann diese tolle Deep Zoom Technologie nun aber f\u00fcr das Zeichnen verschiedener Bildversionen eines Icons entsprechend der ben\u00f6tigten Icongr\u00f6\u00dfe 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\u00f6glich, die verschiedenen Bildversionen eines Icons zu laden und sie auf einem gemeinsamen Canvas anzuordnen. Anschlie\u00dfend k\u00f6nnen 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\u00fcgung gestellt werden kann sowie das Deep Zoom Verhalten f\u00fcr 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\u00f6chten, um unsere Blog-Reihe \u00fcber aufl\u00f6sungsunabh\u00e4ngiges Icon Design abzuschlie\u00dfen.<\/p>\n

Multi-Scale Icon Demoanwendung<\/h3>\n

F\u00fcr die Demoanwendung muss das Silverlight Plugin<\/a> installiert sein. Das Icon, das in der Anwendung gezeigt wird, besteht aus mehreren verschiedenen Bildversionen, von denen jede in Photoshop f\u00fcr eine spezifische Gr\u00f6\u00dfe 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\u00e4ngliche Laden eines 16×16 Pixel Icons in Verbindung mit weichen \u00dcberg\u00e4ngen beim Umschalten auf gr\u00f6\u00dfere Bildversionen.<\/p>\n

 <\/p>\n

\t\t\t\"Get\t\t\t<\/a><\/object>
\n