arrkh0b.png
Edit v1.001 from 2009-07-03 to 2009-07-09 by TSc

Die Erstellung von Pfeilen

In diesem Artikel erfahren Sie, wie man schnell und professionell Pfeile für die Homepage erstellt. Die Definition der Pfeile sowie die Benennung der Pfeil-Dateien finden Sie hier. Durch die Definition der Pfeile und die Beschreibung zum Erstellen solcher Pfeile wird in gewisser Weise eine Art Standard für die Pfeile auf der HuSvEDVF-Homepage spezifiziert. Da kann auch in Zukunft keiner mehr kommen, Diesen Pfeil gibt es nicht. Sollte ein Pfeil noch nicht vorhanden sein, kann er ja dank dieser Beschreibung erstellt werden.

Arbeitsmittel und Vorraussetzungen

  • Zeichnen: Üblicherweise Microsoft® Paint. Darin zeichnen wir anhand einer Vorlage den Pfeil.
  • Transparenz und Dateiformat: Dafür hat sich Irvan View bewährt. Es kann sämtliche Bildformate in andere Bildformate umwandeln und erlaubt das definieren einer Transparenzfarbe.
  • Maus: Entweder eine Ball-Maus auf Stoffunterlage oder eine optische Maus mit texturierter, jedoch nicht spiegelnder Unterfläche (Auch Holz kann spiegeln/reflektieren). Das sollte man vorallem beachten, wenn mehr als ein Pfeil gezeichnet werden soll.

Die Vorgaben im Überblick

  • Format: Für die Pfeile gilt das Compuserve GIF-Format. Diese sind erkennbar an der Dateiendung gif.
  • Dimension: Die Dimension des Pfeil-Bildes beträgt 32x32 Pixel, welche später auf der Internetseite jedoch in 16x16 Pixel dargestellt werden. Das Herunterskalieren bewirkt den sog. Anti-Aliasing-Effekt, wodurch der Treppeneffekt von schräg gezeichneten Linien minimiert wird.
  • Transparenz: Damit die Pfeile unabhängig vom Template und dem Design der Homepage verwendet werden können, wird der Pfeil-Hintergrund transparent gemacht. Als Transparenz-Farbe wurde Rot (HEX: #FF0000, RGB: 255 0 0) ausgewählt.
  • Dateiname: Wie sich der Dateiname zusammensetzt, findet man hier!
  • Ziel-Verzeichnis: Alle erstellten Pfeile landen im Verzeichnis F:\husvedvf\mktg\homepage\husvedvf\images\stories\include\arrow
  • Die Vorlage (Vorschau) Rot ist die Transparenzfarbe. Diese darf nicht verändert werden (HEX: #FF0000; RGB: 255 0 0). Gelb stellt ein Hilfslineal dar, welches wir benötigen um die Pfeil-Vektoren einteilen zu können. Ein Pfeil-Vektorpunkt muss sich immer mit der X oder Y -Achse schneiden. Zusätzlich gibt es noch die Oliv-Farbe, welche ebenfalls eine Hilfe ist. Innerhalb dieser olivfarbenen Kästchen dürfen die Vektorpunkte eingezeichnet werden. Dabei spielt es keine Rolle wo innerhalb des olivfarbenen Kästchens der Vektorpunkt gesetzt wird, er ist immer 1x1 Pixel groß. Man probiert somit die beste Position für den Vektorpunkt innerhalb des olivfarbenen Kästchens aus. Wenn der Pfeil fertig ist und ohne Zoom recht gut aussieht, werden die übrigen gelben und olivfarbenen Kästchen durch rote Kästchen ersetzt. Übrig bleibt dann der Pfeil und die Transparenzfarbe.

    arrkh2a.png
    Abb. 2a: Die Vorlage (Schema)

Einen Pfeil zeichnen

  1. Zu aller erst öffnen Wir MSPaint, indem wir entweder Strg+R drücken, mspaint eingeben und das ganze mit Enter bestätigen, oder im Startmenü Start -> Programme -> Zubehör -> Paint auswählen. Nach kurzer Zeit sollte sich Paint öffnen.
  2. Jetzt definieren wir die Dimensionen des Bildes,
    arrkh3a.png Abb. 3a: Die Attribute des Bildes.
    indem wir entweder Strg+E drücken, oder Im Menü Bild -> Attribute... auswählen. Dabei bekommen wir ein Fenster, wie es in Abb. 3a aussieht. Ganz klar, wir wollen 32x32 Pixel. Also stellen wir Höhe und Breite auf 32 und die Maßeinheit auf Pixel. Theoretisch würde auch ein Schwarzweiß-Bild funktionieren, allerdings kann man dann nicht mit den Vorlagen arbeiten (diese bestehen aus mehreren Farben). Somit wählen wir bei Farben den Punkt Farben aus. Normalerweiße merkt sich Paint diese Einstellungen, somit muss man diese Einstellung nur einmal tätigen. Wer ganz schnell sein Will kann folgendes machen: Alt+B (Breite) 3, 2, dann Alt+H (Höhe) 3, 2, dann Alt+P (Pixel), dann Alt+F (Farben) und zu guter letzt Enter.
  3. arrkh3b.png Abb. 3b: Die Vorlage.
    Nun importieren Wir eine Vorlage in das Bild hinein, welche einem das Zeichnen von Pfeilen erleichtern soll. Dazu öffnen Wir mit IrvanView folgende Datei im Verzeichnis F:\husvedvf\mktg\homepage\husvedvf\images\stories\include\arrow: arr900a2.gif. (Diejenigen die das Prinzip der Pfeil-Generierung verstanden haben, können auch arr900a1.gif verwenden, dort fehlt das innere Raster) Wenn Wir nun ein kleines, rotes Bild sehen, ähnlich wie in Abb. 3b, dann drücken Wir Strg+A (Alles Markieren), dann Strg+C (Kopieren) und wechseln zu Paint, wo Wir dann Strg+V (Einfügen) drücken.
    arrkh3c.png Abb. 3c: Nach dem einfügen.
    Nun sollte eine Kopie des Vorlagenbildes in Paint vorhanden sein (siehe Abb. 3c). Viele werden sich wundern, warum das GIF-Bild nicht direkt in Paint geladen werden soll. Das hat 3 Gründe:
    • Man kann sehr leicht (ausversehen) die Vorlage überschreiben.
    • Die Standardpalette von Paint verwendet Farben, die mit GIF nicht kompatibel sind.
    • Paint zerwürfelt die Farbpalette, welche aber wegen der benötigten Transparenz eindeutig sein muss. Deshalb werden die Pfeile generell im Bitmap (.BMP) gezeichnet und zuletzt in das Compuserve GIF-Format (.gif) umgewandelt. Würde man das nicht beachten, würde Paint beispielsweise die Farbe Rot nicht als einzelne Farbe speichern, sondern abwechselnd ein dunkles und ein helleres Rot berechnen, da die GIF-Farbpalette den Farbwert nicht kennt (GIF hat nur 256 Farben). Außerdem kann man im Paint keine Transparenzfarbe festlegen.
  4. arrkh3e.png Abb. 3e: Orientierung und Länge arrkh3f.png Abb. 3f: Die Pfeilspitze
    Als nächstens Zeichnen wir den Pfeil ein. Bei so einem kleinen Bild ist das recht schwierig, aber Paint bietet eine Zoomfunktion. Entweder man drückt auf die Lupe und wählt den Zoom-Faktor aus, oder man drückt Strg+Bild ↓ um direkt auf den größten Faktor zum hineinzoomen. Als Beispiel verwenden Wir den Pfeil arr12271.gif. Dieser Pfeil setzt sich folgendermaßen zusammen: Pfeilende befindet sich auf Position 1 auf der X-Achse und auf Position 2 der Y-Achse (Siehe Abb. 3d, der Schwarze Punkt). Nun folgt die Orientierung. Angegeben ist 2, das bedeutet, wenn man sich vom Pfeilende den Mittelpunkt eines Kreises vorstellt und den Kreis im Uhrzeigersinn dabei in 16 Teile teilt, dann würde die Orientierung sich bei 45° befinden.
    arrkh3d.png Abb. 3d: X- und Y- Position
    Die Orientierung kann man jetzt noch nicht einzeichnen, wir brauchen nun die Länge. Die Länge wurde in Achtel geteilt und ist absolut zum ganzen Bild, d.h. wenn das Pfeilende erst ab der Mitte beginnt und der Pfeil soll den Rand berühren, dann wären es 4/8, also 50%. Man muss sich einen Strich vorstellen, welcher sich (nach der Orientierung) durch das ganze Bild zieht. Wenn man den Teil vor dem Pfeilende abzieht bleiben somit im Beispiel (rund) 7/8 übrig. Der Pfeil geht somit von Links unten diagonal nach oben (Siehe Abb. 3e). Jetzt fehlt nur noch die Pfeilspitze. Da die Linie eines Pfeils immer auf einen vordefinierten Punkt im Raster fällt, ist das einzeichnen der Spitze recht simpel. Generell gilt, das die Teile der Pfeilspitze ungefähr 45° zur Pfeillinie zeigen. Dadurch ist die Pfeilspitze weder zu Spitz noch zu Stumpf. Die Länge der Pfeilspitzen-Teile sollte eine Längeneinheit nicht überschreiben. Somit eignet sich der nächstgelegene Vektorpunkt für die Pfeilspitzen-Bestandteile (siehe Abb. 3f). Wenn der Pfeil ohne Zoom gut erkennbar ist, wäre dieser Schritt somit abgeschlossen. Andernfalls sollte man mit einem Vorgesetzten besprechen, wie und was man besser machen könnte.
  5. arrkh3h.png Abb. 3h: Das Ergebnis
    Bevor der Pfeil benutzt werden kann, müssen Wir die Hilfspunkte entfernen. Dazu wählen wir mit der Pipette
    arrkh3g.png Abb. 3g: Pipette und Fülleimer
    (Farbe Auwählen, bzw. Abb. 3g: 1) die Hintergrundfarbe (Rot) aus und klicken dann auf den Farbeimer (siehe Abb. 3g: 2). Nun haben wir die Transparenzfarbe ausgewählt und können diese im Lineal und den Hilfspunkten anwenden. Dazu klicken Wir auf alle übrigen Gelben und Olivfarbenen Flächen, diese werden dann Rot. Wenn das Lineal und die Hilfspunkte weg sind, können wir das gane abspeichern. Wie das in unserem Beispiel aussieht, sieht man in Abbildung 3h.
  6. Zu guter letzt speichern wir das Bild ab. Dazu wählen wir Menü -> Speichern unter... aus, wo wir dann ein Speichern-Dialog zu sehen bekommen.
    arrkh3i.png Abb. 3i: Der Speichern-Dialog
    Da wir das Bild nicht lange brauchen, ist das Speicherziel C:\Temp. Als Dateinamen verwenden wir unsere Definition. Der einzige Unterschied ist jetzt die Dateiendung, die ist bei Paint bmp. In unserem Beispiel wäre das also arr12271.bmp. Ganz wichtig ist der Dateityp. Wir verwenden hier 24-Bit-Bitmap (*.bmp;*.dib) Ein anderer Dateityp würde die Farben des Bildes verfälschen. Wenn alles richtig ist, sollte der Dialog ähnlich aussehen, wie in Abb. 3i.

Den Pfeil konvertieren

Einen Pfeil konvertieren
  1. Das jeweilige Bild mit Irvan View öffnen. In dieser Anleitung beziehen Wir uns auf arr12271.bmp, welches wir zuvor erzeugt haben.
  2. arrkh4a.png Abb. 4a: Der Speichern Dialog
    Nachdem das Bild geladen wurde, wählen wir Menü -> Datei -> Speichern unter..., oder ein einfacher Druck auf den Buchstaben S. Dabei öffnet sich ein Speichern-Dialog ähnlich wie in Paint. Bei dem Dateityp stellt man GIF - Compuserve GIF ein. Der Dateiname selbst bleibt gleich, die Dateiendung sollte sich auf gif ändern. Ändert sich die Endung nicht, kann man es nachträglich auch manuell machen. Unter den Eingabefeldern gibt es eine Checkbox, welche Optionen anzeigen heißt. Diese müssen wir aktivieren, da wir die Optionen brauchen. Der Dialog sollte dann ähnlich aussehen, wie in Abbildung 4a.
  3. arrkh4b.png Abb. 4b: Die Optionen. arrkh4c.png Abb. 4c: Transparenzfarbe auswählen.
    Nachdem wir Dateiname und Dateityp festgelegt, sowie Optionen aktiviert haben, können Wir uns nun um die Transparenz kümmern. In diesem Fenster interessiert uns nur die Gruppe GIF: Die Option Interlaced-GIF brauchen wir nicht, da unsere Pfeilbilder so klein sind, das sie selbst per Modem schnell geladen werden. Diese Option also abschalten, sofern diese eingeschaltet ist. Die 2. Option wäre dann Transparente Farbe speichern, die brauchen wir auf jeden Fall, also Anhaken, sofern noch nicht geschehn. Da wir an die Farbpalette nicht mehr herankommen (Paint bis Windows 98 konnte das), wählen wir zudem noch den Punkt Transparente Farbe später wählen aus (Siehe Abbildung 4b). Man bekommt dann beim Speichern eine vergrößerte Vorschau-Ansicht, sobald im Speichern-Dialog auf Speichern drückt. In der Vorschau-Ansicht soll man dann die Farbe anklicken, welche als Transparent gelten soll. Das wäre bei unseren Pfeil-Bildern die Farbe Rot (Siehe Abbildung 4c). Bevor man nun letztendlich speichert, stellt sich noch die Frage Wo sollen die Bilder hin?. Diese landen wie bereits erwähnt in F:\husvedvf\mktg \homepage\husvedvf\images\stories\include\arrow. Sollten keine Schreibrechte vorhanden sein, oder man ist sich unsicher, dann kann man diese auch (am besten mit Unterordner) erstmal bei F:\Temp ablegen. Ein Vorgesetzter kann dann die Korrektheit der Pfeile überprüfen und diese dann, an den richtigen Ort verschieben.
Einen ganzen Satz Pfeile konvertieren

Wenn man 3 Pfeile gemacht hat und noch z.b. weitere 30 machen muss, ist das hin und her mit Paint und Irvan View ziemlich nervig. Deshalb kann man auch folgendes machen: Man zeichnet erst die ganzen Pfeile in Paint und legt diese mit ihren entgültigen Namen (ausgenommen Dateiendung) temporär ab. Irvan View bietet uns die Möglichkeit, einen ganzen Satz an Pfeilen mit einmal zu konvertieren (Batch-Konvertierung). Der Vorteil ist ganz klar, man legt nur ein einziges mal Fest, welche Bilder konvertiert werden sollen und wie sie konvertiert werden sollen. Irvan View macht dann den Rest (fast) automatisch. Das einzige, wo man noch Nachhelfen muss, ist die Transparenz-Auswahl. Pro Bild wird die Vorschau-Ansicht angezeigt, wo man dann die Transparenzfarbe auswählt. Klingt im ersten Moment wenig Sinnvoll, aber es ist trotzdem schneller als wenn man jedes Bild einzeln konvertiert.

Dazu öffnen wir Irvan View und wählen im Menü Datei -> Batchkonvertierung/Umbenennung... aus, bzw. Strg+B. Kurz danach sehen wir ein Fenster, was so aussieht, wie in Abbildung 4d.

arrkh4d.png Abb. 4d: Die Batch-Konvertierung.

  1. In diesem Kasten werden alle Bilddateien eingetragen, die konvertiert werden sollen.
  2. Dieser Kasten ist dem des Speichern-Dialogs ähnlich. Dort markiert man die Dateien, welche in 1 eingetragen werden sollen.
  3. Hier gibt man das Verzeichnis an, wo die konvertierten Dateien landen sollen. Das Verzeichnis sollte möglichst ein anderes sein, als eines wo die ursprünglichen Bilder enthalten sind. In diesem Beispiel wurde wurde das Unterverzeichnis GIF auf C:\Temp angelegt.
  4. Da wir nur das Dateiformat ändern wollen, muss der Punkt auf Batch-Konvertierung gestellt sein.
  5. Das Ziel-Format. In unserem Falle wäre das GIF - Compuserve GIF
  6. Mit diesem Knopf kommt man zu den Optionen. Das Optionsfenster ist bereits bekannt und wurde unter Abbildung 4b genauer beschrieben. Diese Optionen gelten dann für alle Bilder.
  7. Mit diesem Knopf kann man die markierten Dateien von 2 nach 1 übertragen.
  8. Wie 7, nur werden alle Dateien des aktuellen Ordners von 2 übertragen.
  9. Mit diesem Knopf startet man letztendlich die Konvertierung.

Wenn der Vorgang gestartet wurde, fragt Irvan View pro Datei die Transparenz-Farbe ab. Zu guter letzt sollte man ein Blick auf das Zielverzeichnis werfen, ob denn alles geklappt hat.

Einen Pfeil in die Seite einbinden

Das einbinden der Pfeile funktioniert genauso wie bei allen anderen Bildern. Allerdings gibt es einige, wenige Unterschiede. Man darf die Formate BmUudGra, BmUudGla, BmUra und BmUla bei den Pfeilen nicht verwenden, da diese den Textfluß aktivieren und das Bild zum Block umschalten. Außerdem existiert noch eine automatisch generierte Liste welche alle Pfeile anzeigt.

Copntent Management System (CMS)

Im CMS ist der Pfad zu den Pfeilen immer images/stories/include/arrow/arr?????.gif.

Die Interne Homepage (hus_av)

Die Pfeile existieren nur einmal auf dem ganzen Webspace. Deshalb gilt bei den internen Homepages folgender Pfad: /husvedvf/images/stories/include/arrow/arr?????.gif. Ganz wichtig dabei ist der Slash am Anfang. Er sorgt dafür, das sich die Pfadangabe auf dem Webspace-Root bezieht. So kann man die Pfeile überall einbinden, solange sich die jeweilige Seite auf dem lokalen Firmen-Webspace befindet.

Transportfähiger Artikel (hus_avse)

Bei den transportfähigen Artikeln müssen die Bilder generell zum Artikel kopiert werden. Dazu gehören selbstverständlich auch die Pfeile.

gotop.gif Nach Oben