ブレンド効果の適用

最終更新日 : 2023年2月6日

デザインをさらに改良するためのブレンド効果の最適な使用方法を説明します。

デザインで画像を使用するときに、シンプルな写真に目を引くユニークな効果を追加したい場合があります。例えば、ブランドカラーを効果として画像に追加して、視覚的に魅力的なデザインを作成したい場合などです。

描画モードを使用すると、あらかじめ定義された一連のモードを使用して、複数レイヤーを組み合わせることで、合成画像アセットを自動的に作成できます。

乗算、スクリーン、ハードライト、除外、輝度描画モードを使用して作成された効果の例をいくつか紹介します。

合成色に関する用語について

合成色は、選択されたオブジェクト、グループ、またはレイヤーのオリジナルカラーです。
基本色は、アートワークの元になるカラーです。

結果色は、合成によって生成されるカラーです。

基本色と合成色の混合は、選択した描画モードによって決まります。

A. 合成色 B. 基本色 C. 結果色

グループ	描画モード	デザインの結果
通常	通常	これは初期設定のモードで、描画モードは適用されません。
比較（暗）	比較（暗）	各画像内のカラー情報に基づき、基本色または合成色のいずれか暗い方を結果の色として選択します。合成色よりも明るいピクセルが置き換えられ、合成色よりも暗いピクセルは変更されません。
	乗算	各画像内のカラー情報に基づき、基本色と合成色を掛け合わせます。結果の色は暗いカラーになります。
	焼き込みカラー	各画像のカラー情報に基づき、基本色を暗くして基本色と合成色のコントラストを強くし、合成色を反映します。
比較（明）	比較（明）	各画像内のカラー情報に基づき、基本色または合成色のいずれか明るい方を結果の色として選択します。
	スクリーン	各画像のカラー情報に基づき、合成色と基本色を反転したカラーを乗算します。結果の色は明るいカラーになります。
	覆い焼きカラー	各画像のカラー情報に基づき、基本色を明るくして基本色と合成色のコントラストを落とし、合成色を反映します。
コントラスト	オーバーレイ	基本色に応じて、カラーを乗算またはスクリーンします。基本色のハイライトおよびシャドウを保持しながら、パターンまたはカラーを既存のピクセルに重ねます。
	ソフトライト	合成色に応じて、カラーを暗くまたは明るくします。画像上でスポットライトを照らしたような効果が得られます。
	ハードライト	合成色に応じて、カラーを乗算またはスクリーンします。画像上で直接スポットライトを照らしたような効果が得られます。
反転	差の絶対値	各画像内のカラー情報に基づき、合成色を基本色から取り除くか、基本色を合成色から取り除きます。明るさの値の大きい方のカラーから小さい方のカラーを取り除きます。
	除外	差の絶対値モードと似ていますが、効果のコントラストはより低くなります。
コンポーネント	色相	ベースカラーの輝度と彩度、およびブレンドカラーの色相を持つ最終カラーが作成されます。
	彩度	基本色の輝度と色相および合成色の彩度を使用して、結果の色を作成します。
	カラー	基本色の輝度と、合成色の色相および彩度を使用して、結果の色を作成します。
	輝度	基本色の色相および彩度と、合成色の輝度を使用して、結果の色を作成します。

ブレンド効果を作成するには

始める前に、描画モードの適用または変更時にどのようにオブジェクトを扱うかに関する簡単なルールを説明します。

アピアランス：プロジェクト全体に適用および反映されます。
マスターコンポーネント：デザインプロジェクト内のすべてのインスタンスに適用/反映されます。例えば、マスターコンポーネント内のオブジェクトの色を変えた場合、その変更は、デザインプロジェクト内のすべてのインスタンスにカスケードされます。
コンポーネントインスタンス：コンポーネントインスタンス内の適用された描画モードをオーバーライドします。
リピートグリッド：すべてのセルに適用されます。
相互運用性：Photoshop、Illustrator、Sketch、After Effects の使用時にブレンド効果を保持します。