Handschrift-Text mit Pfeilen für Website

Heute wollte ich auch einer dieser coolen Hinweistexte mit Pfeil und Text machen, für unsere Zeta-Uploader-Website. Nach viel Recherche und ausprobieren bin ich dann ziemlich nahe an mein Wunsch herangekommen, mit folgendem Ergebnis:

HTML, Pfeile und Text

Das ganze ist ein transparentes PNG, welches ich mit ein bisschen JavaScript/jQuery und CSS einblende und positioniere.

Hier möchte ich kurz für mich und für andere als Erinnerung/Tipp mein Vorgehen beschreiben.

Schriftart

Die Schrift war relativ einfach. Ich habe nach „Handwriting font TTF“ gesucht und mich dann für den Font „Journal“ entschieden.

Ich habe bei Wunderlist gespickelt, welche Farbe und Schriftart diese verwendet haben und mir dann was ähnliches rausgesucht.

Das habe ich dann verwendet um in Paint.NET in eine Ebene als Text zu schreiben. Ich habe not „fett“ als Schriftstärke gewählt.

Pfeil

Die Pfeile waren deutlich schwieriger. Nach vielem, vielem Suchen, fand ich nix vernünftiges; entweder waren die Pfeile zu pixelig (weil Auflösung zu gering), oder die Pfeile sahen doof aus. (Ich wundere mich, auf wie viele Arten man Pfeile zeichnen kann).

Also habe ich mir gedacht: Lieber nicht ganz so innovativ aussehend, dafür solide und anständig und habe mich auf mein lokal installiertes Microsoft Office Visio gestürzt. In Visio gibt es auch Pfeile („Verbinder“) und diese lassen sich auch als gekrümmte Linie („Splines“) darstellen.

Also bin ich wie folgt vorgegangen. Zunächst in Visio:

  1. Neues, leeres Visio-Dokument erstellt.
  2. Verbinder eingefügt.
  3. Verbinder rechtsgeklickt und „Gekrümmte Linie“ ausgewählt.
  4. Linie mit Pfeil versehen.
  5. Linie dicker gemacht.
  6. Farbe der Linie angepasst an gewünschte Farbe.
  7. Über die Knubbel an der Linie, die entsprechende Kurve so hingezogen, wie ich sie gebraucht habe.
  8. Linie markiert.
  9. Im Menü „Datei“ den Menüpunkt „Speichern unter“ ausgewählt.
  10. Als „Dateityp“ dann „.PNG“ ausgewählt.
  11. Transparenz-Optionen so eingestellt, dass Pfeil mit transparentem Hintergrund gespeichert wird.

visio-pfeile-05

Nun weiter in Paint.NET:

  1. Weitere Ebene in Bild mit dem obig eingefügtem Text einfügen.
  2. Viso-PNG-Pfeil in diese Ebene einfügen.
  3. Über Ebenen-Rotationszoom den Pfeil ggf. noch drehen und bisschen skalieren (bevorzugt Pfeil in Visio schon ziemlich genau in die gewünschte Größe bringen)
  4. Pfeil so weit beschneiden am Schwanz, dass nur noch der Teil übrig bleibt, der benötigt wird.
  5. Pfeil schön relativ zum Text platzieren.
  6. Alle Ebenen zusammenfassen, ggf. Rändern noch entsprechen abschneiden.
  7. PNG speichern.

Ich hatte mir im Vorfeld als unterste Ebene des Paint-.NET-Bildes ein Bildschirmfoto des Browsers mit der Website, auf der später der Handschrift-Text platziert werden soll, eingefügt, so konnte ich schön sehen, wie die Größe von Handschrift-Text und dem Pfeil zur Website passt.

Ergebnis

Das Element stelle ich dann schön elegant mit jQuery dar, zunächst warte ich kurz (mittels der delay-Funktion) nach dem Laden der Seite, dann lasse ich es sanft einblenden (mit der fadeIn-Funktion).

Das fertige Ergebnis könnt Ihr nachfolgend betrachten:

Zeta-Uploader, mit Handschrift

Ggf. hilft Euch das ja auch mal, bzw. habt Ihr mir Verbesserungsvorschläge.

2 Gedanken zu „Handschrift-Text mit Pfeilen für Website

  1. Mike sagt:

    Keiner Verbesserungsvorschlag: Der Pfeil sieht gegenüber der Handwriting-Schrift zu technisch aus. Einfach schnell mit dem Edding auf Papier nen Preil malen, einscannen usw. 🙂

    Die .delay-Funktion kannte ich noch nicht. Cool!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.