マニュアル キャンセル

オブジェクトの線、塗り、ドロップシャドウおよびシャドウ(内側)の設定

Adobe XD でオブジェクトの線、塗り、ドロップシャドウ、シャドウ(内側)を設定して、ブレンド効果を作成する方法を説明します。

オブジェクトへの塗りのカラーの適用

  1. オブジェクトを選択します。

  2. 塗り」の横にある長方形をクリックします。カラーピッカーが表示されます。

    カラーピッカー
    カラーピッカー

    注意:

    スポイトツールを使用して、カラーの塗りつぶしをおこなうこともできます。[i] キーで、塗りのスポイトツールを有効にできます。

    • キーを 1 回クリックすると、塗りつぶしのスポイトツールが開きます。
    • キーをもう一度クリックすると、塗りつぶしのスポイトツールが終了します。
  3. 以下のことを実行できます。

    • 正確なカラー値がわかっている場合は、HSBA、RGB または 16 進数の値を指定します。様々なカラーモード間を切り替えることもできます。
    • カラーフィールドとカラースライダーを使用してカラーを調整します。これをおこなった場合、HSBA、RGB、16 進数の数値が適宜調整されます。  
    • カラースライダーを使用するか、パーセンテージの値を指定して、塗りおよび塗りの不透明度を設定できます。
    • スポイトツールを使用してアートボードからカラーを選択します。
    • オブジェクトにグラデーション塗りつぶしを適用することもできます。グラデーションについて詳しくは、グラデーションの作成と修正を参照してください。

    カラーピッカーでオプションを変更しながら、アートボードで変更をプレビューできます。

    注意:

    Adobe XD では、16 進コードの短縮形もサポートされています。例えば、0 を入力して Return キーを押すと、コード #000000 のカラーが自動的に表示されます。

  4. 後で使用できるように、カラーをスウォッチとして保存できます。カラーをスウォッチとして保存するには、カラーピッカーの下部にある「+」アイコンをクリックします。

    スウォッチの追加
    スウォッチの追加

    カラーピッカーでスウォッチの順序を変えるには、スウォッチを新しい位置にドラッグします。スウォッチを削除するには、カラーピッカーの外にドラッグします。

オブジェクトへの画像の塗りの適用

まず、有効になっていない場合、塗りを有効にします(オブジェクトへの塗りのカラーの適用の説明を参照)。次に、保存した場所(例えば、Finder や Windows エクスプローラー)から、画像をオブジェクトにドラッグします。

画像の塗りの切り抜きと配置

コンテナ内に配置された画像をダブルクリックし(オブジェクトシェイプでマスク)、画像の塗り内の画像を切り抜き、位置を変更することができます(デスクトップからのドラッグ時)。画像の塗りに切り抜きモードを使用して、次の操作を実行できます。

  •      画像の塗りをダブルクリックして切り抜きモードにする
  •      切り抜きモードで画像の位置を変更する
  •      切り抜きモードの任意の場所に画像を移動する

この機能強化は Photoshop と Sketch からインポートされたファイルにも適用されます。インポートされたファイルには、ソースアプリケーションで実行された画像の塗りと切り抜きが保持されます。

クリップボードからの画像のペースト

Adobe XD 以外の画像をオペレーティングシステムのクリップボードにコピーし、シェイプを選択し、オペレーティングシステムのクリップボードの画像を画像の塗りとしてペーストすることもできます。シェイプが選択されているときにユーザーがファイル/読み込みを選択すると、画像でシェイプも塗りつぶされます。

線の作成および線カラーの指定

  1. オブジェクトを選択します。

  2. 線の初期設定の幅は 1 です。別の値を指定するには、の値を変更します。

  3. 」の横にある長方形のカラーチップをクリックします。カラーピッカーが表示されます。

    カラーピッカー
    カラーピッカー

  4. 以下のことを実行できます。

    • 正確な値がわかっている場合は、HSBA、RGB または 16 進数の値を指定します。
    • カラーフィールドとカラースライダーを使用してカラーを調整します。これをおこなった場合、HSBA、RGB、16 進数の数値が適宜調整されます。  
    • スポイトツールを使用してアートボードからカラーを選択します。
    • カラースライダーを使用するか、パーセンテージの値を入力して、線の不透明度を設定します。
    • 枠線のサイズの編集と点線の作成
    • 線端(バット、丸形、突出)と結合(マイター、ラウンド、ベベル)、内側の線と外側の線を指定します。

    カラーピッカーでオプションを変更しながら、オブジェクトの線のカラーをプレビューできます。

  5. 後で使用できるように、カラーをスウォッチとして保存できます。カラーをスウォッチとして保存するには、カラーピッカーの下部にある「+」アイコンをクリックします。

    スウォッチの追加
    スウォッチの追加

    カラーピッカーでスウォッチの順序を変えるには、スウォッチを新しい位置にドラッグします。スウォッチを削除するには、カラーピッカーからドラッグします。

  6. オブジェクトがクローズパスである場合、線幅を指定できます。線をパスに揃えるには、次のイラストに示すオプションのいずれかを選択します。

    デフォルトでは、XD ではクローズパスの内側の線が揃えられます。

    線の形状
    線の形状

    A. 線(内側) B. 線(外側) C. 線(中央) D. バット線端 E. 丸型線端 F. 突出線端 G. マイター結合 H. ラウンド結合 I. ベベル結合 

    注意:

    線幅や線の整列を変更しても、(バウンディングボックスでは)オブジェクトの実際のサイズは変更されません。ただし、オブジェクトを書き出す場合、使用される線の種類によってオブジェクトのサイズが変更される場合があります。

    SVG は中央の線のみをサポートします。内側の線または外側の線を持つオブジェクトを SVG として書き出す場合、書き出される画像のサイズは、中央の線がある場合のように表示されます。

アウトラインストロークを使用してストロークをシェイプに変換する

アウトラインストロークを使用して、線、パス、シェイプ、テキスト、画像、ブールグループから編集可能なベクターシェイプを作成します。シェイプを作成した後、コントロールを使用するか、プロパティパネルのプロパティを変更することで、シェイプにさらに変更を加えることができます。

これらの手順を試して、パスのアウトラインでここに示すようなアイコンを作成します。 

  1. 任意の文字を入力します。例えば、カンバス上の テキストツールを使用して「S」と入力します。

  2. 文字「S」を選択し、オブジェクト/パス/パスのアウトライン
    を選択します。レイヤーパネルで次の 2 つのレイヤーを表示します。1)S - アウトライン、2)S

    テキスト文字に対してアウトラインストロークを使用します。
    テキスト文字に対してアウトラインストロークを使用します。

  3. 長方形をダブルクリックして、アンカーポイントを追加します。

  4. アンカーポイントをクリックしてドラッグし、カスタムシェイプを作成します。 

  5. シェイプを作成したら、プロパティパネルの塗りつぶしグラデーションを使用して、カラーを変えるなどの変更を加えることができます。

    カラーやスタイルを追加してシェイプをカスタマイズします
    カラーやスタイルを追加してシェイプをカスタマイズします

シャドウを追加する

トグル、ボタン、スライダー、イラストなどのオブジェクトにドロップシャドウとシャドウ(内側)を追加できます。

  1. アートボードにオブジェクトを追加します。

  2. オブジェクトをクリックし、プロパティインスペクターの「ドロップシャドウ」または「シャドウ(内側)」をクリックします。

  3. カラーピッカー内で次のように操作します。

    a. シャドウにカラーを追加するには、次のいずれかの操作をおこないます。

    • カラーの HSB, RGB, または16 進数値を指定します。これらのカラーモード間は簡単に切り替えることができます。
    • カラーフィールドとカラースライダーを使用してカラーを調整します。これをおこなった場合、HSB、RGB、または 16 進数値が自動で調整されます。  
    • スポイトツールを使用してアートボードからカラーを選択します。

    b. 不透明度を設定するには、不透明度スライダーを使用するか、不透明度の値を入力します。

    スウォッチを保存するには、カラーピッカーの下部にある + アイコンをクリックします。カラーピッカーでスウォッチの順序を変えるには、スウォッチを新しい位置にドラッグします。スウォッチを削除するには、カラーピッカーからドラッグします。

  4. プロパティインスペクターで、以下を指定します。

    X オフセットY オフセット:シャドウをオブジェクトからオフセットする距離を指定します。

    B (ぼかし):シャドウの端からぼかしの開始点までの距離を入力します。

シャドウ(内側)

オブジェクトにシャドウ(内側) を適用する
オブジェクトにシャドウ(内側) を適用する

ドロップシャドウ

オブジェクトにドロップシャドウを適用する
オブジェクトにドロップシャドウを適用する

ブレンド効果の適用

デザインカンバスで画像またはオブジェクト(シェイプ、テキストレイヤー、グループ、マスク、またはコンポーネント)を選択します。プロパティインスペクターから、目的の描画モードを選択して適用します。詳細は、ブレンド効果の追加を参照してください。

オブジェクトからの塗り、シャドウまたは線の削除

オブジェクトを選択します。次に、プロパティインスペクターで「」、「塗り」または「シャドウ」の隣にあるチェックボックスをオンにします。塗り、線またはシャドウを元に戻す場合は、チェックボックスをもう一度クリックします。

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合