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. オブジェクトを選択します。

  2. シャドウのカラーを選択するには、プロパティインスペクターで「シャドウ」をクリックします。カラーピッカーが表示されます。

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

    • 正確な値がわかっている場合は、HSBA、RGB または 16 進数の値を指定します。様々なカラーモード間を簡単に切り替えることもできます。
    • カラーフィールドとカラースライダーを使用して色を調整します。これをおこなった場合、HSBA、RGB、16 進数の数値が適宜調整されます。  
    • スポイトツールを使用してアートボードから色を選択します。
    • カラースライダーを使用するか、パーセンテージの値を入力して、シャドウの不透明度を設定します。
  3. 次のオプションを指定します。

    X 軸オフセットと Y 軸オフセット

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

    B

    (ぼかし)シャドウの端からぼかしの開始点までの距離を指定します。

    シャドウの端からぼかしの開始点までの距離を入力します。シャドウをぼかすために、透明なラスターオブジェクトが作成されます。
    シャドウの端からぼかしの開始点までの距離を入力します。シャドウをぼかすために、透明なラスターオブジェクトが作成されます。
    シャドウの端からぼかしの開始点までの距離を入力します。シャドウをぼかすために、透明なラスターオブジェクトが作成されます。
    シャドウの端からぼかしの開始点までの距離を入力します。シャドウをぼかすために、透明なラスターオブジェクトが作成されます。

    ドロップシャドウを指定する
    ドロップシャドウを指定する

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

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

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

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

法律上の注意   |   プライバシーポリシー