Screenshots ansprechend inszenieren

Shots.so ist eine Bild­bear­bei­tung für Screen­shots, die dann wei­ter­hilft, wenn die Bild­schirm­fotos nicht «nackt» prä­sen­tiert werden sollen. Eine An­lei­tung mit Tipps, gefolgt von einem Ex­kurs zur ge­pfleg­ten Bild­schirm­foto­grafie.

Shots.so ist eine wirklich nützliche Anwendung, um Screenshots ansprechend zu inszenieren: Gewissermassen ein Studio für die Bildschirmfotografie.

Das Problem mag banal klingen. Doch ich darf aus Erfahrung berichten, dass es das nicht ist. Warum, werde ich am Ende des Beitrags erklären. Erstmals geht es jetzt darum, was Shots kann – und wie wie man diese Anwendung nutzt, die im Browser läuft, die es jedoch auch fürs iPhone und iPad gibt:

In dieser Bildbearbeitung für Screenshots gibt es jede Menge einzustellen. Die Werkzeugleiste am linken Rand hat zwei Bereiche: Unter Mockup konfigurieren wir den Screenshot selbst und bei Frame legen wir die Umgebung fest, in der er erscheint.

Dropdown Screenshot im Bereich Mockup

Bei Screenshot finden wir ein Dropdown-Menü, über das wir die «Verpackung» des Bildschirmfotos festlegen: Es stehen die Bereiche Phone, Tablet, Laptop, Desktop und Wearable zur Auswahl.

Die Auswahl des Telefons, auf dem der Screenshot angezeigt werden soll.

Bei den Telefonen müssen wir uns für ein iPhone-Modell von 13 bis 16 oder das SE entscheiden. Bei Tablet reicht die Spanne vom Pro 11 über das iPad Air bis zum iPad Mini. Unter Laptops steht das Macbook Pro 16, Air M2, Air 13, Pro 13, Pro 15 und – warum auch immer – das Surface Book von Microsoft zur Disposition. In der Rubrik Desktop finden sich der iMac 24, das Pro Display XDR, das Studio Display, den iMac Pro und den iMac Retina. Und schliesslich die Kategorie Wearable mit der Apple Watch Ultra und der Series 8.

Die älteren Geräte haben wir nicht zur Verfügung, aber es gibt von jedem Modell auch Varianten. Beim iPhone zählen das Pro und Max dazu, und bei den smarten Uhren dürfen wir virtuell Armbänder auswechseln.

Am rechten Rand erscheinen zu jeder Auswahl entsprechende Layouts. Bei denen steht das Telefon mal gerade, mal schräg und es gibt auch angeschnittene Varianten. Praktisch auch die Layouts mit zwei oder drei Geräten, mit denen gleichzeitig mehrere Screenshots abgebildet werden können. Die Platzierung der Screenshots ist einfach: Dazu ziehen wir die Datei per Maus an die gewünschte Stelle. Die Rahmen für die Screenshots lassen sich auch auswählen und per Maus skalieren.

Das ist flexibel und praxistauglich – mit einem grossen Kritikpunkt: Da ich auch über Android und Windows berichte, sollten nebst dem Surface Book auch ein paar andere Nicht-Apple-Geräte vorhanden sein. Und ich würde gern ein iPhone und ein Android-Telefon nebeneinanderstellen können, um Apps aus beiden Welten vergleichen zu können.

Eine geräteunabhängige Präsentation ist möglich, wenn wir in dieser Dropdown-Liste die Option Screenshot auswählen. Dann erscheinen die Bildschirmfotos «nackt». Wir können sie immerhin mit einer Kontur einrahmen und einen Schatten werfen lassen. Und die Optionen zu den Hintergründen stehen ebenfalls zur Verfügung.

Die Bildbearbeitung Shots.so für Screenshots. Ohne Geräterahmen lässt sich auch ein Android-Screenshot aufhübschen.

Unter Mockup lassen sich ferner folgende Dinge einstellen:

  • Schatten (Shadow) mit Richtung, Länge und Deckkraft.
  • Grösse und Position des Screenshots.

Bei Frame den Hintergrund konfektionieren

Wie erwähnt, ist der Bereich Frame für die Umgebung zuständig. Hier stellen wir folgende Dinge ein:

  • Über das Dropdown-Menü, in dem standardmässig Default 4:3 voreingestellt ist, wählen wir das Seitenverhältnis des fertigen Bildes.
  • Bei Shadow Overlay tun wir so, als ob die Telefone in einer Umgebung liegen würden, in der Gegenstände Schatten auf die Szene werfen.
  • Die Optionen zu Background erlauben es, den Hintergrund transparent, mit einer einzelnen Farbe oder einem Bild zu füllen. Es gibt einen direkten Draht zu Unsplash und eine KI-Funktion, die Hintergründe passend zu den Screenshots generieren soll.
  • Nebst der Auswahl einer Volltonfarbe stehen auch Farbverläufe in diversen Formen bereit, ebenso Desktop-Hintergründe, abstrakte Motive und Texturen.
  • Unter Effects legen wir eine Unschärfe (Blur) über den Hintergrund und machen ihn, falls gewünscht, etwas «uneben» (Noise).

