マーカーネット株式会社

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

WEBデザイン

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

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

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

 

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

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

 

 

【①エンボス(隆起)】


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

 

 

【②エンボス(押下)】


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

 

 

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


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

 

 

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


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

 

 

【⑤文字の縁取り】


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

 

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

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-WEBデザイン

関連記事

全部無料!?写真をアートに加工できる【オススメ無料アプリ3選!】

こんにちは!デザイナーAです。 WEB制作時にサイトに掲載する画像を写真ではなく、お洒落なイラストにしたい…! でも制作費用は極力抑えたい~!!そんな方にオススメな写真をイラスト風に加工できるアプリを …

WEBトレンド! 全面に写真を配置した 最新サイトのご紹介 ~素敵サイトの旅 その3~

こんにちは!web初心者のKです! 今日は曇りですが、みなさんお風邪など召されていませんか? 私は雪対策にブーツとコートを少し前に購入しました! 備えあれば憂いなし! もう雪が来ても怖くありません!! …

Adobe XDの無料おすすめプラグイン8選 その②

Adobe XDの無料おすすめプラグイン8選 その②

こんにちは、デザイナーのAです。 今回は前回に続き、デザインの作業効率をUPするAdobe XDのおすすめプラグインを紹介します! Contents ⑥ VizzyCharts https://www …

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

【これから始めるWEB制作】adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その3~

こんにちは、ひよっこWEB製作者のMです。 皆様いかがおすごしでしょうか? 大寒の時期とあって毎日ひじょ~~~~に寒いですが、体調など崩されておりませんでしょうか? 私は、1月が今週で終わるということ …

コロナ太り解消!!!~会社の取組~

【photoshop】素材なしで手軽にテキストを水彩風にするテクニック!

暑い日が続いておりますが、デザインする時も季節感を演出できたら、より人の目を引くデザインになるかもしれないですね。 ここで夏にふさわしい、テキストを涼しげな水彩風に加工するPhotoshopテクニック …