マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン

【Fireworks】写真の上の文字を読みやすくする方法

投稿日:2014年10月1日 更新日:

こんばんは、新人Aです。

 

今日は、写真に文字を乗せるときに読みやすくする工夫についてお話します!

00

たとえばこんな写真。
綺麗な夜景ですが、暗い空と明るいライトアップのコントラストで白い文字が若干負けてしまいます。
NETのあたりが読みにくく感じますね。
それでは、この文字を加工してみましょう!

 

 

【①エンボス(隆起)】

2
文字を浮き上がらせて読みやすくします。
「フィルタ」の横にある「+」をクリックし、「ベベルとエンボス」→「エンボス(隆起)」を選択します。
設定はこんな感じです。凹凸画できて少し読みすくなったのではないでしょうか?^^

 

 

【②エンボス(押下)】

3
先ほどのエンボス(隆起)と手順は同じですが、こちらは文字が凹んで見えますよね。

 

 

【③背景と文字の間に半透明の長方形作る】

4
本についている帯みたいで、こうするとかっこいい印象がありますね。
写真にもよりますが、黒で塗りつぶした場合は30~45%くらいがちょうどいいかと思います。

 

 

【④写真の明度を下げる】

5
文字は加工せず、写真の明度を下げました。
これは明度-40ですね。暗くなって色が濃くなったので白い文字が映えるようになりました!

 

 

【⑤文字の縁取り】

6
入力した文字にフチをつけます。
こうすると、ポップな雰囲気になりますね!
縁取り擦るというと黒を選んでしまいがちですが、背景からしっくり来そうな色をスポイトでとると写真になじむ気がします!

 

あれこれ試してみながら、写真に合った加工をしてみてください!^^

-WEBデザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

どこでも!いつでも!自由に使えるアイコン集

どこでも!いつでも!自由に使えるアイコン集

皆さん! お久しぶりです!こんばんは!! 心はいつも新人であるデザイナーKです。 この一ヶ月の間、私には色んなことがありました。 新しく買ったシャツが家のドアノブに引っかかって破れたり、ひどい風邪をひ …

2014年秋冬の流行色?

こんばんは、新人Aです。 すっかり気温も秋めいて来ましたね! 季節が変わると気になるのは流行色!ファッションやデザインには欠かせない流行色ですが、今年は何が流行っているんでしょう? ずばり、【ラディア …

WEB制作に便利!CSS3ボタンジェネレーター3選

WEB制作に便利!CSS3ボタンジェネレーター3選

もちろん使わない派の方もいるかもしれませんが、私は便利なツールがあればどんどん使っちゃいます。 WEB制作の時短にもつながる便利なジェネレーターをご紹介します。   「CSS3 Button …

手作り感溢れる癒しのWEBデザイン

手作り感溢れる癒しのWEBデザイン

フラットデザインやシンプル系、クール系のデザインとは違った手作り感溢れるデザインは気持ちが伝わりほっこりさせてくれます。 トレンドのデザインは進んでゆきますが、手作り系のデザインは今も昔もずっと残って …

知らなかった!じゃ済まされない。フラットデザインの落とし穴

こんばんわ!WEBデザイナー歴10年目に突入間近のHです! 以前、2015年に流行るWEBデザインのトレンドを3つ、ご紹介させて頂きました。 ①フラットデザインの更なる普及 ②クリックを出来るだけ減ら …