Das fertige Werk wird über den Download-Knopf im PNG-Format heruntergeladen. Die Kreation der Screenshots ist kostenlos. Allerdings befindet sich Shots noch im Betastadium. Ich könnte mir vorstellen, dass die fertige App gewisse Funktionen als Premium anbieten wird. Bei der iPhone-/iPad-App gibt es ein Pro-Abo für zwei Franken pro Monat oder 15 Franken im Jahr.

Fazit: Ein echter Geheimtipp für alle, die ab und zu Screenshots präsentieren müssen. Und aufgrund der technischen Entwicklung sind das längst nicht mehr nur ein paar Bloggerinnen, Computerjournalisten und App-Entwicklerinnen, sondern alle Leute, die es kommunikativ mit Apps zu tun bekommen …

Nein, ich habe keine zwei iPhone 15 Pro, mit denen ich dieses Arrangement in Echt hätte nachstellen können.

Ein Exkurs: Die Krux der schönen Screenshot-Präsentation

An dieser Stelle könnte (und sollte!) der Blogpost zu Ende sein. Aber ich hatte euch eine kleine Plauderei aus dem Nähkästchen versprochen, was meinen Umgang mit Bildschirmfotos angeht. Man kann diese auch «nackt» präsentieren, das heisst; ohne Bearbeitung und ohne sie auf virtuell auf ein Telefon oder einen Computer zu packen und mit einem Hintergrund zu versehen.

Ich mache das hier im Blog oft: Ich klinke die unbearbeiteten Screenshots in den Text ein, weil sie hier in aller Regel einen dokumentarischen Zweck erfüllen. Es geht mir darum, eine App oder eine Funktion zu erklären, und da braucht es kein extra Schmuckwerk. Mal abgesehen davon, dass wir durchs Zeigen eines iPhones oder Macs auch immer etwas Gratis-Werbung für die Hardware machen. Das ist, wenn man nur den Bildschirminhalt sieht, nicht der Fall.

Die einfache Methode ist keine gute Lösung, wenn ein Screenshot als Beitragsbild verwendet werden soll. Als Blickfang funktioniert ein «nackter» Screenshot schlecht: Er sieht wenig attraktiv aus und führt beim Posten des Links in den sozialen Medien nicht unbedingt zu besonderer Aufmerksamkeit und den erhofften Klicks. Darum greife ich in solchen Fällen oft zur Kamera und mache ein Bildschirmfoto im wörtlichen Sinn: nämlich, indem ich das Handy in meiner Hand oder den Laptop auf dem Tisch abfotografiere.

Diese echten Bildschirmfotos sind oft die einzig brauchbare Lösung für meine Tamedia-Artikel: Die Bildredaktion akzeptiert Screenshots als Aufmacherbild nur in Ausnahmefällen. Symbolbilder sind ebenfalls oft keine Option, weil es zu den meisten Tech-Themen keine passenden Motive gibt. Eine Ausweichlösung können KI-Bildgeneratoren sein. Doch wie hier ausgeführt ist das bei vielen Medienhäusern nur dann erlaubt, wenn sich der Artikel mit der künstlichen Intelligenz beschäftigt.

Das Hochformat-Problem lösen

Per Kamera den Bildschirm zu fotografieren, löst auch das Problem des Seitenverhältnisses: Handybildschirme werden typischerweise im Hochformat aufgenommen und sind darum viel länger als breit. Diese Abmessung kollidiert oft mit dem Layout der Website oder auch der gedruckten Publikation, wo querformatige Motive besser geeignet wären. Ich löse das Problem manchmal, indem ich zwei oder drei Screenshots nebeneinander platziere. Beim Abknipsen des Bildschirms halte ich die Kamera natürlich quer und wähle den Bildausschnitt so, dass auf dem Screen das zu erkennen ist, was erkennbar sein soll.

Das ist eine aufwendige Sache: Ich muss auf den Hintergrund und die Schärfe achten. Handydisplays neigen zu Spiegelungen und oft gibt es hässliche Fingerabdrücke auf dem Display, die erst auffallen, nachdem ich das Foto gross am Computer zu sehen bekomme. Bei einer zu kurzen Verschlusszeit ist das Display nicht mehr gleichmässig hell, weil die Bildwiederholrate dafür nicht ausreicht. Und für ein gutes Resultat braucht es oft auch eine Nachbearbeitung, bei der die Anzeige auf dem Display nachgeschärft und vielleicht auch der Hintergrund etwas abgedunkelt wird. Und ein echtes Ärgernis sind die Fingerabdrücke, die Staubkörnchen und Hautschüppchen. Die haben die fiese Eigenschaft, erst im fertig bearbeiteten Bild prägnant zum Vorschein zu treten.

Für meine Zwecke lohnt sich das trotzdem, weil echte Fotos am authentischsten wirken und über die Zeit auch einen Wiedererkennungswert haben. Doch wenn mir die Zeit dafür fehlt, bin ich noch so froh, auf Shots zurückgreifen zu können.

Beitragsbild: So wird das Bildschirmfoto wirklich gut.

Kommentar verfassen