【adobe XD】XDでフォントをアウトライン化する方法 | Dev Driven 開発・デザインチーム 【adobe XD】XDでフォントをアウトライン化する方法 | 働くひとと組織の健康を創る iCARE

BLOG

【adobe XD】XDでフォントをアウトライン化する方法

青木隆之
2021/07/02
+2

【adobe XD】XDでフォントをアウトライン化する方法

iCARE開発部マネージャーのアオキタカユキです

どうも皆様御機嫌いかがでしょうか?今回は「XDでフォントのアウトライン化」をする方法です。デザイナーの皆様にはお馴染みの「アウトライン化」。よくアウトライン化せずに入稿してしまって怒られるなんざデザイナーあるあるだとおもいます。そんなアウトライン化もXDで出来るんです。

ウェブデザインにおいてもアウトライン化は非常に重要です。たとえば文字にそって画像を切り抜いたりなんかしますよね。そんなときにはフォントをパスにして画像をマスクします。そのためにアウトライン化する必要があります。

結論から言いますとフォントを選択した状態で「command+8」でフォントをアウトライン化することができます。

大事なことなのでもう一回

「command+8」

せっかくなのでアウトライン化を使ったデザインでウェブサイトのトップイメージを作ってご説明いたします。
下の画像のように写真をフォントでマスクしたイメージを作成することをゴールとします!

(写真はiCAREのCOO・CTO・VPoEです)

【adobe XD】XDでフォントをアウトライン化する方法

1.テキストを配置

まずは写真の上にテキストを配置。iCARE開発部のクレド「DEV DRIVEN」を置きます。

【adobe XD】XDでフォントをアウトライン化する方法

2.テキストを選択して「command+8」

そしてテキストを選択して「command+8」でアウトライン化します。

【adobe XD】XDでフォントをアウトライン化する方法

3.画像をマスク

アウトライン化したテキストを使って写真をマスク。
(マスクする方法はこちらをご参考ください)

【adobe XD】XDでフォントをアウトライン化する方法

4.背景色の調整

最後は背景色を青にし、アクセントカラーを加えて完成!

【adobe XD】XDでフォントをアウトライン化する方法

おわりです。これでXDだけでテキストでマスクした画像を使ったデザインをすることができます。欲をいうならイラレと同じくショートカットは「command+shift+o」にして欲しいです、、、最初かなり迷いました。。。

XDはUIに特化したツールですが意外とデザイナーのかゆいところに手が届く機能もついております。なおかつ一ヶ月に一回のペースでバージョンアップをしてくれています。効率的にUIを作成してリッチにアウトプットしていきましょう!

+2