オブジェクトを選択します。
Adobe XD でオブジェクトの線、塗り、ドロップシャドウ、シャドウ(内側)を設定して、ブレンド効果を作成する方法を説明します。
オブジェクトへの塗りのカラーの適用
「塗り」の横にある長方形をクリックします。 カラーピッカーが表示されます。
スポイトツールを使用して、カラーの塗りつぶしをおこなうこともできます。 [i] キーで、塗りのスポイトツールを有効にできます。
- キーを 1 回クリックすると、塗りつぶしのスポイトツールが開きます。
- キーをもう一度クリックすると、塗りつぶしのスポイトツールが終了します。
以下のことを実行できます。
- 正確なカラー値がわかっている場合は、HSBA、RGB または 16 進数の値を指定します。 様々なカラーモード間を切り替えることもできます。
- カラーフィールドとカラースライダーを使用してカラーを調整します。 これをおこなった場合、HSBA、RGB、16 進数の数値が適宜調整されます。
- カラースライダーを使用するか、パーセンテージの値を指定して、塗りおよび塗りの不透明度を設定できます。
- スポイトツールを使用してアートボードからカラーを選択します。
- オブジェクトにグラデーション塗りつぶしを適用することもできます。 グラデーションについて詳しくは、グラデーションの作成と修正を参照してください。
カラーピッカーでオプションを変更しながら、アートボードで変更をプレビューできます。
Adobe XD では、16 進コードの短縮形もサポートされています。 例えば、0 を入力して Return キーを押すと、コード #000000 のカラーが自動的に表示されます。
後で使用できるように、カラーをスウォッチとして保存できます。 カラーをスウォッチとして保存するには、カラーピッカーの下部にある「+」アイコンをクリックします。
カラーピッカーでスウォッチの順序を変えるには、スウォッチを新しい位置にドラッグします。 スウォッチを削除するには、カラーピッカーの外にドラッグします。
オブジェクトへの画像の塗りの適用
まず、有効になっていない場合、塗りを有効にします(オブジェクトへの塗りのカラーの適用の説明を参照)。 次に、保存した場所(例えば、Finder や Windows エクスプローラー)から、画像をオブジェクトにドラッグします。
画像の塗りの切り抜きと配置
コンテナ内に配置された画像をダブルクリックし(オブジェクト/シェイプでマスク)、画像の塗り内の画像を切り抜き、位置を変更することができます(デスクトップからのドラッグ時)。 画像の塗りに切り抜きモードを使用して、次の操作を実行できます。
- 画像の塗りをダブルクリックして切り抜きモードにする
- 切り抜きモードで画像の位置を変更する
- 切り抜きモードの任意の場所に画像を移動する
この機能強化は Photoshop と Sketch からインポートされたファイルにも適用されます。 インポートされたファイルには、ソースアプリケーションで実行された画像の塗りと切り抜きが保持されます。
クリップボードからの画像のペースト
Adobe XD 以外の画像をオペレーティングシステムのクリップボードにコピーし、シェイプを選択し、オペレーティングシステムのクリップボードの画像を画像の塗りとしてペーストすることもできます。 シェイプが選択されているときにユーザーがファイル/読み込みを選択すると、画像でシェイプも塗りつぶされます。
線の作成および線カラーの指定
オブジェクトを選択します。
線の初期設定の幅は 1 です。 別の値を指定するには、線の値を変更します。
「線」の横にある長方形のカラーチップをクリックします。 カラーピッカーが表示されます。
以下のことを実行できます。
- 正確な値がわかっている場合は、HSBA、RGB または 16 進数の値を指定します。
- カラーフィールドとカラースライダーを使用してカラーを調整します。 これをおこなった場合、HSBA、RGB、16 進数の数値が適宜調整されます。
- スポイトツールを使用してアートボードからカラーを選択します。
- カラースライダーを使用するか、パーセンテージの値を入力して、線の不透明度を設定します。
- 枠線のサイズの編集と点線の作成
- 線端(バット、丸形、突出)と結合(マイター、ラウンド、ベベル)、内側の線と外側の線を指定します。
カラーピッカーでオプションを変更しながら、オブジェクトの線のカラーをプレビューできます。
後で使用できるように、カラーをスウォッチとして保存できます。 カラーをスウォッチとして保存するには、カラーピッカーの下部にある「+」アイコンをクリックします。
カラーピッカーでスウォッチの順序を変えるには、スウォッチを新しい位置にドラッグします。 スウォッチを削除するには、カラーピッカーからドラッグします。
オブジェクトがクローズパスである場合、線幅を指定できます。 線をパスに揃えるには、次のイラストに示すオプションのいずれかを選択します。
デフォルトでは、XD ではクローズパスの内側の線が揃えられます。
A. 線(内側) B. 線(外側) C. 線(中央) D. バット線端 E. 丸型線端 F. 突出線端 G. マイター結合 H. ラウンド結合 I. ベベル結合
線幅や線の整列を変更しても、(バウンディングボックスでは)オブジェクトの実際のサイズは変更されません。 ただし、オブジェクトを書き出す場合、使用される線の種類によってオブジェクトのサイズが変更される場合があります。
SVG は中央の線のみをサポートします。 内側の線または外側の線を持つオブジェクトを SVG として書き出す場合、書き出される画像のサイズは、中央の線がある場合のように表示されます。
Outline Strokeを使用して、線、パス、シェイプ、テキスト、画像、ブーリアングループから編集可能なベクターシェイプを作成します。シェイプを作成した後、コントロールを使用したり、プロパティパネルでプロパティを変更したりして、さらに編集することができます。
Outline Strokeを使用してアイコンを作成するには、次の手順に従います。
チュートリアル
Adobe XD のアウトラインストローク機能を使用すると、パス、境界線、およびシェイプを簡単にカスタマイズしてオブジェクトを拡大・縮小させ、それらを web 用の SVG に書き出すことができます。 アウトラインストロークを使用する方法については、Adobe XD のプリンシパルプロダクトマネージャーである Dani Beaumont によるこちらのチュートリアルをご覧ください。
視聴時間:2 分 50 秒
シャドウ(内側)とドロップシャドウは、照明効果をシミュレートすることで、デザインオブジェクトをよりリアルに見せます。
シャドウ(内側)
内側シャドウは、2D画像で3Dの奥行きをシミュレートするために使用できます。例えば、内側のシャドウはボタンの押下状態をシミュレートするのに役立ちます。
ドロップシャドウ
ドロップシャドウは、オブジェクトに3D効果を与えるだけでなく、ボーダーストロークを適用せずに境界感を表現することができます。
デザインオブジェクトにシャドウ(内側)またはドロップシャドウを適用するには、次の手順に従います:
オブジェクトをクリックし、プロパティインスペクターでドロップシャドウまたはシャドウ(内側)をクリックします。
カラーピッカーで、色を追加してシャドウの不透明度を設定します:
a. シャドウに色を追加するには、次のいずれかを行います:
- カラーの HSB, RGB, または16 進数値を指定します。メニューを使用してこれらのカラーモード間を簡単に切り替えることができます。
- カラーフィールドとカラースライダーを使用してカラーを調整します。 これをおこなった場合、HSB、RGB、または 16 進数値が自動で調整されます。
- スポイトツールを使用してアートボードからカラーを選択します。
b. シャドウの不透明度を設定するには:不透明度スライダーを使用するか、不透明度の値をパーセンテージで入力します。
選択した色と不透明度をカラースウォッチとして保存するには、カラーピッカーの下部にある+アイコンをクリックします。カラーピッカー内でスウォッチをドラッグして並べ替えることができます。スウォッチを削除するには、カラーピッカーからドラッグします。
デザインスペックを生成すると、その中のシャドウはデベロッパーがすぐに使用できるCSSに変換されます。
例
ニューモーフィズム
シャドウが適用されたオブジェクトのコレクション
チュートリアル
デザインに奥行きを追加したい場合、Adobe XD のシャドウ(内側)機能は真のゲームチェンジャーになります。Dani Beaumont(プリンシパル プロダクト マネージャー、Adobe XD)によるこのチュートリアルを見て、シャドウ(内側)の使用方法を学びましょう。" ] } ```
視聴時間:3 分.
ブレンド効果の適用
デザインカンバスで画像またはオブジェクト(シェイプ、テキストレイヤー、グループ、マスク、またはコンポーネント)を選択します。 プロパティインスペクターから、目的の描画モードを選択して適用します。 詳細は、ブレンド効果の追加を参照してください。
オブジェクトからの塗り、シャドウまたは線の削除
オブジェクトを選択します。 次に、プロパティインスペクターで「線」、「塗り」または「シャドウ」の隣にあるチェックボックスをオンにします。 塗り、線またはシャドウを元に戻す場合は、チェックボックスをもう一度クリックします。