バグ報告用に2枚のスクリーンショットを横に並べる
期待と実際、修正前と修正後。1枚にまとめた画像は2個の添付より確認しやすいものです。手早く作る方法をまとめます。
このガイドで使う道具
やりたいこと
「期待どおり」と「実際の画面」が1枚の画像に並んでいると、2つのファイルを行き来するよりレビューが速くなります。
並べる
画像結合を開いて2枚のスクリーンショットをドロップし、矢印ボタンで「期待・実際」の順にします。向きは横並び、高さが違う場合は位置を中央に。隙間は既定の16pxのままにすると境目が分かりやすく残ります。
- 順番は大切です。左=期待・右=実際と読者は想定します。
- 出力はPNGを選んでください。スクリーンショットの文字はJPEGだと滲みます。
具体例
1440×900のスクリーンショット2枚を16pxの隙間で横に結合すると、2896×900のPNGが1枚できます。片方が切り抜いたエラーダイアログのように背が低い場合でも、中央揃えなら上に張り付かずバランスよく置かれます。
先に整える
結合の前に、関係ない部分は画像切り抜きで削り、氏名・メールアドレス・社内ホスト名などは画像ピクセル化でモザイクをかけます。先に済ませておくと、元画像ごとに正しい位置へ処理できます。
- 制限: 2〜12枚、1枚あたり25MiBまで、間隔は400pxまで。
- 横に長すぎる結果はブラウザのcanvas上限に達することがあります。その場合は縦積みにしてください。