Fireworksでできる文字装飾(縁取り編)

はじめに

前回に引き続き、Fireworksでできる文字の装飾について書きました。今回は縁取りの付け方をご紹介します。
前回ちょっと使った「フィルター」を使ってつけられる方法ばかりです。
※作業環境はCS5です。

引き続きこれに手を加えていきます

f:id:webdesignmaid:20130604195935g:plain
※文字の色を#000000に設定したテキストツールで「Fireworks」と入力したもの


- - - - - - - - - - -


縁取りの付いた文字

縁取り?ってこういうのです。文字の周りに別の色の線がついてますよね。
f:id:webdesignmaid:20130702175004g:plain
縁取りの付け方はいくつか方法があります。私が知っているのは下記3つ。

  • 線で縁取り
  • 光彩で縁取り
  • Photoshop ライブ効果で縁取り


- - - - - - - - - - -


線で縁取り

線で縁取りをする方法は、テキストオブジェクトを選択した状態でテキストの線の色を設定します。
f:id:webdesignmaid:20130703102706j:plain
ここから線のカラーパレットを開いて色を選び、線の設定は
f:id:webdesignmaid:20130702175721j:plain

  • 「パスに沿った中央揃え」
  • 「塗りをストロークに重ねる」にチェック

を入れます。
さらに、「ストロークオプション」から線の太さを設定します。
(線の太さの設定を変えないと「パスに沿った中央揃え+塗りをストロークに重ねる」設定にした場合、テキストとかぶってしまい、縁取りとハッキリわかるようにつかないため)

「ストロークオプション」をクリックすると、線の太さや種類を設定できます。
f:id:webdesignmaid:20130702180331j:plain
今回は線の種類を「鉛筆」で「1ピクセルの柔らかい線」、太さは5にしました。


- - - - - - - - - - -


光彩で縁取り

フィルターで設定できる縁取りの方法の1つは「光彩」を使う方法です。
f:id:webdesignmaid:20130702180623j:plain
フィルターの「シャドウと光彩」→「光彩」から
f:id:webdesignmaid:20130702181114j:plain
今回は

  • 幅:2
  • 色:#FFCC00
  • 不透明度:100%
  • 柔らかさ:0
  • オフセット:0

にしてます。
※柔らかさの数値を上げると縁取りがぼやけた感じに、オフセットの数値を上げると、テキストオブジェクトから入力したオフセットの数値分縁取りが離れた位置に設定されます。

できあがり

f:id:webdesignmaid:20130702181632j:plain

おまけ

できあがりのものの「光彩」の設定にプラスして、左は「柔らかさ」を「6」に、右は「オフセット」を「3」にしてみました。
f:id:webdesignmaid:20130702181638j:plain


- - - - - - - - - - -


Photoshop ライブ効果で縁取り

フィルターで設定できる縁取りの2つめの方法で、「Photoshop ライブ効果」を使います。
f:id:webdesignmaid:20130702182728j:plain
フィルターの「Photoshop ライブ効果」を選ぶとウィンドウが表示されます。
表示されたウィンドウの左側メニューから「線」にチェックを入れて、「サイズ」「位置」「カラー」をそれぞれ設定します。
f:id:webdesignmaid:20130702182735p:plain
今回は

  • サイズ:2
  • 位置:外側
  • カラー:#FFCC00

に設定しました。

できあがり

f:id:webdesignmaid:20130702183154j:plain


- - - - - - - - - - -


今回の方法のちがい?

なんで3種類も紹介したかというとそれぞれちょっとずつちがいがあるためです。
ちがいが分かりやすいように文字サイズが小さめ(11px)で縁取りが細めのものを用意しました。
f:id:webdesignmaid:20130702191552j:plain
フルサイズはこちら

1段目が「線」で設定したもの、2段目がフィルターの「光彩」、3段目がフィルターの「Photoshop ライブ効果」で設定したものになります。
縁取りはそれぞれ1pxついてみえるようにつけていますが、けっこうちがいがあるのがお分かりいただけるでしょうか。

まず「線」で設定したものは、文字が他のフィルターで設定したものに比べてちょっと太めになっています。例のように小さめの明朝体につけてしまうと、ちょっと文字がつぶれてみえてしまいます…。(「は」とか「ま」の円のところとか)

次にフィルター「光彩」で縁取りをつけたものは、他2つに比べて縁取りが太めです。(フィルターの幅は1で設定しています)
また、「線」や「Photoshop ライブエフェクト」で設定したものに比べると縁取り自体がくっきりしています。

さいごにフィルター「Photoshop ライブ効果」で縁取りをつけたものですが、他2つにくらべると縁取りが細いです。(「線」で設定したものの「い」のすき間はくっついてみえますよね)

縁取りをつけるのって縁取りをつけた文字が読みやすくなるようにつけるものだと思うので、縁取りの付け方は「線」でつけてもフィルターの「光彩」や「Photoshop ライブ効果」でつけるのでも慣れた方法でいいと思います。
それぞれのちがいを覚えておいて、なんか読みづらいなぁ…という時にいつも縁取りをつける方法以外の方法も試せるようにしておくのがいいかなーと思います。


- - - - - - - - - - -


おわりに

ここまでお読みくださりありがとうございました!
思いの外今回の記事が長くなってしまったので、影付き文字は次回になりそうです。
ひきつづき気長にお待ちくださいませ。