FireworksマニアTOP > Fireworksベーシック > Fireworksで、画像の上に乗せた文字を読みやすくするための9つの方法

Fireworksで、画像の上に乗せた文字を読みやすくするための9つの方法

カテゴリー: Fireworksベーシック

こんにちは!
今日は、Fireworksで画像に文字を乗せるとき、文字を読みやすくするための方法を9個ご紹介します♪

文字に影をつけたり、縁取りをしたら見やすい、ということはわかるけど、Fireworksではどのツールを使ったらいいの?という、Fireworksの使い方、フィルタ機能にまだ慣れていない方に特におすすめのTipsです。

赤や黄色、オレンジ、グリーンなどが
様々な濃さ、明るさで散らばった紅葉の画像です。

この画像に白で文字を置いてみました。

画像に白抜き文字

特にFの部分が見にくい感じですね。

これを読みやすくするために、どんな方法があるか、実際にFireworksのいろんなフィルタを試しながら進めていきたいと思います。

グローをかける

文字にグローを設定

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【シャドウとグロー】→【グロー】を選択します。

文字にグローがかかりました。

色は黒(#000000)で値は以下のように設定しています。

グローの値

エンボス(隆起)をかける

555-05

文字を盛り上がらることで影をつけ、文字を読みやすくします。

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【ベベルとエンボス】→【エンボス(隆起)】を選択します。

値を以下のように設定します。

555-06

あまり値を大きくしないことがポイントです。
値が大きいと嘘くさい感じの立体感になってしまいます…

エンボス(差し込み)をかける

555-07

文字をへこませることで影をつけ、文字を読みやすくします。
エンボス風になります。

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【ベベルとエンボス】→【エンボス(差し込み)】を選択します。

値を以下のように設定します。

555-08

こちらも、あまり値を大きくしないことがポイントです。
値が大きいと嘘くさい感じの立体感になってしまいます…

ドロップシャドウをかける

555-09

文字に落とし込みの影をつけます。
影の量よりぼかしの量を多くすることで、影ができる部分の反対方向にもうっすらと色を入れることができ、見やすくなります。

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【シャドウとグロー】→【ドロップシャドウ】を選択します。

色は(#000000)で
値を以下のように設定します。

555-10

画像の上に半透明のボックスをひく

555-11

長方形ツールで画像の上に長方形を描き、透明度を60に設定してみました。
長方形の色は#000000で塗りつぶしています。

555-12

画像自体の彩度・明度を変更する

555-15

画像の彩度・明度を調整することで文字とのコントラスト差を大きくし、見やすくします。

背景に敷いている画像を選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【カラーを調整】→【色相・彩度…】を選択します。

【色を付ける】のチェックボックスはチェックせずに、彩度と明度を調整します。
以下のように設定しました。

555-16

文字に縁取りをする(くっきり縁取り)

縁取りをする方法を2種類ご紹介します。
フィルタのグローを使う方法と、線を使う方法です。

以前からFireworksをお使いの方は、線を使う方法

線に色を付けて、【中心のストローク】に設定し、線の太さを調整する

で文字の縁取りを行っていた方が多いのではないでしょうか?

私もこのやり方を使っていたのですが、
実はCS4から文字の扱い方がPhotoshop寄りになって変更されたため、小さな文字(10px以下ぐらい)に線を適用すると、崩れてしまう文字が発生するようになってしまいました。。。

以下がサンプルです。
一番上が10pxでそのまません色なしで入力した文字
次が、線の色#999999で線でふちを設定した文字
最後がグローでふちを設定した文字です。

555-21

555-22

2番目のサンプルで、設定の【設】の字がつぶれてしまっているのがおわかりいただけるでしょうか?

そのため、Cs4〜では10px以下の小さな文字には線を使わず、フィルタを使って文字にふちをつけています。
エッジの処理は、線を使うやり方の方がキレイだと思うので
10px以上の文字に効果を適用する場合は線を使った文字の縁取りがおすすめです。

-線を使う-

555-23

入力した文字に線をつけて縁取りをする方法です。
入力した文字を選択した状態でプロパティパネルの線の色(鉛筆マークの横のカラーボックス)をクリックします。
【中心のストローク】に設定し、塗りをストロークに重ねるにチェックを入れてお好みのストロークの色を設定します。

555-24

– フィルタを使う –

555-26

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【シャドウとグロー】→【グロー】を選択します。

値を以下のように設定します。
色は#921E13に設定しました。

紅葉の色をとりました。色の部分をクリックしてカラーパレットが出た状態で、画面上の画像の好みの色の部分をクリックすると、クリックした部分の色が抽出されますよ☆

555-18

文字に縁取りをする(うっすら縁取り)

555-25

先ほど、線がおすすめ!と描きましたが、グローでしかできないものもあります。
それは、ふちをうっすら半透明にすることです。

設定方法は上記「文字に縁取りをする(くっきり)-フィルタを使う-」と同じです。
設定値の透明度の部分だけ50に変更すると
このようにうっすらと縁取りされます。

555-20

以上、Fireworksで文字を読みやすくする方法9つでした。

サンプルデータを大きく作りすぎてしまって、
記事に張り込んでいるサムネイルじゃみやすくなってないんだけど…というものもありますが…ごめんなさい。失敗した。。
クリックして拡大してみてください><

どのフィルタメニューも、初期設定のまま使うとFireworksでは大げさにかかってしまいがちなので、使えないじゃん!と思ってしまいがちなのですが、適切な値を設定すればばっちり使えます!!お好みの値になるように設定しながらいろいろ試してみてくださいね!

黒い文字を載せたいときは、文字を黒、設定している色を白(#ffffff)にするなど、値はそれぞれお好みで調整してみてください。

ちなみに今回のタイトルの文字は、グロー効果を適用していますが、ないとこんな感じです。

555-27

読めない…><

画像やサイトのイメージに合わせて、
いろいろ試してみてくださいね!

最後までお読み頂き、本当にありがとうございました。お気に召しましたらぜひ共有orクリップして頂けますと幸いです。またお会いできますように♪

Check このエントリーをはてなブックマークに追加 この記事をクリップ! コメントを見る Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

関連エントリー

このサイトを運営している人

YUKIと申します。福岡で働く会社員WEBデザイナーです。
フロッグマンオフィス所属。ショッピングカートのCS-Cartとかもやってます。

仕事以外でも趣味でいろいろサイトを作っています。
こういったTipsサイトや無料の素材屋さんにたくさんたくさんお世話になりながら勉強して、今ではWebデザインをお仕事としてやらせてもらえるようにまでなりました。

私もいつか誰かの役に立つサイトを作りたい!とずっと思っていたので、あいた時間を見つけてはこうしたサイトを作っています。
すこしでもお役に立てればとてもうれしいです^^

まわりの人にもご紹介いただけるとうれしいです。

たくさんの方に見ていただき、たくさんのご意見を頂くことは、記事の正確さや有益性を高めるだけでなく、新しい記事を書くモチベーションになります!
お気に召しましたらぜひまわりの方にもご紹介いただけるとうれしいです。リンクはご自由にどうぞ!

Fireworksマニア

バナーが必要な方はこちらをどうぞ♪
サイト名:Fireworksマニア URL:http://fw.v-colors.com/