研Q98.写真に文字入れ、見やすい文字の入れ方を工夫してみる。
黒い縁取りの白文字だとほぼどんな写真にでも見やすい文字になる
©水村亜里(M Inamura)ブログに掲載する写真やバナーなど、写真に文字を入れたいことは多々あります。
当ブログのヘッダー画像は毎月入れ替えています。
旧館を開設して以来ほぼ3年間、毎月ヘッダー画像を作り替えながら試行錯誤してきた成果をシェアしたいと思います。
文字を埋め込む写真のサンプルとして今回は、無料で使用できる写真素材を大量に公開してくれている足成
（あしなり）からお借りした↓この写真を使用します。
足成の写真はクレジット表記もリンクも不要なので、クレジット表記やリンクがしにくい
ブログヘッダーやプロフィール写真の背景などに使いやすいですね。
この記事で使用する画像ソフトについて。
僕はふだんは、高速で簡単な写真加工なら手軽にできる無料ソフトイーファンビューを使っていますが、この記事ではレイヤーを使うことが不可欠なので、ペイントショップ・プロ
（Paintshop Pro）という本格的な画像ソフトを使っています。基本的な考え方は同じなのでレイヤーが使える画像ソフトならば、フォトショップ
（Photoshop)でも、フォトショップ エレメンツ
（Paintshop EL）でも、ほとんど同じことができると思います。自分のパソコンにインストールして使ったことはなく、会社のパソコンで使ったりパソコン教室の生徒さんが使っているというだけなので、細かい操作手順は違うかもしれません。
もしあなたが、フォトショップやフォトショップELをお使いでしたら、ぜひやってみてください。
僕は10年以上前からペイントショップを使っているので、10万円もするフォトショップやペイントショップ・プロと機能的にほとんど変わらない（と思われる）フォトショップELを買おうと思ったことはありません。
レイヤーとは？
アニメのセル画を想像していただけるとイメージしやすいと思います。
透明なフィルム（セル）を数枚重ねて、それぞれに背景・近景・人物などを描いてひとつの画像として合成する手法です。
アニメーションの場合は背景には同じ画像を使って人物のレイヤーだけを動かすと、背景は動かずに人物だけを動かすことができるというわけです。
写真に単色で文字入れをすると、文字が背景に溶け込んで見にくくなる。
サンプルの写真に白の単色で文字を入れてみます。
文字が背景の写真に溶け込んで見にくくなってしまっています。
白い文字じゃダメなのか。ということで、今度はオレンジ色の文字を入れてみます。
文字をオレンジ色にしてみても、見にくいことに変わりはないですね。
黒い縁取りがある白文字だとほとんどあらゆる場合でも見やすい。
写真に撮影日付を入れたりいろいろな経験の結果、黒い縁取りの白文字だとほとんどどんな写真に文字入れしても見やすくなることがわかっています。
これで、文字はかなり見やすくなりました。
ペイントショップ・プロの文字入れ機能は、カラー設定で背景色に設定した色の文字に前景色の色で縁取りをした文字を描いてくれます。
なので、黒を前景色に、白を背景色に設定して文字を入れると白に黒で縁取りした文字が描けます。
この方法では、まだレイヤー機能は使っていません。
では、レイヤーを使って文字をもっと見やすく、というよりも文字の周りの背景を見にくくしてみましょう。
文字の周りにボカシを入れる方法。
まずは普通に写真に白文字を入れます。あとからレイヤー機能を使いたいので、この場合は写真の手前に透明なレイヤーを重ねて、文字はその透明なレイヤーに入れます。
そして文字の輪郭を選択します。
透明なレイヤーに文字だけを入れると、文字の輪郭を選択しやすくなります。
選択した文字輪郭の選択範囲をアルファチャネルに保存します。↓
すべての選択範囲をいったん解除したあと、写真のレイヤーと文字のレイヤーの間に透明なレイヤーをもう一枚追加します。
そして追加したレイヤーに今保存した選択範囲をロードします。
次に選択範囲を拡大（太く）します。↓
↑この画像では選択範囲を拡大している様子がわかりやすいようにピクセルの数を10にしてありますが、実際のサンプルでは選択範囲を外側に30ピクセル拡大しました。
次に選択範囲を内側に30ピクセルぼかします。
このぼかした選択範囲の中を黒で塗りつぶせば、文字の周りに入れるボカシができあがります。
レイヤーは、手前から白文字、ボカシ、背景写真と重ね合わされています。
このできあがった画像をJPEG形式やPNG形式で保存（エクスポート）すれば文字が入った画像の完成です。
↑今回はボカシのレイヤーの不透明度を60％ぐらいにして、ボカシの色が濃くなり過ぎないようにしています。
関連記事：（別窓で開きます）
研Ｑ67.画像ビュア イーファンビューを使うとブログで必要な画像加工がほとんどすべてできます
研Q107.写真に矢印や枠囲い・文字などを入れる方法。
表示 - 継承 2.1 |
初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
ツイッター でも、更新案内を流しています。
RSSリーダーとは？⇒ ＲＳＳってなんなの？
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
記事末尾200posted by +M Inamura (水村亜里)
- 関連記事
-
- 研Q107.写真に矢印や枠囲い・文字などを入れる方法。
- 研Q98.写真に文字入れ、見やすい文字の入れ方を工夫してみる。
- 研Ｑ67.画像ビュア イーファンビューを使うとブログで必要な画像加工がほとんどすべてできます。
Tweet
