Image Overlay

画像のオーバーレイは、ベースとなる画像の上に配置される視覚的なレイヤーです。テキスト、図形、矢印、ロゴ、デバイスの枠、色のかぶせ、別の画像などが該当します。オーバーレイとベース画像を合成したものが、見る人に表示されます。

オーバーレイはアルファ合成で結合します。オーバーレイの各ピクセルには不透明度の値があり、結果はその値に比例して、オーバーレイの色とベースの色を混ぜます。不透明度が100％のオーバーレイはベースを隠します。50％では両方が見えます。

オーバーレイは、別のレイヤーとして編集可能なまま残すこともできます。書き出しの時点でピクセルに統合することもできます。統合されたオーバーレイは、元のファイルがなければ後から取り除けません。

オーバーレイの種類

• 注釈：矢印、枠、楕円、線、テキストのラベル、手順の番号。
• ハイライト：注目する領域を覆う半透明の色。
• 隠すためのレイヤー：非公開の内容を覆うぼかしや単色の枠。
• ブランディング：ロゴと透かし。
• 枠：スクリーンショットを囲むデバイスやブラウザの枠。
• 比較用のレイヤー：部分的な不透明度で別の画像に重ねたもの。

オーバーレイの用途

ステップごとのガイドでは、矢印と番号付きのマーカーを使い、クリックする場所を示します。バグ報告では、枠を使って問題の箇所を指し示します。マーケティング用の画像では、スクリーンショットの上に見出しやロゴを重ねます。デザインのレビューでは、2つのバージョンを重ねて、ずれを見つけます。

オーバーレイの仕組み

エディターは、オーバーレイを位置、サイズ、色、重なり順を持つオブジェクトとして保持します。描画では、まずベース画像を描き、次に各オーバーレイを下から上の順に描きます。書き出しでは、すべてを1枚の画像にフラット化するか、プロジェクト形式でレイヤーを保持します。

Temposhotのドキュメントエディターでは、オーバーレイとして Text（T）、Rectangle（R）、Ellipse（O）、Line（L）、Arrow（A）と、Proのツールである Blur（B）、Click Marker（M）、Step Numbers（N）を使えます。[ キーと ] キーで重なり順を変えられます。エディターは、注釈を撮影された画像とは別に保持します。

よくある間違い

• オーバーレイで指し示すべきコントロールそのものを覆う。
• スクリーンショットの背景に溶け込んでしまう色を使う。
• 非公開のデータを隠すために、半透明の枠だけに頼る。
• オーバーレイが編集済みのバージョンにしか存在しないのに、元のフレームを共有する。注釈付きのフレームのTemposhot ZIPには、未編集の元のファイルが含まれていることを示す警告が表示されます。

今すぐ修正したい画像がありますか？

ブラウザで矢印やラベルを追加するには Screenshot Annotation Tool を使ってください。デザインされた背景にスクリーンショットを配置するには Social Image Composer を使えます。

よくある質問

書き出し後にオーバーレイを削除できますか？

フラット化されていない元の画像か、編集可能なプロジェクトが残っている場合のみ可能です。

透明なオーバーレイを保持できる形式はどれですか？

PNGとWebPは透明度を保持します。JPGは保持しません。

出典

• Alpha compositing（Wikipedia）
• Blend modes（Wikipedia）

関連リソース

• 注釈とフレーミング: ドキュメントエディターのツール。
• Macでスクリーンショットに注釈を付けて手順を説明する: 操作例。