<aid="bitmap-vector"name="bitmap-vector">BeOS Pixelgraphik im Vergleich zu Haiku Vektoricons</a></h2>
<p>Im Gegensatz zum BeOS verwendet Haiku vektor-basierte an Stelle von pixel-basierten Icons. Für diesen Zweck wurde ein eigenes "Haiku Vector Icon Format" (HVIF) entwickelt, das für eine kleine Dateigröße und schnelle Anzeige optimiert ist. Aus diesem Grund sind Haiku Icons normalerweise <i>erheblich</i> kleiner als ein Pixelbild oder das weit verbreiteten SVG-Format. Ebenso sind Haiku Icons nicht wie im BeOS auf 256 Farben (8bit Palette) beschränkt.<br/>
<p>Anzumerken ist, dass im BeOS immer zwei Versionen eines Icons (16x16 und 32x32 Pixel) verwendet wurden, um sowohl in der Listen- als auch in der Icon-Darstellung gut auszusehen.</p>
<p>Dieser Trick ist bei Vektoricons nicht mehr nötig. Diese sind nicht nur lediglich einige hundert Bytes groß, sie skalieren auch viel besser als Pixel-Icons. (Anmerkung: da das BeOS nur zwei verschiedene Icon-Einstellungen hatte - 16x16 und 32x32 - war das Problem der Skalierung nicht so ausschlaggebend.)</p>
<p>Icons werden als Attribut mit der jeweiligen Datei gespeichert. Nicht jede Datei muss allerdings so ein Attribut besitzen, um in einem Tracker-Fenster mit einem Icon dargestellt zu werden. Dateien, die kein eigenes Icon besitzen, erben das Icon ihres Dateityps. Das Icon für einen Dateityp lässt sich global mit <spanclass="app"><acronymtitle="FileTypes">Dateitypen</acronym></span> in den Einstellungen ändern. Das spezielle Icon einer einzelnen Datei wird mit dem <spanclass="app">FileType Add-On</span> im Kontextmenü zu dieser Datei geändert. Mehr dazu im Kapitel <ahref="../filetypes.html">Dateitypen</a>.</p>
<divclass="box-info">Als Attribute bleiben Icons einzelner Dateien nur in Dateisystemen erhalten, die diese Art Metadaten unterstützen. Dateien sollten deswegen mittels zip gepackt werden, damit die in den Attributen gespeicherten Informationen außerhalb einer BFS Partition nicht verloren gehen.</div>
<p>Icon-O-Matic ist der Icon-Editor unter Haiku. Die damit erstellten Icons können im Haiku-eigenen Format HVIF, als SVG oder PNG abgespeichert werden. Darüber hinaus ist es auch möglich, das Icon direkt als Attribut an eine bestehende Datei anzuhängen oder es als Ressource, beziehungsweise Quelldatei für Programmierer bereit zu stellen. Da Icon-O-Matic speziell für das Format HVIF entwickelt wurde, kann man an der Arbeitsweise ein wenig die Struktur des HVIF Formats erkennen.</p>
<p>Im Gegensatz zu anderen Vektorgraphik-Programmen werden hier keine separaten Objekte erstellt, die jeweils ihre eigene Sammlung an Eigenschaften, wie Pfad, Strichstärke oder Farbe haben. Die einzelnen Objekte ("shapes") werden vielmehr aus mehrfach genutzten Pfaden ("paths") und Farben ("styles") zusammengesetzt und mit Eigenschaften ("properties") versehen. Dieses Wiederverwenden einzelner Elemente ist eines der Geheimnisse von HVIFs Effizienz. Auch wenn es dem Icon-Designer etwas mehr abverlangt, gibt es doch einige Vorteile, die für diesen Ansatz sprechen.<br/>
So können beispielsweise durch das Wiederverwenden eines Pfads mehrere Objekte gleichzeitig geändert werden. Besonders deutlich wird das beim Schattenwurf eines Objekts. Durch die Änderung des gemeinsamen Pfads, wird gleichzeitig zum Objekt auch dessen durch eine leichte Verzerrung erzeugte Schatten mitgeändert.</p>
<p>Um ein sichtbares Objekt auf der Zeichenfläche zu erstellen, benötigt man eine Form mit einem Pfad und einem Stil. Der Einfachheit halber kann man eines davon, zwei oder alle drei Teile gleichzeitig aus dem <spanclass="menu">Form</span> Menü heraus erstellen. Zu jedem Objekt (Pfad, Form, Transformator oder Stil) existiert ein Befehlsmenü über dessen Elementliste. Darüber hinaus besitzt jedes Element noch spezielle Eigenschaften, die unter <spanclass="menu">Eigenschaften</span> gesetzt werden können.</p>
<p>Ein Pfad besteht aus mehreren Punkten, die durch eine Linie oder einer Bezier-Kurve miteinander verbunden sind. Um einzelne Punkte ändern oder hinzufügen zu können, muss der entsprechende Pfad in der Pfadliste links ausgewählt sein.</p>
<p>Ein Klick in die Zeichenfläche setzt den ersten Punkt eines Pfads. Dabei lässt sich auch gleich festlegen, ob es sich bei dem Pfad um eine Linie oder eine Kurve handeln soll: ein einfacher Klick erzeugt eine gerade Linie; wird die Taste gehalten und die Maus bewegt, erscheinen die typischen Greifer für Bezier-Kurven. Natürlich kann der Pfad auch noch nachträglich von einer Linie zur Kurve oder andersrum geändert werden.</p>
<p>Um von Bild "A" zu Bild "B" zu kommen, müssen einige Eckpunkte der Linie zu Kurvenpunkten umgewandelt werden. Dazu wird beim Klick auf einen Punkt die <spanclass="key">ALT</span> Taste gehalten und dabei die Maus bewegt, damit die Bezier-Greifer erscheinen. Hierdurch ergibt sich eine symmetrische Bezier-Kurve: beide Greifer sind fest miteinander verbunden. Wenn man nur einen der beiden verändern möchte, muss man wieder <spanclass="key">ALT</span> drücken während man einen Greifer bewegt.<br/>
Umgekehrt kann man einen Kurvenpunkt in einen Eckpunkt verwandeln, indem man ihn bei gedrückter <spanclass="key">ALT</span> Taste anklickt.</p>
<p>Durch Klicken und Ziehen kann ein Punkt verschoben werden. Um mehrere Punkte gleichzeitig auszuwählen, zieht man bei gedrückter <spanclass="key">SHIFT</span> Taste einen entsprechenden Auswahlrahmen auf. Ausgewählte Punkte erscheinen mit einem roten statt dem normal schwarzen Umriss.<br/>
Ein weiterer Punkt wird in einem Pfad eingefügt, indem man auf die Verbindungslinie zwischen zwei Punkten klickt.<br/>
Ausgewählte Punkte lassen sich mit <spanclass="key">ENTF</span> entfernen; alternativ kann auch ein nicht ausgewählter Punkt durch einen Klick bei gedrückter <spanclass="key">STRG</span> Taste gelöscht werden.</p>
<tr><tdclass="onelinetop"><spanclass="menu">Alles auswählen</span></td><tdstyle="width:70px"><spanclass="key">ALT</span><spanclass="key">A</span></td><td>Wählt alle Punkte des aktuellen Pfads aus.</td></tr>
<tr><td><spanclass="menu">Transformieren</span></td><td><spanclass="key">T</span></td><td>Um alle ausgewählten Punkte wird ein Rahmen gelegt, um sie zusammen bewegen, in der Größe verändern oder drehen zu können. Das funktioniert genauso wie weiter unten bei "Shapes" beschrieben.</td></tr>
<tr><td><spanclass="menu">Trennen</span></td><td></td><td>Teilt die ausgewählten Punkte in zwei Punkte auf, die übereinander liegen.</td></tr>
<tr><td><spanclass="menu">Spiegeln</span></td><td></td><td>Dreht die ausgewählten Punkte um 180°. Das wirkt sich logischerweise nur bei Bezier-Punkten aus.</td></tr>
<tr><td><spanclass="menu">Entfernen</span></td><td><spanclass="key">ENTF</span></td><td>Löscht die ausgewählten Punkte.</td></tr>
<p>Das <spanclass="menu">Pfad</span> Menü hat einige selbsterklärende Einträge: <spanclass="menu">Rechteck hinzufügen</span>, <spanclass="menu">Kreis hinzufügen</span>, <spanclass="menu">Duplizieren</span> oder <spanclass="menu">Entfernen</span>. Andere benötigen ein paar Worte der Erklärung:</p>
<tr><td><spanclass="menu">Umkehren</span></td><tdstyle="width:15px;"></td><td>Wenn der Pfad nicht "geschlossen" ist (siehe weiter unten: Pfad Eigenschaften), wird ein neuer Punkt mit dem zuletzt gesetzten Punkt verbunden. Durch "Umkehren" wird der neue Punkt mit dem ursprünglichen Startpunkt des Pfads verbunden.</td></tr>
<tr><td><spanclass="menu">Aufräumen</span></td><td></td><td>Entfernt überflüssige Punkte (insbesondere beim Import von SVG-Graphiken hilfreich).</td></tr>
<tr><tdclass="onelinetop"><spanclass="menu">Indizes vorwärts rotieren</span></td><td><spanclass="key">ALT</span><spanclass="key">R</span></td><td>Hierdurch wird sozusagen die Öffnung eines Pfads gedreht. Am deutlichsten wird das bei einem nicht geschlossenen Pfad mit einem zugewiesenen Style und Shape und einem Stroke Transformator. Wenn der Pfad diese Form hat ⊂, wird er folgendermaßen gedreht: ⊂ ∩ ⊃ ∪.</td></tr>
<p>Die <spanclass="menu">Eigenschaften</span> links unten im Programmfenster bieten alle verfügbaren Einstellungen für das ausgewählte Objekt. Bei einem Pfad sind das: <spanclass="menu">Name</span> und ob er <spanclass="menu">Geschlossen</span> ist oder nicht.</p>
<p>Eine Form weist einem oder mehreren Pfaden einen Stil zu. Dadurch wird der Pfad auf der Zeichenfläche auch tatsächlich sichtbar. Die Zuweisung erfolgt, indem man bei ausgewählter Form die entsprechenden Pfade und den Stil ankreuzt.</p>
<p>Eine Form definiert, wie ein Pfad oder ein Stil angewendet wird, beispielsweise ob ein Objekt gefüllt oder umrandet ist (hier spielt zusätzlich noch ein "Transformator" eine Rolle; hierzu weiter unten mehr). Eine Form kann auch bewegt, gedreht oder in ihrer Größe geändert werden, ohne den verwendeten Pfad verändern zu müssen. Somit ist es möglich, einen einzigen Pfad mehrfach zu verwenden und unterschiedliche, aber ähnliche Formen zu erhalten.</p>
<p>Wird eine Form aus der Liste ausgewählt, wird diese Form mit einem Rechteck umschlossen um sie hervorzuheben. Je nach dem, wo dieses Rechteck mit der Maus angefasst wird, kann man die Form verschieben, in der Größe verändern oder um den Mittelpunkt drehen, der selbst auch verschoben werden kann. Mittels der <spanclass="key">SHIFT</span>-Taste kann man beim Verschieben die Richtung unveränderlich halten, beim Drehen 45°-Schritte festlegen und das Seitenverhältnis bei der Größenänderung beibehalten. Wie bereits bei der Bearbeitung des Pfads kann am Mauszeiger der aktuelle Bearbeitungsmodus abgelesen werden:</p>
<p>Formen liegen - jede für sich in einer separaten Ebene - übereinander. Die Position in der Z-Achse (also welche Form über oder unter welcher liegt) wird über die Reihenfolge in der Liste aller Formen festgelegt. Hier kann eine Form mit der Maus nach oben oder unten gezogen werden.</p>
<p>Das Menü <spanclass="menu">Form</span> beinhaltet neben der bereits erwähnten Möglichkeit eine "leere" Form, eine Form zusammen mit einem Pfad, einem Stil oder beidem zu erstellen, also <spanclass="menu">Hinzufügen</span> bzw. <spanclass="menu">Mit Pfad/Stil/Pfad & Stil hinzufügen</span>, sowie <spanclass="menu">Duplizieren</span> und <spanclass="menu">Entfernen</span> noch:</p>
<tr><td><spanclass="menu">Transformation zurücksetzen</span></td><tdstyle="width:15px;"></td><td>Alle Veränderungen an der Form (Größe, Verschieben, Drehen) werden zurückgesetzt.</td></tr>
<tr><tdclass="onelinetop"><spanclass="menu">Transformation einfrieren</span></td><td></td><td>Bei der Transformierung einer Form verbleiben die zugewiesenen Pfade an ihrer ursprünglichen Position. Das kann durchaus gewollt sein, so zum Beispiel, wenn mehrere Formen auf einen Pfad zurückgreifen oder man die Option "Am Raster ausrichten", also <spanclass="menu">Optionen | Am Gitter einrasten</span>, aktiviert hat.<br/>
Anderenfalls wird durch diesen Menüpunkt die Transformation auf die Pfade angewendet und ein zukünftiges "Transformation zurücksetzen" setzt auf diese neue Transformation zurück.</td></tr>
Je nach dem, welche Icon-Größe im Tracker eingestellt ist, kann für jede Form festgelegt werden ob sie angezeigt wird, oder nicht. In diesem Beispiel wären die Zahlen bei 16x16 nicht mehr erkennbar und würden nur stören. Über den entsprechenden Wert beim Detail-Grad wurden sie ausgeblendet.</p>
<p>Der Wert für den "LOD" errechnet sich folgendermaßen: ein LOD von 1.00 ist für eine Icon-Größe von 64x64 festgelegt. Für andere Größen ist die Icon-Größe durch 64 zu teilen. So hat ein Icon der Größe 16x16 einen LOD von 16/64 = 0.25.
Eine Form wird unterhalb seines <spanclass="menu">Min LOD</span>, beziehungsweise überhalb seines <spanclass="menu">Max LOD</span> nicht angezeigt.</p>
<p>Wenn man also den <spanclass="menu">Min LOD</span> einer Form auf 0.0 und den <spanclass="menu">Max LOD</span> auf 0.5 setzt, dann wird diese Form nur angezeigt, wenn die Icon-Größe im Tracker kleiner oder <i>gleich</i> 32x32 ist. Wenn sie bereits ab dieser Größe ausgeschlossen werden soll, muss ein Wert kleiner als 0.5 - beispielsweise 0.49 - eingegeben werden.</p>
<p>Der "LOD" kann nicht nur dafür verwendet werden, Formen ein- oder auszublenden, sondern unter anderem auch um Linien verschiedener Strichstärken zu verwenden: die Form duplizieren, am Duplikat die gewünschten Änderungen vornehmen und bei beiden den LOD so einstellen, dass entweder die eine oder die andere Form angezeigt wird. Hierbei ist aber darauf zu Achten, dass die Werte der jeweiligen Detail-Grade nicht überlappen! Sonst sind bei einer Icon-Größe beide Formen sichtbar...<br/>
<p>Ein Stil kann entweder eine Vollfarbe oder ein Farbverlauf sein.<br/>
Neben vordefinierten Farben der Farbpalette unter <spanclass="menu">Farbfelder</span> kann man auch seine eigene Farbe mischen. Der Regler unterhalb des Farbspektrums legt den Alpha-Kanal einer Farbe, also deren Transparenz, fest.</p>
<p>Wählt man als Stil einen Farbverlauf, kann man noch zwischen <spanclass="menu">Linear</span>, <spanclass="menu">Radial</span>, <spanclass="menu">Raute</span> und <spanclass="menu">Konisch</span> wählen. Die Anfangs- und Endfarbe kann durch Ziehen aus der Farbübersicht auf den dreieckigen Marker gewählt werden.<br/>
Natürlich kann der Marker verschoben werden, um den Farbverlauf anzupassen. Zusätzliche Marker können durch Doppelklick in den Farbverlauf hinzugefügt werden. Mittels <spanclass="key">ENTF</span> wird der ausgewählte (unterstrichene) Marker gelöscht.</p>
<p>Wie bei einer Form kann das Rechteck, dass den Gradient auf der Zeichenfläche repräsentiert, verschoben, gedreht oder in seiner Größe verändert werden.</p>
<p>Das Menü <spanclass="menu">Stil</span> enthält die Einträge <spanclass="menu">Hinzufügen</span>, <spanclass="menu">Duplizieren</span> und <spanclass="menu">Entfernen</span>, sowie <spanclass="menu">Transformation zurücksetzen</span>.</p>
<tr><td><spanclass="menu">Kontur</span></td><td></td><td>Fügt einen Umriss um die ausgewählte Form hinzu.</td></tr>
<tr><td><spanclass="menu">Umrandung</span></td><td></td><td>Die ausgewählte Form wird mit einem Strich gezeichnet, statt mit dem Stil gefüllt.</td></tr>
<p>Neben dem Namen <spanclass="menu">Name</span> und der Breite <spanclass="menu">Strichstärke</span> für den Transformator können unter den <spanclass="menu">Eigenschaften</span> diese (je nach Art leicht unterschiedlichen) Einstellungen vorgenommen werden:</p>
<tr><td><spanclass="menu">Enden</span></td><tdstyle="width:15px;"></td><td>(<i>nur bei "Stroke"</i>) Definiert die Endpunkte einer Linie: <spanclass="menu">Butt</span> - abgeflacht, <spanclass="menu">Square</span> - die Linienbreite wird auf die Linie als Abschluss-Quadrat aufgesetzt, oder <spanclass="menu">Round</span>, die Linie wird abgerundet.</td></tr>
<tr><td><spanclass="menu">Ausrichtung erk.</span></td><td></td><td>(<i>nur bei "Contour"</i>) Stellt sicher, dass Icon-O-Matic - insbesondere bei Pfaden, die sich selbst schneiden - die Kontur um einen Pfad immer außen anbringt.</td></tr>
<tr><td><spanclass="menu">Verbindungen</span></td><td></td><td>Definiert, wie Linien an einem Punkt miteinander verbunden werden: <spanclass="menu">Miter</span> (auf Gehrung), <spanclass="menu">Round</span> (abgerundet) oder <spanclass="menu">Bevel</span> (abgeschrägt).</td></tr>
<tr><td><spanclass="menu">Gehrungslimit</span></td><td></td><td>nur wenn unter <spanclass="menu">Verbindungen</span> "Miter" ausgewählt wurde: diese Einstellung beeinflusst das Aussehen des Gehrungsschnittes.</td></tr>
<p>Am oberen Rand des Fensters findet man die übliche Menüzeile. <spanclass="menu">Datei</span>, <spanclass="menu">Bearbeiten</span> und <spanclass="menu">Optionen</span> sind hinreichend selbsterklärend. Sehen wir uns stattdessen lieber die Möglichkeiten des Abspeicherns genauer an.</p>
<p><spanclass="menu">Datei | Speichern als...</span> speichert die Datei im speziellen Format von Icon-O-Matic, das zusätzliche Informationen, wie den Namen von Pfaden, Formen oder Stilen, mit abspeichert. Diese Informationen gehen, um Speicherplatz zu sparen, verloren, wenn das Icon exportiert wird. Es empfiehlt sich, Entwürfe für eine spätere Verwendung in diesem Format zu speichern, da sonst alle Objekte ihren Namen verlieren und nur noch <path>, <shape>, respektive <style> heißen.</p>
<p><spanclass="menu">Datei | Exportieren als...</span> öffnet ein Dialogfenster zum Exportieren der Grafik. Das Dateiformat kann über ein Auswahlmenü unten im Dialogfeld bestimmt werden:</p>
<li><p>Die <ahref="http://svn.haiku-os.org/haiku/haiku/trunk/docs/icon_guidelines/index.html">Icon Guidelines</a> (englisch) enthalten wichtige Informationen zu Haiku Icons wie Perspektive, Farben und Schattenwurf.</p></li>
<li><p>Mit Pfaden sollte sparsam umgegangen werden, da sie am meisten Speicherplatz benötigen. Man sollte eher Formen bearbeiten und transformieren, um bereits bestehende Pfade wiederverwenden zu können. Ebenso kann die Verwendung von Gradienten Speicherplatz sparen.</p></li>
<li><p>So oft es möglich ist, sollte die Option "Am Gitter ausrichten" aus den <spanclass="menu">Optionen</span> aktiviert werden. Pfade, deren Punkte sich am 64x64 Pixel-Gitter der Zeichenfläche orientieren, benötigen weniger Speicherplatz. Darüber hinaus wirken die Icons auch schärfer. Wichtige Konturen sollten am besten am 16x16 Raster ausgerichtet werden.</p></li>
<li><p>Im Programmfenster ist oben links eine Vorschau des Icons in verschiedenen Auflösungen. Hier kann der sinnvolle Einsatz des <ahref="#i-o-m-shape-lod">Detail-Grads</a> von Formen direkt überprüft werden.</p></li>
<li><p>Icon-O-Matic selbst enthält keine Möglichkeit, um Text einzufügen. Text kann jedoch nach Einstellung von Schriftart und Schriftschnitt in einem Texteditor - beispielsweise <acronymtitle="StyledEdit">Texteditor</acronym> - direkt auf die Zeichenfläche gezogen werden. Icon-O-Matic erstellt automatisch die entsprechenden Pfade und Formen.</p></li>
<li><p>Sind einer Form mehrere sich überschneidende Pfade zugewiesen, wird die Schnittfläche ausgeblendet. So ist es möglich, ein Loch in einer Fläche auszuschneiden.</p></li>
<li><p>Über das Mausrad kann die Zeichenfläche gezoomt werden. Zum Verschieben der Zeichenfläche wird die mittlere Maustaste verwendet, beziehungsweise per normalem Linksklick bei gedrückter <spanclass="key">LEERTASTE</span>.</p></li>
<p>The above is of course quite theoretical. The best way to learn using Icon-O-Matic is by experimenting. To get you started and once more show the basics, have a look at these short clips:</p>
