【Photoshop】画像の上に乗せた文字を読みやすくする方法

【Photoshop】画像の上に乗せた文字を読みやすくする方法

クライアント
ここの文字読みやすくしてください。
デザイナー
では文字の下に座布団を敷いて・・・
クライアント
あ、写真活かしたいのでそういうのやらないでください。
文字だけでお願いします。
デザイナー
なん・・・だと・・・!?
クライアント
3分間だけ待ってやる

こんなやりとり、したことありませんか?
画像の上に乗せた文字を加工してない風に見せたい時はこの方法でやってます。私はこの方法をナチュラルメイクと呼んでいます。
女子はスッと察してくれます。男子には絶望的な顔をされます。現実を受け止めて強く生きて欲しいと願っています。

動画と手順

  1. 元画像を複製(レイヤー名:ぼかし)
  2. ぼかしレイヤーをぼかす
    • 今回はぼかし(ガウス)で適当にぼかしましょう
  3. トーンカーブを作成
    • 文字の後ろが暗くなるようにしましょう
  4. ぼかしレイヤーとトーンカーブに、文字のまわりだけが見えるようにレイヤーマスクをかける
  5. ぼかしレイヤーとトーンカーブの不透明度を調整
  6. テキストレイヤーに光彩(外側)をかける
補足
ぼかしやトーンカーブの値は素材によって変わります。
この値にしておけばOK!なーんて値は残念ながらありません。その都度変えましょう。

まとめ

img

この画像はGIFアニメにしてあるのでじーっと眺めているとアハ体験ができます。
基本的にどんな画像でも同じことができますが、芝生や花畑、空撮した街並みなどのちょっとごちゃっとした画像と相性がいいです。慣れれば動画のように3分でできるようになります。 また、素材によっては光彩(外側)だけで十分な場合もあるので適宜調整してください。

【Photoshop】画像の上に乗せた文字を読みやすくする方法

ABOUTこの記事をかいた人

miyuki-chi

都内でwebデザイナーやっています。 DocBaseを使って社内向けに共有したナレッジが300件を超えたので、社外向けにリライトすればお小遣いを稼げるんじゃなかろうか・・・? という下心とWordPressをいじってみたい一心でこのブログを作ってみました。えへへ。