WEBデザイン

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

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

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

 

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

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

 

 

【①エンボス(隆起)】


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

 

 

【②エンボス(押下)】


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

 

 

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


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

 

 

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


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

 

 

【⑤文字の縁取り】


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

 

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

-WEBデザイン

関連記事

デザインにおいて余白は重要!おしゃれに見える理由や効果などを例をもとにしてわかりやすく解説!

デザインにおいて余白は重要!おしゃれに見える理由や効果などを例をもとにしてわかりやすく解説!

デザイン設計においては、余白が重要です。適度に余白が配置されることで、コンテンツが見やすくなります。余白がなくコンテンツが敷き詰まった状態は、ユーザビリティが低いため改善が必要でしょう。 本記事では、 …

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

なるべく早く作ってほしい!! 今週末までに提出お願い!! ・・・・・・ヤバイ、時間がない。 こんな急ぎの依頼が来たときに、デザイナーさんの手助けをしてくれる素材サイト。 今回は、特定のジャンルに特化し …

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

STEP1. まず加工したい写真素材をPhotoshopで開きます。 STEP2. 背景の写真レイヤーの上に文字を入力し配置します。 STEP3. レイヤーパレット上でテキストのレイヤーを右クリックし …

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

このお姉さんにあえて漫画調にマーカーネットをアピールしてもらうと… ちょっと面白くて勢いのある効果が生まれますね。 昨今では漫画的な加工を取り入れるWEBデザインも増えてきました。 ですので、今回は写 …

【デザイナーをお助け!vol.2】まずは真似から!○○に特化したWEBサイトまとめサイト

【デザイナーをお助け!vol.2】まずは真似から!○○に特化したWEBサイトまとめサイト

「ピンとこない、なんか違う、と迷いすぎて時間がどんどん無くなっていく!効率悪っ!」 「デザインがパターン化されていつも似たようなサイトに・・・。この負のスパイラル、払拭したい!」 「そもそも私初心者な …