【adobe XD】XDでフォントをアウトライン化する方法
iCARE開発部マネージャーのアオキタカユキです
どうも皆様御機嫌いかがでしょうか？今回は「XDでフォントのアウトライン化」をする方法です。デザイナーの皆様にはお馴染みの「アウトライン化」。よくアウトライン化せずに入稿してしまって怒られるなんざデザイナーあるあるだとおもいます。そんなアウトライン化もXDで出来るんです。
ウェブデザインにおいてもアウトライン化は非常に重要です。たとえば文字にそって画像を切り抜いたりなんかしますよね。そんなときにはフォントをパスにして画像をマスクします。そのためにアウトライン化する必要があります。
結論から言いますとフォントを選択した状態で「command+8」でフォントをアウトライン化することができます。
大事なことなのでもう一回
「command+8」
せっかくなのでアウトライン化を使ったデザインでウェブサイトのトップイメージを作ってご説明いたします。
下の画像のように写真をフォントでマスクしたイメージを作成することをゴールとします！
(写真はiCAREのCOO・CTO・VPoEです)
1.テキストを配置
まずは写真の上にテキストを配置。iCARE開発部のクレド「DEV DRIVEN」を置きます。
2.テキストを選択して「command+8」
そしてテキストを選択して「command+8」でアウトライン化します。
3.画像をマスク
アウトライン化したテキストを使って写真をマスク。
(マスクする方法はこちらをご参考ください)
4.背景色の調整
最後は背景色を青にし、アクセントカラーを加えて完成！
おわりです。これでXDだけでテキストでマスクした画像を使ったデザインをすることができます。欲をいうならイラレと同じくショートカットは「command+shift+o」にして欲しいです、、、最初かなり迷いました。。。
XDはUIに特化したツールですが意外とデザイナーのかゆいところに手が届く機能もついております。なおかつ一ヶ月に一回のペースでバージョンアップをしてくれています。効率的にUIを作成してリッチにアウトプットしていきましょう！
