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

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

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

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

描画モード
ブレンド効果を使用して、色を使って魔法を生み出しましょう。

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

ブレンドに関する用語
A. 合成色 B. 基本色 C. 結果色 
  • 合成色は、選択されたオブジェクト、グループ、またはレイヤーのオリジナルカラーです。

  • 基本色は、アートワークの元になるカラーです。

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

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

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

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

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

    • アピアランス:プロジェクト全体に適用および反映されます。
    • マスターコンポーネント:デザインプロジェクト内のすべてのインスタンスに適用/反映されます。例えば、マスターコンポーネント内のオブジェクトの色を変えた場合、その変更は、デザインプロジェクト内のすべてのインスタンスにカスケードされます。

    • コンポーネントインスタンス:コンポーネントインスタンス内の適用された描画モードをオーバーライドします。
    • リピートグリッド:すべてのセルに適用されます。
    • 相互運用性:Photoshop、Illustrator、Sketch、After Effects の使用時にブレンド効果を保持します。
  2. デザインカンバスで画像またはオブジェクト(シェイプ、テキストレイヤー、グループ、マスク、またはコンポーネント)を選択します。プロパティインスペクターから、目的の描画モードを選択して適用します。

    Option Shift + / - (MAC)または Alt Shift + / -(WIN)を使用して、適用した描画モードのアピアランスレベルを切り替えることもできます。

  3. 適用した描画モードをプレビューするには、 を選択します。

制限事項

描画モードは、次のオブジェクトの動作ではサポートされていません。

  • アニメーションのないトランジションの開始時の自動アニメーションの変更でブレンド効果を使用した場合
  • ファイル、境界線、シャドウには、ブレンド効果を適用できません。

例とサンプルファイル

ブレンド効果を使用したポスターを作成するには、カンバス上の画像を選択し、プロパティインスペクターから、次の描画オプションを選択/適用して、目を見張るような結果を生み出せます。

  • ハードライト
  • 差の絶対値
  • スクリーン
  • 焼き込みカラー
元の画像
焼き込みカラー ハードライト
差の絶対値 スクリーン

チュートリアル

オブジェクトの色とアートボードの背景色をブレンドする方法、重ねられた複数のオブジェクトの色をブレンドする方法について、次のビデオをご覧ください。 

視聴時間:1 分


質問やアイデアがある場合

Adobe XD の描画モードから始めましょう。Adobe XD のインターフェイスは直感的に使用できます。カラーぼかしなどを使用して、創造性を簡単に発揮できます。

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティフォーラムに参加してください。皆様からのご意見をお聞きしております。また、作品をお見せください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー