ITエンジニア/デザイナ向けにオープンソースを毎日紹介

スクリーンショットをそのまま貼り付けるだけでは芸がありません。そこには余計な情報も入ってしまっているかも知れませんし、アイコンなどを消したいと思うこともあります。

そんな時に使ってみたいのがScreenshot.Rocksです。Webブラウザのモックアップを使ったスクリーンショットを作成します。

Screenshot.Rocksの使い方

適当な画像をアップロードすると、Webブラウザっぽい枠を表示します。

上に載せる情報は自由にカスタマイズできます。

さらに背景色を変更しました。

できあがった画像はダウンロードできます。

Screenshot.Rocksを使えばPhotoshopなどで作ったWebサイトのデザインをモックアップのWebブラウザ枠で囲めます。自分のWebブラウザでは機能拡張のアイコンや、アドレスバーのURLなど載せたくない情報になっていることもあるでしょう。Screenshot.Rocksで簡単にカスタマイズできます。

Screenshot.RocksはTypeScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Screenshot.Rocks | Create browser mockups from screenshots in seconds

daveearley/screenshot.rocks: Create beautiful browser mockups from screenshots

 

MOONGIFTの関連記事

  • DevRel
  • Com2