iEnno – ein Macianer auf seinem Spielplatz

12. Februar 2014

Wie ich Screenshots, GIFs und Videos für iEnno erstelle

Für ein Software-Blog wie diesen hier sind Screenshots fast genauso elementar, wie die Worte, die dazu geschrieben sind. Ich verwende nicht ein Tool für alles, sondern eine ganze Schaar. Right tool for the right job und so. Vielleicht interessiert dich ja, mit welcher App ich was mache. Falls ja, lies weiter.

Screenshots

Vorschau ist, wie jüngst beschrieben, oft ziemlich unterschätzt. Für das schnelle Zuschneiden reicht es alle Male. Auch Pfeile und Texte lassen sich mit Vorschau hinzufügen, sehen aber in Skitch meiner Meinung nach etwas besser aus. Womit wir direkt bei App Nummer 2 wären.

Skitch v1.0.12

Um Informationen zu verpixeln, die nichts auf einem öffentlichen Screenshot verloren haben oder einfach nur vom Wesentlichen ablenken, könnte ich auch Skitch nehmen. Seit Version 2 gibt es dort auch die lang ersehnte Funktion dafür. Allerdings sind dabei auch einige Features verworfen worden, die für meinen Workflow essentiell sind, weswegen Skitch – wie im obigen Sceenshot zu sehen – in einer älteren Version bei mir läuft.

Darum greife ich mit Monosnap auf eine weitere App zu. Und das eigentlich nur um Informationen zu verpixeln.

Verpixelte Informationen in Monosnap

Wie du in der Werkzeugleiste siehst, kann Monosnap noch ein bisschen mehr, z.B. auch Pfeile und Text. Von daher kann ich mir durchaus vorstellen, langfristig komplett auf Monosnap umzusteigen. Allerdings fehlt mir dafür noch das letzte bisschen Feinarbeit. Ich kann z.B. Vorgänge wie Zuschneiden oder Skalieren nicht per Esc-Taste abbrechen.

Videos

Manchmal reichen statische Bilder nicht aus, um Vorgänge eindeutig zu vermitteln. Da HTML5-Video mittlerweile in allen ordentlichen Browsern unterstützt wird, ist es also durchaus eine Option manche Sachen zu screencasten.

Dafür gibt es dedizierte Apps und würde ich das ein paar Mal öfter machen, könnte ich auch rechtfertigen dahingehend etwas zu recherchieren. Für die paar Male und meine (noch?) geringen Anforderungen reicht aber auch der Quick Time Player, der über Ablage → Neue Bildschirmaufnahme genau das tut.

Die Qualität ist ok, die Bearbeitungsfeatures natürlich eingeschränkt. Trimmen geht recht einfach von der Hand, aber das war es dann auch.

Trimmen im Quick Time Player

Weil ich oft mehr vom Bildschirm aufnehme, als für den Leser notwendig, benutze ich die kostenlose Software Video Crop, die scheinbar nicht mehr angeboten wird.[1] Damit lässt sich der relevante Ausschnitt festlegen und das Video eportieren.

Screencast in Video Crop zuschneiden

Für iPhone-Screencasts benutze ich AirServer. Eine App, die über AirPlay den Bildschirminhalt des iPhone spiegelt und selbigen direkt aufnehmen kann. AirServer habe ich eher zufällig[2] in einem Bundle erworben. Macht seinen Job ganz ok, wenn auch nicht perfekt.

AirServer im Fullscren-Mode

Damit alle ordentlichen Browser mein Video auch abspielen können, muss es in mindestens 2 Formaten vorliegen. Für die Konvertierung aus der original .mov-Datei benutze ich die Kommandozeilenprogramme ffmpeg und ffmpeg2theora. Ausgehend von einer existierenden screencast.mov lauten die Terminalbefehle:

ffmpeg2theora -o screencast.ogv screencast.mov
ffmpeg -i screencast.mov -vcodec h264 -acodec aac -strict -2 screencast.mp4

Zum Einbinden in den Artikel benutze ich dieses HTML-Snippet:

<video controls>
  <source src="http://www.ienno.de/pfad/zum/video/screencast.mp4" type="video/mp4"><br />
  <source src="http://www.ienno.de/pfad/zum/video/screencast.ogv" type="video/ogg"><br />
Dein Browser unterstützt dieses Video nicht.<br />
</video>

Sieht dann ungefähr so aus (geklaut aus dem Fantastical-Review):

Für GIF-Charakter kannst du dem Video-Element die Attribute autoplay und loop geben, wie Alex hier zeigt. Apropos GIF:

GIFs

Mittlerweile würde ich nahezu jedes GIF durch ein HTML-Video ersetzen. Ist in der Regel kleiner und dazu noch in besserer Qualität. Allerdings war mir das noch nicht immer bewusst. Dazu kommt, dass ich, sobald ich das Video mit Anmerkungen a la Skitch versehen will, nicht um ordentliche Videobearbeitungssoftware (teuer) oder eben GIFs (kostenlos, aber zeitaufwändig) rumkomme. Der Prozess ist allerdings zugegebenermaßen holprig.

Die Basis ist das Umwandeln des Screencasts in ein Gif. Gesehen habe ich das zuerst bei Markus, ich benutze jedoch eine etwas andere Variante, da die Qualität sonst doch ziemlich leidet. Ich extrahiere die Frames in einzelne Bilder…

mkdir frames
ffmpeg -i screencast.mov frames/ffout%03d.png

… lösche Duplikate, bearbeite einige Bilder (z.B. mit Pfeile aus Skitch) und mache aus den übrig gebliebenen Bildern in Photoshop ein GIF.

Nicht der netteste Workflow, zumal ich die Duplikate händisch löschen muss. Weder ffmepg-Optionen noch Gemini machen dabei einen guten Job, darum muss ich immer selbst ran. Im Ergebnis sieht das dann z.B. so aus (dem Review zum neuen Skitch für iOS entnommen):

Arbeit mit den Werkzeugen in Skitch für iOS

Fazit

So schaut das bei mir aus mit dem Anfertigen von Screenshots, Videos und GIFs für diesen Blog. Falls du Anmerkungen und Verbesserungsvorschläge hast, bin ich wie immer offen für alles.