スクリーンショットをブラウザ風フレームに入れる

スライドに生のスクリーンショットを貼ると素っ気ない。すっきりしたブラウザ風フレームと余白を付けるだけでプロダクト画像に見えます。

このガイドで使う道具

やりたいこと

ドキュメント、README、ポートフォリオでは、信号ボタンとアドレスバーのあるウィンドウ枠にスクリーンショットを収め、周囲に余白を付けると仕上がりが良く見えます。

使い方

スクリーンショットを選び、ライトかダークのフレームを選んでPNGをダウンロードします。画像の上に汎用的なブラウザ風バーが描かれ、周囲に均等な余白が付きます。

  • ライト・ダークともニュートラルな配色で、スクリーンショット本体が主役のままです。
  • フレームは汎用表現で、特定のブラウザを模倣するものではありません。

具体例

1440×900のアプリ画面をダークテーマに入れると、上にバー、四方に余白が付いた少し大きめのPNGができ、そのままスライドに貼れます。

注意点

25MiBまでの静止JPG、PNG、WebPに対応。描画によるフレームのため、実機のベゼルや遠近法、複雑な影はありません。出力は常にPNGです。