Adobe XDのシェイプを徹底攻略
こちらは、Adobe XD Advent Calendar 2016の6日目の記事です2017年8月アップデートで、「外観をペースト」機能が搭載されたので一分情報を修正しています。(2017/09/11追記)
今のところあまりAdobe XDだけでアートワークを作るという方は少ないかもしれませんが、Adobe XDのデザインビューの中で最も使いやすい機能の一つにシェイプ同士の組わせ、Illustratorで言うところの複合オブジェクトがあります。
これをしっかり押さえれば、Adobe XDを使ったアイコンやイラストの作成が一気に楽になります。それでは見ていきましょう。
4つのシェイプ描画ツール、4つの演算合成
Adobe XDのシェイプを描くツールはシンプルに4つ。これしかないとも言えるし、これだけ覚えればだいたい絵は描けるとも言える絶妙なツール群です。
Adobe XDの演算合成はヘルプに書いてあるとおり4種類。パスの合成は、ベクター画像を扱う初心者には多くの場合難しく感じられるのですが、Adobe XDのものはシンプルで、失敗が怖くない作りになっています。
気軽に試せるのには3つ理由があります。
- 設定無しで非破壊で何度でもやり直せる
- プロパティインスペクタの固定位置のアイコンだけで合成・解除・種類変更が行える
- 階層構造も維持されるので、他の人のファイルをみて学習するのも簡単
合成後は目に見えるサイズで幅・高さが実際のサイズとして認識されます。このサイズが変わるのはかなり重要な話です。
また、シェイプを合成するとき、選択しているシェイプの中の一番下に位置するシェイプのスタイルが、合成してできるシェイプのスタイルになります。
写真やイラストは塗り扱いであり、塗りは扱いに注意が必要です。
Adobe XD上の画像の扱いをおさらい
塗りの扱いの話をする前に、写真やイラストなどをラスター画像(PNG、JPG、クリップボードデータ)で持ち込んだときの変形ルールをおさらいしておきましょう。ラスター画像は…
- 特殊な塗りの長方形シェイプ
- ロックを外さない限り縦横比を維持
- 表示領域を内包するサイズに自動的にリサイズされる
これらルールは、複合シェイプの結果できあがるシェイプの塗りにも適用されます。
そのため、合成の結果、下にあるシェイプより大きいと反映される場合は、元の画像が拡大されてマスクがかかったように見えます。
逆に、合成の結果が下にあるシェイプより小さいと判定されると元の画像は縮小されて切り抜かれたように見えます。
これをバグ報告して仕様ですと返されたアカウントはこちら…
実はスタイルのコピーにも使える
スタイルの複製ができない今限定お話です。一度合成して元に戻すと塗り・線・エフェクトのスタイルがコピーされます。
以下の2行は、2017/09/11に2017年8月アップデートの内容に合わせて書き換えました。
スタイルのコピーは2017年8月アップデートでついた、オブジェクトを選択してコピー(⌘/Ctrl+C)、スタイルを複製したいオブジェクトを選択して「外観をペースト(⌘+⌥+V/Ctrl+alt+V)」でできるようになりました。
いずれもXDにない種類のスタイルは複製できないのでそのまま情報を持った状態になります。プロパティの上書きは発生するけれどスタイル全体の上書きはされないと覚えておくと良いでしょう。
複合シェイプはシェイプ以外も合成できる
マスクとの違いでもありますが、複合シェイプはシェイプ以外も合成できます。合成できるオブジェクトの種類は次の通り。
- シェイプ(長方形、楕円形、直線、パス、複合シェイプ、ラスター画像)
- リピートグリッド
- テキスト
「シェイプでマスク」はその名の通り、マスクに使えるのはシェイプのみです。
リピートグリッドは全体にグラデーション効果をかけたいとき、画像に模様をつけたときに使いがってが良く、例えば、ビルの窓ガラス・窓からの明かりのような繰り返しに使うことができます。
現在のテキストはグラデーションの塗りができないのでかなり効果的です。
番外：「パスに変換」をどう使う？
複合パスが便利すぎてあまり出番がない機能です。Illustratorのアウトライン化や、Animateの分解と違って要素をバラバラにできるわけでもないのでAdobe XDで図形を書く場合には分離しなくて良いような作りにするほうがおすすめです。
パスに変換はフォントに有効
フォントのアウトラインを取りたいときに使います。以前はグラデーションの塗りを反映させるためにパスに変換していたのですが、9月更新以降は先に出した例のように、編集可能なままグラデーションなどの塗りを反映できるようになったので使用機会は減りました。
複雑な図形を描きたいとき
コレができても何の得にもならないので、Illustratorで描いて持ってくるほうが良いと思いますがAdobe XDで例えば正三角形を描くときに使ってますが、わざわざAdobe XDで最初からある図形以外を描く必要はなく、やはりあまり使用機会がありません。
番外2：画像のクリップって位置変えられないの？
画像のクリップには、3つの方法があります。
- シェイプに画像をドラッグ＆ドロップする
- 写真とシェイプを演算合成する
- 画像を先に配置して、シェイプでマスクをかける
シェイプでマスクのほうはグループと似た扱いなので写真自身の位置の調整やサイズの補正が行なえます。
リピートグリッド内の写真に対するクリッピングマスクに限ってはシェイプに画像をドラッグ＆ドロップの方式しか取れないので、位置の調整はできません。
参考までに今回のスクリーンショットを取るために作成したXDのファイルを公開しています。中を見てみたい方はダウンロードしてみてください。ただし、レイヤーの整理は撮影している部分しかやってないのでご注意ください。
