Was ist ein guter (und einfacher) Weg, um zu zeigen, dass ein Screenshot ein Screenshot ist?

Ich benutze Mac OS X 10.6 und ich mag das System-Screen-Grab-Tool. Wenn Sie ein ganzes Fenster aufnehmen, wird standardmäßig ein wenig Schatten / Farbverlauf mit Transparenz unter ein PNG-Bild gelegt - was ich sehr schön finde.

Wenn Sie jedoch einen Bereich des Bildschirms erfassen, z. B. von einer Webseite, sind die Ränder flach und es kann schwierig sein, ihn vom Rest der Website zu unterscheiden, insbesondere wenn er den Elementen ähnelt, die bereits vorhanden sind .

Meine Frage lautet also: Was ist eine einfache, elegante Möglichkeit, um zu zeigen, dass ein Bild tatsächlich nicht Teil einer Website ist? Ich denke ein 5 Pixel schwarzer Rand würde es wahrscheinlich tun, aber das ist nicht nobel. Ich mag die subtilen Farbverläufe, die OS X macht, aber ist das für alle Screenshots geeignet und wäre das einfach zu erstellen?

Ich würde es wirklich lieben, wenn es ein Skript gäbe, mit dem ich die Transformation anwenden könnte, ohne Photoshop selbst öffnen zu müssen, aber das ist keine Voraussetzung für eine akzeptable Antwort.

^ Beispiel für das Problem, über das ich spreche

Kommt ganz darauf an, um welche Art von Bildern es sich handelt.

Mögliche Wege dies zu tun:

1. Text in einer Ecke mit der Aufschrift "Screenshot" oder "Screencapture"
2. Kamera-Symbol eine Ecke oder Text und Bild des Kamera-Symbols.
3. Wenn Sie dieses Antwortfeld verwenden, ist es möglicherweise am sichersten, es mit einer anderen Farbe zu überlagern und das Bild beim Schweben anzuzeigen.
4. Da # 3 möglicherweise nicht ganz klar ist, kann diese Überlagerung mit Text und / oder Symbolen versehen sein oder wenn keine Überlagerungsfarbe vorhanden ist, kann sie auch umgekehrt werden.
5. Eine Art Grenze könnte ein guter Indikator sein.

Was die Techniken betrifft:

Nr. 1 und Nr. 2
Viele Screencapture-Programme ermöglichen Wasserzeichen, die sich ideal für einzelne oder wenige Bilder eignen. Bei mehreren Bildern kann mit Photoshop ein Wasserzeichen hinzugefügt werden. Oder eine HTML/CSSBildunterschrift.

# 3, # 4 und # 5
Diese müssten mit HTML/CSSBildunterschrift gemacht werden.

Konnte nicht anders, als über eines meiner Projekte nachzudenken ... jetzt ... "Ich möchte keine Werbung machen ... Aber ..." http://photoshopmesta.net/sic/theTest/ so etwas könnte verwendet werden Zeigen Sie, dass es sich um ein Bild handelt, wenn Sie den Mauszeiger über das Bild halten.

Ich hatte nichts anderes zu tun, also machte ich ein Beispiel dafür, wie es funktionieren könnte http://photoshopmesta.net/1/screenshot/

Ach übrigens, ich habe das auf meinem iPad gelesen und ich muss gestehen, dass ich versucht habe, auf das Antwortbild zu klicken. Ich bin geradeaus gegangen, um dir +1 zu geben. Ich wünschte, ich könnte +2 geben , das war ein exzellentes Beispiel :)

Dies ist meine persönliche Lieblingsmethode, funktioniert aber nicht in allen Situationen, sondern ist ideal für Vollbild-Screenshots.

Es ist eine gute Idee, den Ansatz konsistent zu halten und gleichzeitig Ihre Screenshots auf subtile Weise hervorzuheben. Ich finde Apples Standard-Schlagschatten ein bisschen zu viel.

Ich füge nur einen 3px zentrierten Strich mit einer Deckkraft von 40% hinzu. Sie können einen Schlagschatten hinzufügen, wenn Sie möchten.

Je nach Kontext könnten Sie viel schlimmeres tun, als einen stilisierten "Monitor" -Rahmen zu verspotten (vielleicht in Apfelgrau?). Mit dem Bildbearbeitungsskript von Photoshop können Sie beim Batch-Verarbeiten von Bildern eine Aktion ausführen. Sie können also eine Aktion erstellen, die die Größe der Leinwand ändert, im "Monitor" über dem Screenshot ablegt und einen Standardhintergrund hinzufügt (für Screenshots, die das nicht ausfüllen) Frame) und speichert das Ergebnis als PNG oder JPEG.

Sie müssen nicht so aufwändig sein wie ein stilisierter Monitor, und wenn Sie nicht möchten, dass alle die gleiche Größe haben, können Sie mit Ihrer Aktion einem Bild beliebiger Größe einfach einen Verlaufsstrich hinzufügen. Auf diese Weise können Sie über Bridge ( Tools > Photoshop > Batch...) Batch-Prozesse ausführen und alle Aktionen ausführen.

Einige Dinge, die helfen würden:

• Schließen Sie abgeschnittene Teile der umgebenden Elemente ein. Sie können einen Schlagschatten und einen Effekt mit abgerissenen Kanten hinzufügen, um dies hervorzuheben. (Für den Effekt „Kantenriss“ erstelle ich eine Ebenenmaske und wende den Filter „Verzerren> Ozeanwellen“ von Photoshop mit einer kleinen Wellengröße (2) und einer kleinen Wellengröße (3) an.)
• Verkleinern Sie das Bild so, dass es nicht mehr mit den tatsächlichen Seitenelementen übereinstimmt. (Und möglicherweise können Benutzer auf das Vorschaubild klicken, um eine Vollversion anzuzeigen.)

Beispielsweise:

(Sie haben mich mit der Einstellung des Anrufbeantworters getäuscht. Sehr clever.) Aber was meine Antwort betrifft ...

Ich würde vorschlagen, einen Rahmeneffekt zu verwenden, um die Aufnahme vom Rest der Seite visuell signifikant zu machen. Geben Sie ihm einfach eine gezackte Papierkante. Das würde ich tun.

Wenn Sie nebenbei den gesamten Screenshot des Fensters verwenden möchten, aber keine großen Schatten und transparenten Bereiche haben, damit Sie schnell Ihr eigenes Styling anwenden können, geben Sie Folgendes in Terminal ein:

$ defaults write com.apple.screencapture disable-shadow -bool TRUE

Starten Sie dann entweder neu oder geben Sie Folgendes ein, um die Änderungen sofort zu sehen:

$ killall SystemUIServer

So kehren Sie das Obige um:

$ defaults write com.apple.screencapture disable-shadow -bool FALSE
$ killall SystemUIServer

über einen nützlichen Artikel auf tutsplus.com

Um Screenshots als solche anzuzeigen, habe ich einen hellgrauen radialen Verlauf und einen Kastenschatten verwendet. Diese Methode hat den Vorteil, dass sie nur mit CSS möglich ist - es ist keine Bildbearbeitung erforderlich:

background: -webkit-radial-gradient(white,white,#e5e6e7);
background: -o-radial-gradient(white,white,#e5e6e7);
background: -moz-radial-gradient(white,white,#e5e6e7);
background: radial-gradient(white,white,#e5e6e7);
box-shadow: 0px 0px 2px #555555;

Fügen Sie dem Bild ein Wasserzeichen hinzu:

: P