web,design.photo,media

modeは札幌でウェブ・グラフィックデザイン、フォト(イメージ写真・商品撮影)を行う制作会社です。

覚えておきたい!Illustratorで入力したテキストに合わせて文字枠を作る方法。

: デザイン・イメージ

cover

みなさんこんにちは。

 

自分のメモと再確認の為にも、と言い聞かせ記事を書いている今日この頃です。

今日はIllustratorで文字枠を作る際に便利な方法をクリップ。

 

いつも、文字を入力した後に長方形ツールでオブジェクトを作って文字枠を作っていませんでしたか?

実はちょっとばかし楽になる方法があるんです。

あの、文字を入力した後にオブジェクトの長さも一緒に変えるもどかしさ。なんなんでしょう。

 

どうにかならんのか!と思っていた方々に是非オススメです。

「塗りの枠」と、塗りのない「枠線のみの文字枠」の両方の作り方をご紹介、それではどうぞ。

 

 

Illustratorで塗りのある文字枠をつくる

1.まずはテキストを入力します。

長い文字でも、短い文字でも英語でもOKです。

 

text

 

 

2.入力したテキストを選択したまま、アピアランスパネルから「新規塗りを追加」を2回クリック。

今回は塗りのある文字枠なので、「塗り」を選択して追加します。

 

新規塗りを追加

 

 

3.そうすると、アピアランスパネルに「塗り」が2つ表示されます。

2回クリックすると2つ表示されます。って当たり前ですねw

 

text3

 

 

4.その後、2つ塗りがあるうちの上と下の塗りの色をそれぞれ変えてみます。

今回は上の塗りをオレンジ系の色にし、下の塗りは黒にしました。

 

text4

 

 

5.下の黒の塗りを選択した後に、「新規効果を追加」から「形状に変換 > 長方形」を選択します。

text5

 

 

すると、下記のようなオプションパネルが表示されます。

 

text6

サイズは「値を追加」を選択して、「幅に追加」「高さに追加」で任意の値を入力してください。すると黒塗りの枠が付きました。

 

 

 

Illustratorで塗りのない、枠線のみをつける

 

上記の塗りの枠を作る際の説明で…

2.「入力したテキストを選択したまま、アピアランスパネルから「新規塗りを追加」を2回クリックします。」

というところがあったかと思います。

 

今回は「新規塗りを追加」ではなく、「新規線を追加」を1回クリックします。

 

text7

 

すると、枠線ができました。

 

text8

 

塗りの枠も、塗りのない枠も文字数によって枠も一緒に大きさが自動で変わってくれます。

枠内のテキストの修正の場合も便利ですよね。

フォントによっては上下中央の位置が気になるものもあるかも知れません。そんな時は下記のように「パスの変形 > 変形」から垂直方向を微調整してみてください。

 

text9

 

いかがでしたでしょうか。覚えておくと便利かもしれませんよ。

関連記事

ai

IllustratorでWEBデザインをする為の設定をしてみる&トライしてみる。

今までウェブデザインをする際には、Photoshopを利用されている方々がほとんどだったかと思います。 そう、ウェブはPhotoshopで紙はIllustrator。みたいなイメージでした。

studiovoice

ブックマークしておきたい!こってり系のクリエイティブ関連ウェブマガジン5選!!

寝る前に、食事をした後に、ネットサーフィンする方多いのではないでしょうか。 そうそう、トイレの時間も有意義なネットサーフィンの時間ですよね。   今、ウェブマガジン・キュレ

item

近代的でちょっと面白いアイテムを集めてみました。

車も昔は馬車でした。 洗濯機も洗濯板の時代がありました。それがテクノロジーの進歩によって様々なモノが自動化され、その中でプロダクトデザインも日々進化しています。 今回はこれからの暮らしの中

Canter free font

見出しなどで活躍しそう!! 縦長のフリーフォントを集めてみました。

見出しやタイトルのデザインで、コンパクトかつスタイリッシュにまとめたい時ってありますよね。   そんなときに活躍してくれそうな縦長のフリーフォントを集めてみました。 横幅が

cover

実際に行ってみたくなる、海外のオシャレな飲食店ウェブデザイン

飲食店にディナーやランチに行く前、お店のサイトをチェックする方は多いのでないでしょうか。 食べるのが大好きな人は1食への想いが強く、「絶対おいしいのが食べたい。」と思ってどんなものが提供されてい

テイストがなんともオシャレ!海外のフリー写真サイト!!

普段デザインをするに当たってフリー写真を使う場面、欲しい場面って多いですよね。 例えば、お客さんにウェブデザインをお見せするときなんかにはサンプルの写真データを当て込んだりすることもあるかと。

57d74ed102aa75ac03c8b81ee2e0e4d7

自然のデザインはすごいなあ。かなり変わった姿をした植物達。

みなさん観葉植物はすきですか? 植物のある生活っていいですよね。インテリアの一部にもなりますし、空気をキレイにしてくれるものもあるんです。   オシャレな花だけ見ててもつま

PAGE TOP ↑