![見出し画像](https://assets.st-note.com/production/uploads/images/55183062/rectangle_large_type_2_0499716eaf1a7687865d71c031956027.png?width=1200)
Adobe XDの2021年6月アップデート!新機能「シャドウ(内側)」「パスのアウトライン」「円錐形グラデーション」を使ってみる
2021年6月7日にXDのアップデート【XD41】がリリースされました。
アップデートで追加された機能は下記になります。
①シャドウ(内側)
②パスのアウトライン
③円錐形グラデーション
シャドウ(内側)などは、下の図の検索入力フォームのようなニューモーフィズムデザインのくぼんだパーツも再現できます!
■ニューモーフィズムとは:ベース(背景)から要素が押し出されていたり、窪んでいたりするようなスタイルのデザイン手法
それでは追加された機能を順番に解説します。
1.シャドウ(内側)
まずは「シャドウ(内側)」です。
長方形などのオブジェクトを作成すると右側の「効果」に「シャドウ(内側)」が追加されています。
長方形にシャドウ(内側)をかけてみました。
設定項目は、x方向、y方向、B(ぼかし)など、このあたりはドロップシャドウと同様です。
カラーの設定と、透明度も変更できます。
■「ドロップシャドウ」と「シャドウ(内側)」の違う点
シャドウ(内側)は「塗り・「線」がない状態でもシャドウ効果が維持されます。(ドロップシャドウは「塗り」か「線」がないと効果がかけられません)
今回はシャドウ(内側)を使って、こちらのニューモーフィズム風の検索フォームを作成してみました。へこんでる!
構造は下記のようになっています。
■長方形1(左上内側シャドウ):
塗りを背景色と同色にします。効果に「シャドウ(内側)」を黒っぽい色で指定します。これだけでもくぼんだ感じが出ますね。
■長方形2(ハイライト用):
塗りはなしで、効果に「シャドウ(内側)」を白に近い色で指定します。さらにX,Yの値を長方形1とは逆方向にします。(X,Yをマイナスの値にする)
■長方形1と2をぴったり重ねると、くぼんだ感じの入力フォームができると思います。
2.パスのアウトライン
次は「パスのアウトライン」です。
線・塗りがあるオブジェクトをアウトライン化して、「線」と「塗り」のオブジェクトに分けてくれます。
例えば。。
■長方形は「塗り」と「線」のオブジェクトに分割される。
■線は線オブジェクト内で「塗り」と「線」に分けられ、デフォルトでは「塗り」が選択状態となる。
試しに線をアウトライン化してみます。
アウトライン化の方法ですが、線オブジェクトを選択した状態で、メニューの「オブジェクト > パス > パスのアウトライン」を選択します。
複数の線で作成したオブジェクトを拡大・縮小すると、線・角丸などのサイズが保持されているので意図しない変形をしてしまうことがあります。
そんな時に「パスのアウトライン化」をしておくことでオブジェクトの拡大・縮小もうまくいきます!
また複数の線で作成したオブジェクトをSVG形式で書き出しする際も、アウトライン化しておくと書き出したSVGの形が崩れずに拡大・縮小が行なえます。
また、SVG書き出しの際に「パスオプション:パスのアウトライン」のチェックボックスが追加されました。
これはオブジェクトが「パスのアウトライン化」されていない状態でも、書き出し時にアウトライン化してくれる機能です。
オブジェクトのデータとしては後で形を修正したいのでアウトライン化したくないが、svg書き出しの際はアウトライン化したい!といった時に便利な機能になっています。
3.円錐形グラデーション
円錐形グラデーションはその名の通り円錐状にグラデーションを設定できます。楕円形オブジェクトだけでなく、長方形・多角形にも適用できます。
円グラフにグラデーションをかけたい時などに便利そうですね。
今回は下の画像のように、ボタン内側部分を円錐形グラデーションで作成してみました。
作成方法ですが、まず円を2つ作成し円錐形グラデーションをかける内側の円は、「塗り;なし」で線のみにしておきます。
円錐グラデーションは「塗り」のみに適用できます。
円形オブジェクトを選択し、メニューの「オブジェクト > パス > パスのアウトライン」を選択してアウトライン変換し「塗り」にしておきます。
アウトラインに変換された円形オブジェクトの「塗り」をクリックして「ベタ塗り」から「円錐グラデーション」に変更します。
グラデーションの色は全部で5ヶ所設定しました。右側の始点・終点は#DEDFE5の同色とします。
テキスト、アイコンを配置して完成です。
他にも、円錐グラデーションを編集時に表示される「ハンドル」を動かすことでグラデーションの始点・終点位置を変更することが可能となっています。
今回はここまでです。
XDの新機能いかがでしたか?
XDは更新頻度が高いので随時チェックして新しい機能を活用したいですね!
ちょっと気になった、更に知りたくなったという方は、
ぜひ、気軽に相談できるMentaをしております。
Mentaでメンターサポート
https://menta.work/user/22914
ストリートアカデミーで毎月講座も開催しています
https://www.street-academy.com/steachers/198346
また、Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san
webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec
もくもく制作サロンの入会
サロンではチャットで制作の質問を受け付けたり、相談会を開いて直接現役のデザイナーになんでも聞けるコミュニティです。
月額500円となります。
入会条件
業界未経験、経験者、Webデザインエンジニアに興味がある方まで!
誰でも匿名参加OKです。
参加方法
こちらのWebデザイナーフリーランスマガジンの購読購入をいただき、下記にてSlackコミュニティにご招待させていただきます。
https://note.com/hamasan918/m/me6f7be9ad4d8
この記事が気に入ったらサポートをしてみませんか?