スクリーンショットがスクリーンショットであることを示す良い(そして簡単な)方法は何ですか?


14

Mac OS X 10.6を使用していますが、システム画面グラブツールが気に入っています。デフォルトでは、ウィンドウ全体をつかむと、PNG画像を使用して、透明度のある少し下にシャドウ/グラデーションが配置されます。

ただし、たとえばWebページから画面の領域をキャプチャする場合、エッジは平らであり、特に既に存在する要素に似ている場合は、Webサイトの他の部分から区別するのが難しい場合があります。

だから私の質問はこれです-画像が実際にウェブサイトの一部ではないことを示す簡単で上品な方法は何ですか?5ピクセルの黒い境界線がおそらくそれを行うと思いますが、それは上品ではありません。OS Xが行う微妙なグラデーションが好きですが、それはすべてのスクリーンショットに適していますか、それは簡単に作成できますか?

photoshop自体を開かずに変換を適用するために使用できるスクリプトがあれば、本当に気に入っていますが、それは受け入れられる答えの要件ではありません。

ここに画像の説明を入力してください

^私が話している問題の例


5
いい例です。しばらくの間、Chromeにはレンダリングの問題があると思った
...-Farray

1
上品で、コンテキストがすべてです。5pxボーダーは上品なK車、ドロップシャドウは上品なスポーツカー、1pxボーダーは上品な高級セダンです。
horatio

1
ImageShackが画像を削除し、広告バナーに置き換えたようです。可能であれば、エディターツールバーの画像アップロードボタンを使用して画像(または同等のもの)を再アップロードしてください(Stack Exchangeのimgurアカウントにアップロードされます)。
イルマリカロネン

回答:


8

完全に私たちが話している画像の種類に依存します。

可能な方法:

  1. 「スクリーンショット」または「スクリーンキャプチャ」と言うコーナーのテキスト
  2. カメラアイコンコーナーまたはカメラアイコンのテキストと画像。
  3. その回答ボックスの場合、最も安全な方法は、別の色でオーバーレイし、ホバーで画像を表示することです。
  4. #3はそれほど明確ではない可能性があるため、そのオーバーレイにはテキストやアイコンを付けるか、オーバーレイの色がない場合は反転させることもできます。
  5. 何らかの境界線が良い指標になる可能性があります。

テクニックに関する限り:

#1と#2
スクリーンキャプチャプログラムの多くは、単一の画像または少数の画像に理想的な透かしを許可します。複数の画像の場合、Photoshopを使用して透かしを追加できます。またはHTML/CSSキャプション。

#3、#4、#5
これらはHTML/CSSキャプション付きで作成する必要があります。


助けることができなかったが、今...私のプロジェクトの1を考える... 「私が宣伝したくない...でも...」 http://photoshopmesta.net/sic/theTest/このような何かをするために使用することができ画像にカーソルを合わせると画像であることを示します。

他に何もすることがなかったので、私はそれがどのように機能するかの例を作成しましたhttp://photoshopmesta.net/1/screenshot/


ところで、私はiPadでこれを読んでいて、答えの画像をクリックしようとしたことを告白しなければなりません。私はあなたに+1を与えるためにすぐに行きました。私は2を与えることがしたいことは、優れた例だった :)


6

これは私の個人的なお気に入りの方法であり、すべての状況で機能するわけではありませんが、フルスクリーンのスクリーンショットに最適です。

スクリーンショットの例


これを達成する方法について詳しく説明したり、チュートリアルがある場所にリンクしたりできますか?
cwd

Ctrl + PrintScrnで画面を印刷し、Photoshopに貼り付けます。インターネットからモニターの写真を取得し、Photoshopで開きます。スクリーンショットをモニターの写真にコピーし、edit> transform> distortツールを使用して、コーナーを画面の形状にドラッグします。
スコットブラウン

4

スクリーンショットを微妙に強調しながら、アプローチの一貫性を保つことをお勧めします。Appleのデフォルトのドロップシャドウは少し多すぎると思います。

不透明度40%のショットに3pxの中央ストロークを追加します。必要に応じて、ドロップシャドウを追加できます。


ありがとう、例を追加できますか?
cwd

4

状況によっては、定型化された「モニター」フレームをモックアップするよりもはるかに悪いことをすることができます(おそらくApple灰色ですか?)。Photoshopのイメージプロセッサスクリプトを使用すると、画像をバッチ処理するときにアクションを実行できるため、キャンバスのサイズを変更し、スクリーンショットの上の「モニター」にドロップし、標準の背景を追加するアクションを作成できますフレーム)、結果をpngまたはjpegとして保存します。

定型化されたモニターのように複雑にする必要はありません。すべて同じサイズにしたくない場合は、任意のサイズの画像にグラデーションストロークを追加するだけです。これにより、Bridge(Tools > Photoshop > Batch...)からバッチプロセスを実行し、アクションですべてを実行できます。


4

役立ついくつかのこと:

  • 周囲の要素のカットオフ部分を含めます。これを強調するために、ドロップシャドウと引き裂かれたエッジのような効果を追加できます。(引き裂かれたエッジ効果の場合、レイヤーマスクを作成し、PhotoshopのDistort> Ocean Rippleフィルターを小さなリップルサイズ(2)と小さなリップルマグニチュード(3)で適用します。)
  • 画像のサイズを縮小して、実際のページ要素と同じスケールにならないようにします。(また、ユーザーがサムネイルをクリックしてフルサイズバージョンを表示できるようにすることもできます。)

例えば:

スクリーンショットの例


2番目のポイントはうまく機能しているようです。良いですね!
バーラト

3

(答え箱のショットで私をだましました。非常に賢いです。)しかし、私の答えに関しては...

フレーム効果を使用して、ページの残りの部分からショットを視覚的に重要にすることをお勧めします。ギザギザの紙のエッジを付けるだけです。それが私がしたいことです。


私はPhotoshopのプロではありません-それは簡単ですか?
cwd

白い長方形を簡単に作成し、その上にショットを配置してから、写真の周りをギザギザに消去することができます。Photoshopで簡単にできるはずです。
アンドリューデイビス

1

サイドラインとして、ウィンドウ全体のスクリーンショットを使用したいが、大きな影と透明な領域を持たないため、独自のスタイリングをすばやく適用できるようにする場合は、ターミナルに次のように入力します。

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

その後、再起動するか、次のコマンドを入力して、すぐに変更を確認します。

$ killall SystemUIServer

上記を逆にする方法は次のとおりです。

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

tutsplus.comの便利な記事経由


0

スクリーンショットをそのまま表示するために、ライトグレーの放射状グラデーションとボックスシャドウを使用しました。この方法には、CSSだけで可能という利点があります。画像の編集は不要です。

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;

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.