– Adobe Illustrator –
文字の角を丸く。
フォントのとかし方

文字の角を丸くとかす

イラストレーターで 文字の角を丸くとかす 便利な方法をご紹介します。

私がデザインする際にイラストレーターでたまにやる手法に、文字を“とかす”というものがあります。とかすという言い方が一般的かどうかわかりませんが、文字の角の部分を丸くすることで、柔らかい印象を出すために行っています。

tokasi01

※この見本をつくる際のフォントサイズはおよそ28pt。以下の適切な数値はフォントサイズにより変動しますのでいろいろ試してみてください。

明朝体セリフ体(ローマン体)をとかす場合はこのページの下部もご覧ください。

 


 

Case.1 外角だけとかして丸みを与える

「か」で見てみましょう。
角の部分は丸くなっていますが、交差する部分は通常のままです。
tokasi02

 

①まず加工するフォントを選択した状態で効果パスパスのオフセットを選択。

 

 

②「角の形状」をラウンドに。
「オフセット」の数値をここでは-0.4に、で「OK」。

tokasi04

 

で、こうなります。

tokasi06

 

 

③続いて同じくパスのオフセットを。
ラウンドを選択し、今度は数値を0.4に。

tokasi07

 

すると最初の「か」の画像の様に外の角だけが丸くなり、
ゴシックと丸ゴシックの中間のような印象になります。

tokasi11

 

少し細い文字に同じ色の線を付けても同じような印象になりますが、それだと色を変更する際に面と線、両方変更するのがちょっと面倒だったりします(データ内容や場合によりますが…)。

ちなみに、明朝やセリフ体のフォントに線をつけて少し太くする場合も、線をつける代わりにパスのオフセット(ラウンド)をプラスでつけて太くすると、同じように手間が省けて便利です。

 


 

Case.2 交差する箇所にも丸みを。

次は交差する箇所にも丸みをつけて、より柔らかい印象に。この「交差する箇所の丸み」を「墨だまり」と言ったりするようです。

tokasi03

 

①まず、フォントを仕上がりに必要な太さより少し太めのものに。

tokasi12

 

 

②次に効果パスパスのオフセットを選択。

 

 

③「角の形状」をラウンドに。
「オフセット」の数値をここでは-0.5に、で「OK」。

tokasi09

 

こうなります。

tokasi08

 

 

④続いて同じくパスのオフセットを。
ラウンドを選択し、今度は数値を0.3に。

tokasi10

 

すると「墨だまり」のできた文字に。

tokasi13

 

ポイントは最初の「パスのオフセット」による「マイナスの数値」が、後の「プラスの数値」より大きい、という点です。この差が大きければ大きい程、墨だまりが大きくなります。

 

■ちなみに…

・この手法、フォトショップでぼかして二階調化してもできるのですが、手間がかかる上にテキストデータでなくなってしまうので、イラレで簡単にできるこちらの方法おすすめ。(ただ、かなり大きくとかしたい場合はフォトショップでないと難しい場合もあります。)

・このとかした文字データをグラフィックスタイルにドラッグして使用すると、他のオブジェクトやフォントにも同じ効果が簡単にかけられます。

・同じような事がしたくてやりがちなのが「効果」から「角を丸くする」を使う事。これだと丸くなったりならなかったり、文字の形が崩れてしまうのでおすすめしません。

tokasi15

 

・この効果、アピアランスウィンドウで細かく調節できるんですが、

tokasi17

 

そこからマイナスの効果とプラスの効果を上下逆にすると、今度は墨だまりはできるけど角は尖ったまま、ということもできたります。

tokasi16

 


 

 応用編 明朝体の“とかし”方

明朝体やセリフ体(ローマン体)の場合、上記のやり方だと細い箇所が潰れてしまい、大きくとかすことができません。

01

 

そこで明朝体をしっかりとかす場合、もう一手間加える必要があります。要は、細くて潰れてしまうなら、とかす前に太くしてやろう、という方法です。

基本的にはゴシックの際と同じ「パスのオフセット」を使用しますが、下記画像のようなオフセットの数値ならびにしてください。「パスのオフセット」は3回重ねます。
(数値はフォントサイズやフォントの太さによって変わります。この時のフォントサイズは約25ptです。)

02

 

するとこんな感じ、ちょっと柔らかい雰囲気に。

03

 

加工前はこれ。

05

 

数値をそれぞれ大きくするとこんな感じに。

04

 

■ちなみに…

フォトショップを使用すると、イラストレーターよりも大きくとかすことができます。

06

 

■フォトショップでのとかし方

①フォトショップに文字をコピーしてレイヤーを統合
フィルターぼかし(ガウス)
イメージ色調補正二階調化

(以下、パスとしてIllustratorに持って行くなら)
自動選択ツールで文字を選択→パスウィンドウよりパス化
⑤パスをコピーしてイラストレーターにペースト

 

フォントデータではなくなってしまうのが難点ですが、イラストレーターでは難しい大胆な丸みと墨だまりをつくることができます。

ゴシックと明朝、イラストレーターとフォトショップ、必要なデザインに合わせて、うまく選択し活用してみてください!

Twitter
Facebook
はてな
pocket

コメント

  • yuri5111 より:

    探し求めていたもののやり方をとても丁寧に説明してくださっていてとても助かりました。 ありがとうございます!

…必須項目

任意のお名前


*

コメントに使用できるHTMLタグ:....

日本語が含まれない投稿はスパム対策されますのでご注意ください。

記事一覧へ