早いもので今年もあと1ヶ月で終わりですね。どうもこんにちはかわさきです。来月の諸々の忘年会が楽しみすぎて震えてます。正々堂々と美味しいものを飲み食いできるって最高ですね！
さてさて、今回は「袋文字のつくり方」です。
袋文字ご存じですか？周りにフチをつけて装飾されたテキストのことですね。スポーツ新聞の見出しを想像して頂くとわかりやすいでしょうか？
チラシ等で派手に見せたいとき、可読性を上げたいとき等に主に利用されます。
袋文字のつくり方というと…
「太古の昔、袋文字は同じテキストをピッタリ重ねて、下のテキストに線でフチを、上のテキストに塗りを設定して作られておったんじゃぁ…」
…という古参の皆さんの声が聞こえてきそうですが、実際私がDTPの仕事を始めたばかりの頃、先輩には上記の方法を教えてもらいました。（年がバレそう…）
こういうやり方ですね。
この方法最大のデメリットはテキストに変更が発生した時に、重ねている数だけテキストを修正する必要があるということです。
はっきり言ってそんなめんどくさい、かつ、ミスの発生しそうな方法は取りたくないですね…。（でもしてましたﾊﾊﾊ）
というわけで、今回は「テキストひとつでメンテナンスのしやすい＆応用の効きやすい袋文字のつくり方」をご紹介します。
メインはIllustratorになりますが、それだけだとちょっと物足りないかなぁ…ということで、同じようにPhotoshop・Fireworksでの袋文字のつくり方も合わせて書いておきます。
目次
Illustratorで袋文字を作る方法
まずは完成形
今回はテキストにグラデーション、外に白と黒のフチを二重で付けて、ぼかさないドロップシャドウ付きのものを作りたいと思います。
1.適当なテキストを一丁準備
お好きなテキストでどうぞ。
価格や「セール」「衝撃の事実」などだとそれっぽさが出るかもしれません。
2.アピアランスの「塗り」でテキストにグラデーションをつける
アピアランスパネルの右上から、「新規塗りを追加」を選択。
アピアランスの中に新しい「塗り」の行が追加されますので、選択してグラデーションパネルからグラデーションを反映させます。
今回は赤→オレンジで。 
ちなみにこの際、一旦テキストを選択してアピアランスパネルから初期の「塗り」を透明にしておくと仕上がりがキレイです。（※しておかないとグラデーションのフチに元の色が薄っすら見えてしまいます。） 
3.アピアランスの「線」でフチをつける
アピアランスパネルの右上から、「新規線追加」を選択。
2と同じように、線の色を設定し、太さを設定します。 
この状態ですと、線を太くすると文字の上に線が重なっちゃってて非常に見た目が悪いですね。
そこで、アピアランスパネル内の線と塗りの順番を入れ替えて、塗りのほうが上に来るよう設定します。
順番の入れ替えはドラッグアンドドロップで可能です。 
はい、こんなかんじになります。
この際、「なんか文字の角が尖ってるなぁ…」と思われましたら、線パネルの「角の形状」を「ラウンド結合」にすると丸っこくなります。このへんはお好みで。 
同じ手順で白のフチを足し、順番や太さを調整したものがこちらになります。 
だいぶ完成形に近くなってきました。
4.効果でドロップシャドウをつける
仕上げにドロップシャドウをつけましょう。
メニューの「効果」→「スタライズ」→「ドロップシャドウ」を選択。
すると、ドロップシャドウの設定画面が開きますので、値を設定。
今回はぼかさずに黒ベタで付けたいので、
- 描画モード：通常
- 不透明度：100％
- X軸オフセット・Y軸オフセット：3px
- ぼかし：0px
- カラー：黒
- 濃さ：100%
にて設定しました。
「プレビュー」にチェックを入れておけばどんな具合に仕上がるか様子を見ながら設定できます。
5.と、いうわけで完成
チラシのタイトルなどでお好きに粋にどーんと使っちゃいましょう。
Photoshopで袋文字を作る方法
続いてPhotoshopです。
Illustratorの場合、アピアランスをつかって作りましたが、Photoshopの場合は「レイヤースタイル」を使って作っていきます。
1.適当なテキストを一丁準備
ここはIllustratorと一緒です。
2.レイヤースタイルの「グラデーションオーバーレイ」でグラデーションをつける
レイヤーパネルの下「F」のマークからレイヤースタイルを出し、「グラデーションオーバーレイ」を選択。
3.レイヤースタイルの「境界線」でフチをつける（テキスト）
同じく、「境界線」を選択し、フチをつけます。位置は「外側」で。
色は白にしますが、キャプチャは分かりやすいように黒にしてます。 
4.テキストをグループ化
メニューから、もしくはCtrl（Command）+G でテキストをグループ化します。
なぜわざわざグループ化するのかというと、レイヤースタイルは1オブジェクト・グループにつき、1種1設定しかできないためです。今回は境界線を2回使用して、フチを2つつけたいため、一度グループ化して、新しくグループに境界線を設定するようにします。
5.レイヤースタイルの「境界線」でフチをつける（グループ）
今度はグループを選択して、「境界線」を設定します。
設定は3と同じような形で。
こんな風にグループの方に境界線が追加されました。
6.再度グループをグループ化
ここはお好みかもしれなのですが、5の際に一緒にドロップシャドウをつけることも可能なのですが、白フチのサイズで影がつくのでちょっと見た目が悪いです。
どんな風かというと、下のグループ化しないでドロップシャドウを付けた場合をご覧ください。
…というわけで、グループをグループ化して入れ子にします。
7.6のグループにレイヤースタイルでドロップシャドウをつける
ドロップシャドウの設定はIllustratorと同じようなかんじで。
Photoshopでいう「サイズ」がIllustratorでいう「ぼかし」にあたるので、0にしてます。
5.完成！
ほぼほぼIllustratorと同じ仕上がりですね。
Fireworksでで袋文字をつくる方法
え…これいるの……という目で見られそうですが、ここまで来たなら折角なのでご紹介。Fireworksたんもデキる子なんやでぇ……。
基本的な手順はPhotoshopとほぼ同じで、フィルター（Photoshopで言うレイヤースタイル）を使って作っていきます。
1.適当なテキストを一丁準備
これまでと同文。
2.テキストの塗りをグラデーションに設定
テキストの塗り設定パネルで色を変更しましょう。
3.フィルターの「Photoshopライブ効果」→「境界線」で線を設定
「Photoshopライブ効果」はその名のとおり、Photoshopのレイヤースタイルと同じような設定が出来る便利フィルターです。
細かい設定内容はPhotoshopの項目とほぼ一緒です。
4.テキストをグループ化
ここもPhotoshopと同じ理由なのですが、同じオブジェクトにPhotoshopライブ効果を1種1設定しかできないためです。
グループ化することで、もう一回境界線を設定することができます。
テキストを編集したい場合・元のテキストに掛けたフィルターを調整したい場合は、「ダイレクト選択ツール」でテキストを選択すると、グループ化前の状態を編集可能です。
ちなみにこのテキストなどのオブジェクトをグループ化してフィルターを重ねがけしていくやり方はFireworksでデザインする上で欠かせないテクニックなので、これを覚えると色々応用が効くようになります。
5.グループ化したテキストに「境界線」で線を設定
ここもPhotoshopの項目とほぼ同じなので詳細は省略。
6.フィルターにてドロップシャドウをつける
「フィルター」→「シャドウと光彩」→「ドロップシャドウ」を選択。
色は黒で不透明度を100、ぼかしを0にします。
7.完成！
前2つとほぼほぼ同じ仕上がり。
終わりに＆サンプルデータ
上記の手順を覚えておけば、簡単なものでしたら大体の袋文字に対応できるかなぁと思います。フチを増やしてみたりドロップシャドウをぼかしてみたり…etc
↑Illustratorで、サンプルを元に設定をいじって作ってみました。
チラシでよく見かける表現方法ですが、Webでもバナーやメインビューの制作時にアクセントになって便利です。
折角作ったので、サンプルデータとしてまとめてアップしておきます。参考にして頂いてもいいですし、スタイルをコピーして自由に使って頂いて構いません。（使用は自己責任でお願いします。）
※テキストは実際は未アウトラインですが、配布データはアウトライン化しております。
ではでは。
