【AdobeXD】文字をアーチ状にする方法を紹介!

【AdobeXD】文字をアーチ状にする方法を紹介!

takato(@n8takato)です!

XDで文字をアーチ状にする方法を知りたい

この記事は上記の課題に向けて作成しています。

XDでデザイン制作をしていると文字をアーチ状にしたくなる時があります。

この記事ではXDで文字をアーチ状にする方法を説明します。

この記事を読むメリット

  • XDで文字をアーチ状にする方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー3年目
  • web制作現場で学んだことを発信している人
目次

XDで文字をアーチ状にする方法

早速XDで文字をアーチ状にする方法を紹介します。

結論ですが、XDでは直接文字をアーチ状にすることが出来ません。

そのため他のツールで作成したものをXDに持っていきます。

今回紹介する方法は下記の手順です。

アーチ状の文字を作成する手順

  1. Illustratorでアーチ状の文字を作成する
  2. Illustratorで作成したデータをXDに配置する

Illustratorでアーチ状の文字を作成する

まずはIllustratorでアーチ状の文字を作成します。

Illustratorでは下記の手順で作成出来ます。

  1. 文章を作成する
  2. 文章をアーチ状に変更させる
  3. アーチを微調整する

①文章を作成する

始めにアーチ状にしたい文章を作成します。

文章の作成は文字ツールで出来ます。

始めに文字ツールで文章を作成します。
文字ツールで文章を作成

②文章をアーチ状に変更させる

続いて作成した文章をアーチ状に変更します。

文章を選択して「効果」→「ワープ」→「アーチ」を選択します。

すると選択した文章がアーチ状に変更します。

文章を選択して「効果」→「ワープ」→「アーチ」を選択します。すると選択した文章がアーチ状に変更します。
文字をアーチ状にする

③アーチを微調整する

アーチ状の形は微調整出来るので、気になる方は調整してください。

ワープオプションでアーチを微調整出来ます。
アーチ状の微調整

Illustratorで作成したデータをXDに配置する

Illustratorで作成したアーチ状の文章をXDに移行します。

データの移行はコピペで出来ます。

XDにIllustratorで作成したアーチ状の文章が配置されます。

Illustratorで作成したアーチ状の文字をXDに配置します。コピペで配置出来ます。
XDにアーチ状の文章を配置

Illustratorを使えば作れる!

XDではアーチ状の文章を直接作ることは出来ません。

Illustratorを活用すれば作ることが出来ます。

XDでアーチ状の文章が必要になったら一旦Illustratorで作成してください。

あわせて読みたい
現役webデザイナーがオススメするスクール3選! webデザインを学ぶのにオススメなスクールを知りたい この記事は上記の課題に向けて作成しています。 webデザインが学べるスクールがいくつか存在します。 その中でオス...
あわせて読みたい
【XD】プラグインのオススメ5選を紹介! XDのオススメなプラグインを知りたい この記事は上記の課題に向けて作成しています。 XDは多くのプラグインがあります。 その中からweb制作にオススメなプラグインを紹...
あわせて読みたい
AdobeXDとは?主な機能や使用される理由を紹介! XDってよく聞くけど何か知りたい この記事は上記の課題に向けて作成しています。 ここ数年webデザインではXDが使用されています。 しかしwebデザイン初学者の中にはXDと...
  • URLをコピーしました!
目次