足立区にあるホームページ制作・管理の デザインオフィスすぴか SEO対策・動画制作もお任せください！
実際にデザインしながら
Adobe XDの使い方を解説します。
XDに搭載されている図形を描くためのツールは全部で五つです。ツールバーにある長方形ツール・楕円形ツール・多角形ツール・線ツール・ペンツールがそれにあたります。IllustratorやPhotoshopにもある、Adobeユーザーにはお馴染みのツールです。
違いとしては描画特化ソフトとして開発されているIllustratorと比べて実装されている機能が少ない点が一番に挙げられます。これだけ聞くと劣化版という印象が強くなってしまいますが、Illustratorにはない「背景のぼかし」機能があることなどXDにしかない機能もあります。更にAdobe CCシリーズは定期的にアップデートが行われますが、これは無料であるXDも例外ではありません。むしろ無料でありながら、XDならではの画期的な機能がアップデートで追加されていきます。
今後の成長が楽しみであるという点でも、やはりXDはイチオシのWEBデザインソフトです。
線ツールは直線は描けますが、曲線や折れ線は描けません。曲線や折れ線を描きたい場合は後述のペンツールを使用します。
ペンツールもIllustratorやPhotoshopを使ったことがある人にはお馴染みのツールです。曲線や自由曲線で描かれた図形、1本に繋がった折れ線など様々なものを描画することができます。アンカーポイントとハンドルを駆使して描画するため、初めての人には多少練習が必要になるかもしれませんが、扱いに慣れるとこれ1つで何でも描けるので、とても便利なツールです。
長方形ツールと多角形ツールで描かれた図形(シェイプ)は、簡単に角を丸くすることができます。
注意点として、ペンツールで描かれたパスの図形の場合はこの方法で角を丸くすることはできません。パスの図形はペンツールでアンカーポイントを増やし、1つ1つ角を丸くしていかなければいけません。
各図形ツールで描いた線はアピアランスを設定することで破線にしたり、角を落としたりすることができます。特に破線はとても便利なので覚えておいて損はない機能です。
その他にもIllustratorにもあるような線の効果がいくつか搭載されています。
長方形ツール・楕円形ツール・多角形ツール・ペンツールで描いたシェイプにはドロップシャドウを付けられます。ただしXDのドロップシャドウは1つのシェイプにつき1つまでしか付けられない簡易版です。IllustratorやPhotoshopのようにドロップシャドウの重ねがけをするためには、同じ図形をいくつも作って重ねるなど工夫する必要があります。
しかし上手に作ればニューモーフィズム(Neumorphism)を表現することも可能です。
長方形ツール・楕円形ツール・多角形ツール・ペンツールで描いたシェイプはぼかし表現を付けることができます。ぼかしの種類は2つ、オブジェクトのぼかしと背景のぼかしです。
オブジェクトのぼかしはPhotoshopで言うところのガウスぼかしに相当するものになります。
背景のぼかしは背景のぼかしを適用した図形が被さった下にある画像やテキストがぼけた表現になります。
背景のぼかしはIllustratorやPhotoshopにはない、XDならではの機能です。
多角形ツールで描いたシェイプはスター比率を変えることで星形を描画することもできます。コーナーカウントで頂点の数も変えられるので、一般的な五芒星だけでなく三菱や六芒星にすることも可能です。更にこれらを応用することでフチがギザギザだったり、波状の円も作れます。
各図形ツールで描いたシェイプは組み合わせることができます。これらは形状モードと呼ばれます。
Illustratorにもある機能で、合体・前面オブジェクトで型抜き・交差・中マドの四つの効果があります。前面オブジェクトで型抜きのみ、どのシェイプが前面にあるかで型抜き方が変化します。
