Screenshots in ihrer natürlicher Umgebung zeigen

Angeregt durch einen Artikel von Caschy wollte ich selbst die Möglichkeit haben vom Streicheltelefon und Klappcomputer in eigene Vorlagen einzufügen. Mit imagemagick ist das Ganze auch gar kein Problem und so kann einfach eigenes Bildmaterial verwendet und Geld gespart werden.

Für jedes Gerät, in meinem Fall ein Samsung Galaxy Note 2 und ein Thinkpad X230, habe ich jeweils ein Foto gemacht welches mir als Grundlage für die Screenshots dient. Die Screenshots werden anschliessend durch ein Skript gejagt, welches diese mittels in das jeweilige Foto passend einfügt.

Das fertige Bild mit einem integriertem Thinkpad-Screenshot:

Thinkpad Screenshot

Hier noch das fertige Bild mit dem integrierten -Screenshot:104310_h_screenshot

Das Skript ist noch etwas unsauber, aber die grundsätzliche Vorgehensweise möchte ich dennoch am Beispiel des Streichelapparats aufzeigen. Als Grundlage dient wie bereits erwähnt ein selbst gemachtes Foto mit der Größe 1500x1000px.

Basisbild GN2
Ausgangsbild

In diesem Ausgangsbild wurden zunächst die 4 Eckpunkte (x- und y-Koordinaten) des Displays ermittelt. Hier ergaben sich die Koordinaten (0,45 386,0 505,680 101,740), wobei hier jeweils schon der kleinste Abstand von Links (x: 629) und von Oben (y:156) abgezogen wurde. Danach ging es an das perspektivische Verzerren des Screenhots (720x1280px) mittels mogrify

[bash]convert ~/screenshot.jpg -matte -virtual-pixel transparent -distort Perspective ‚ 0,0 0,45 720,0 386,0 720,1280 505,680 0,1280 101,740‘ perspective.png[/bash]

und anschliessend an das Platzieren

[bash]convert basisbild.jpg perspective.png -geometry +629+156 -composite fertig.jpg[/bash]

Also alles ganz einfach. Jetzt muss ich nur noch besseres Foto vom Thinkpad machen und ich bin fürs Erste zufrieden.

Hinweis für Windows-Nutzer: Die Singlequotes durch Doublequotes ersetzen (Danke Christian für den Hinweis)

Schreibe einen Kommentar

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax