WEBデザイン

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

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

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

 

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

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

 

 

【①エンボス(隆起)】


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

 

 

【②エンボス(押下)】


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

 

 

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


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

 

 

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


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

 

 

【⑤文字の縁取り】


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

 

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

-WEBデザイン

関連記事

Photoshopの、これだけは押さえておきたい便利機能!!

Photoshopの、これだけは押さえておきたい便利機能!!

こんばんは! webデザイナーのKです。 しばらくマーカブログに登場できなかったのですが、 みなさま、いかがお過ごしでしょうか? 私はパソコンの不具合、というドキドキハラハラな出来事がありました。 お …

イラスト素材サイトのご紹介

イラスト素材サイトのご紹介

こんばんは、新人Aです。 今日は、イラスト素材のサイトさんをご紹介しようかと思います!       【いらすとや】 http://www.irasutoya.com/ フ …

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

Webデザインのトレンド手法のひとつとして、「レトロ感」や「ヴィンテージ感」のあるwebデザインがよく見かけます。 素材がなくても、Phoshopを使えば普通の写真もステキな素材になります! ここで写 …

【フラットデザインに+α】2014年のWebデザイントレンド3選

【フラットデザインに+α】2014年のWebデザイントレンド3選

近年、あちこちのサイトで見かけるようになったフラットデザイン。 レスポンシブと組み合わせたり、フルスクリーン表示にさせたりと応用法も様々に、オシャレなWEBサイトが増えていますね! そこで、今回はこの …

デザインリサーチとは?役割や実際の進め方を手法とともにわかりやすく解説!

デザインリサーチとは?役割や実際の進め方を手法とともにわかりやすく解説!

ユーザーのニーズと行動を深く理解した効果的なWEBサイトを作ることができれば、ユーザーに使いやすいWEBサイトが制作できます。ここで、注目を集めているのが「デザインリサーチ」という方法です。 デザイン …