XDでアウトライン化する方法を知りたい
この記事は上記の課題に向けて作成しています。
XDのデザインデータを渡す場合アウトライン化する必要があります。
アウトライン化は制作現場では必須なので知っておかなきゃヤバイです。
そこで今回はXDでアウトライン化する方法を説明していきます。
この記事を読むメリット
- XDでアウトライン化する方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDでアウトライン化する方法
早速XDでアウトライン化する方法を説明します。
XDのアウトライン化
- 「オブジェクト」→「パス」→「パスに変換」
XDでは「アウトライン化」という項目が無く「パスに変換」になります。
Macのショートカットキー
- 「command」＋「8」
アウトライン化する時はテキストを選択した状態で行ってください。
Illustratorでアウトライン化する方法を記事にまとめています。
アウトライン化とは？
アウトライン化を知らない方向けに説明します。
アウトライン化とは、「文字データ」のテキストを「パスデータ」に変換する作業のことです。
テキストツールで作成した文字は「テキストデータ」として扱われます。アウトライン化することで文字が「パスデータ」に変換されます。パスデータに変換されることで文字が図形として扱われます。
わかりやすく説明するとアウトライン化することでテキストが文字のような形をした図形に変わるということです。
アウトライン化されたか確認する方法
文字がアウトライン化されたか確認する方法は簡単です。
確認したい文字にカーソルを合わせてダブルクリックします。
アウトライン化されていると文字の周りにたくさんの丸が表示されます。
このように表示されたらアウトライン化済みです。
XDでアウトライン化する際の注意点
XDでアウトライン化する際の注意点が2つあります。
XDでアウトライン化する際の注意点2つ
- グループ化されたものは一括で出来ない
- 複数の色を使っている場合1色になってしまう
グループ化されたものは一括で出来ない
XDはイラレと異なりグループ化されているものを一括でアウトライン化することが出来ません。
そのためグループ化を解除してからアウトライン化する必要があります。
イラレのように「全選択」→「アウトライン化」が出来ないのは不便ですよね。
面倒ですが全てのグループ化を解除してからアウトライン化をしましょう。
複数の色を使っている場合1色になってしまう
1つの文章に複数の色を使用している場合、アウトライン化すると末尾の色1色になってしまいます。
上記動画のように「XDで」と「アウトライン化」の色を分けた文章をアウトライン化した場合、文章全体が「アウトライン化」の色になってしまいます。
おそらくこれはXDのバグです。
そのため色の異なる部分ごとにアウトライン化する必要があります。
異なる色でデザインしている方は気をつけてください。
アウトライン化するメリット
アウトライン化をするメリットは下記の通りです。
アウトライン化のメリット
- 文字化けを防ぐ
アウトライン化で文字化けを防ぐ
アウトライン化せずにデータを渡すと文字化けの原因になります。
使用したフォントが受け手のXDデータ内に無い場合、近しいフォントに自動で変更されてしまいます。そのため受け手のデザインに文字化けが発生してしまうのです。
例えばあなたが「クレー」というフォントを使ったとします。
アウトライン化せずに送った場合、相手のXDに「クレー」のフォントが入っていないと他のフォントに自動で変換されてしまうのです。
フォントが変わるとデザインも大きく変わります。
そうならないためにもアウトライン化してから送りましょう。
XDはまだ発展途上
最後にまとめです。
- XDのアウトライン化は「オブジェクト」→「パス」→「パスに変換」
- Macユーザーは「command」＋「8」でも出来る
- グループ化されている文字は一括では出きない
- 複数の文字を使用している文章は1色になってしまう
XDのアウトライン化はイラレほど簡単ではありません。
XD自体まだ発展途上なので、今後のアップロードに期待しましょう。
XDに関する他の記事はこちら
