creatersnest7

Illustratorで文字の形を崩さずに角丸にするには


ポスターやチラシの印刷物など、温かい印象を伝えるのに必要なのは、写真だけでなく、

「 文字の柔らかさ 」 が重要になってきます。

文字の角を丸くすることで、遠くから見たときの見やすさ、優しさや柔らかさが見ている人に伝わります。

下の画像の文字を、形を崩さずに、順番を追って、角を丸くしてみたいと思います。
下の画像のフォントで使用したのは、「 MS ゴシック 」、文字の大きさは「100pt 」 を使用してみました。

文字は適当に「角を丸くする」を入力してみます。

 

角を丸くする7

 

1「効果」の「スタイライズ」の「角を丸くする」は使わない

一番簡単に文字の角を丸くする方法として、メニューバーの「効果」をクリックし、
「スタイライズ」をクリック、「角を丸くする」をクリックする方法がありますが、
こちらが意図しない形に変形してしまった経験のある方が多いと思います。

下の画像がその変形です。

 

角を丸くする2

この文字では見づらく、優しさや柔らかさなどの表現を伝えるのは難しそうです。
文字の角を丸くし、見やすく、柔らかく表現するにはどうしたらよいでしょうか?
そこでおすすめしたいのが、「パスのオフセット」の2度がけです。
それでは、実際に作成してみましょう。

 

2 「パスのオフセット」の2度がけ

まず、角を丸くしたい文字を選択ツールで選択します。
次に、メニューバーの「効果」をクリックします。

 

次に「パス」→「パスのオフセット」の順番でクリックします。

パスのオフセットが表示されます。

オフセットの項目に、負の値 「-」 で数値を入力し、
角の形状の項目はそのままの「マイター」で、角の比率もそのままで 「OK」 をクリックします。

この場合のオフセットの数値は 「-0.6 」 と入力します。
( 数値は好みによって変えてもらっても構いません。 )

すると・・・ 下の画像の様に文字がシェイプされ、すっきりとした文字に変わったのが分かります。

 

角を丸くする3

 

先ほどの文字を選択したまま、もう一度メニューバーの「効果」をクリックし、
同じ様に「パス」→「パスのオフセット」の順番でクリックします。

1度目のパスのオフセットでは負の値を入力しましたが、
2度目の入力では正の値で数値を入力します。
( プレビューの欄にチェックを入れておくと、確認しやすく分かりやすくなります。)

また、この際のポイントは、角の形状の項目を「ラウンド」にしておく事がポイントです。
(下の画像をご覧ください。)

 

角を丸くする4

 

そして、「OK」をクリックします。
すると・・・

 

角を丸くする5

 

文字の形状を変えずに、角を丸くする事ができました。

2度目の 「 オフセット 」  の数値が大きいければ大きいほど、文字の丸みが強くなります。
しかし、あまりに1度目の 「 オフセット 」 との数値がかけ離れていると、視認性の低い文字に
なってしまいますので、そちらは注意が必要です。

この他にも、有料のプラグインを使うと、同じ様な効果を得ることができますが、
お値段はそれなりの物になりますので、あまり費用を掛けたくない方には、こちらでご紹介した方法を
是非おすすめします。

 

文字の形状を変えずに角を丸くするポイント

① 効果のスタイライズは使わない。

②パスのオフセットの2度がけ。

③オフセットのマイナス数値を入力

④オフセットのプラス数値を入力
(角の形状はラウンドにしておく。)

 

角を丸くする6

 

 

より丸くするには、アピアランスパネルを表示させ、上から2番目の「パスのオフセット」 をクリックし、
1度目の負の値よりも大きい数字を入れると、より丸くすることも出来るので、お好みで変えてみて頂いても
おもしろいと思います。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticlePhotoshopのカラーチャンネルを使って選択範囲を作成する方法