これは簡単! ブログの風景写真を綺麗でシャープにする方法

旅行先の景色を写真に撮りブログで紹介するのは、読者さんとその美しさを共感したいからだと思います。
また、お店のスタッフさんが店舗や商品撮影した写真をホームページで紹介するも、商売上ということもあるでしょうが、
「いいなと思ったもの」を紹介したい、共有したいという気持ちからだと思います。

風景や建物の写真は情報を正確に伝えるためにもキリリとした写真で紹介したいところです。
でもブログやホームページ掲載した写真をモニタで見ると、

「なんかぼやけた感じ」
「もっとビシッとしていた気がするのに」

と思う事が意外とありませんか?

今回は、レタッチソフトの定番 Photoshopのハイパスという機能を使って写真をシャープに仕上げる方法を紹介します。
複雑な操作なしでパッとできるテクニックですよ!

なぜモニタで見ると輪郭がぼやけて見えるの?

WEB上の写真がぼやけて見える理由は、

  • ブラウザの表示が100%表示になっていない
  • 表示画像のサイズを拡大している

これらが主な理由としてありますが、ブラウザの設定やブログ掲載時に気をつければ回避できます。

「それでも画像がぼやけて見える時は?」

デジカメで撮った写真をブログに載せる時って、写真サイズを縮小しますよね?
これは誰でもやることだと思います。
グラフィックソフトは画像が縮小されると、縮小されたピクセル数で元のサイズの画像に近づける補完を行います。(アンチエイリアスと言います)

この補完によって写真がぼやけたように感じるのです。
そこで、WEB作業を行う時は縮小した写真にシャープ(輪郭強調)をして、ぼやけた感じを解消しています。

「アンシャープマスク」ってわかりにくいぞ!

Photoshopで写真をシャープにする「アンシャープマスク」や「スマートシャープ」は有名ですが、これってわかりにくくないですか?

アンシャープマスクの設定画面

スマートシャープの設定画面

基本的は量(シャープの強さ)と半径(輪郭線の強調を適用する範囲)を調整します。
ですが、初心者さんにはどれだけの量と半径を設定すればよいのかわかりにくいですよね。

kanna
そもそも、なんで同じようなのが2つあるの?

って感じですしね。
これについて簡単に説明すると、

アンシャープマスク:全てのピクセルにシャープ処理を行う。
スマートマスク:過度に輪郭を強調しない。

yama
アンシャープマスクは「印刷用」
スマートシャープは「印刷以外」って感じです。

今回は初心者さん用に「シャープ」を使わない方法を紹介します。

「ハイパス」の方が簡単です

以前の記事でも書きましたが、Photoshopのフィルター類は微妙な違いはあれど「同じような結果」にたどり着く方法がたくさん用意されています。
とにかく自分にとって使い易い、コントロールしやすい方法を見つけることが一番です。

ブログやホームページでフリー素材の写真を綺麗に見せる3ステップ!

2017.01.21

というわけで、「ハイパス」によるシャープネス効果を紹介します。

元画像はこちら。富士山が一望できて思わずコンデジで撮った写真です。

こんな雄大な景色はカメラで撮りたいですし、ブログやSNSにも投稿したいです。
でも、よく見ると富士山の輪郭はあいまいだし、写真下部の街並みもかすんでいますよね。
せっかく自分の心が動いて撮った写真です。
少しでもきれいに仕上げて家族や友達にも「おっ」って言われたいですよね。←ボクは言われたいw
こんな時こそ、画像編集ソフトを少し使って見栄えを整えてみましょう。

Photoshopで「ハイパス」効果を加えた写真がこちら。

わかりやすいように強めに処理していますが、富士山や雲の様子、下に広がる街並みの輪郭がハッキリしていますよね。

Photoshopでの操作方法

実際の操作は以下の通りです。

  1. 元画像のレイヤーを複製
  2. 複製したレイヤーに「ハイパス」効果を加える
  3. ハイパス効果を加えたレイヤーの描画モードを「オーバーレイ」にする

それでは順番に進めていきましょう。

1.元画像のレイヤーを複製

写真では見にくいですが、Photoshopで写真を開くと、レイヤーというウィンドウがあります。
レイヤーウィンドウの右上の「▼」をクリックすると「レイヤーを複製」という項目があるので選択します。

複製されたレイヤーは「●●のコピー」と表示されます。
作例では、「元画像」というレイヤーを複製したので、「元画像のコピー」というレイヤーが作成されました。

ところで、レイヤーって何?

先ほどからレイヤーって言葉が出ていますが、みなさんはレイヤーってご存知ですか?
これって意外と知らない人が多いようです。(デザインをやっている人でも知らない人がいたのは驚きましたが、、)

イメージしやすいのが、アニメーションなどに使われる透明シート「セル画」です。

1枚のレイヤーをセル画(透明シート)と考えると、文字や絵の無い部分は透明なわけです。
なのでグラフィックソフトでは、複雑な作業やたくさんの情報をまとめる時はこのレイヤーを使って何階層にも分けて作成します。

背景レイヤーと画像レイヤー
Photoshopでデジカメの写真を開くと「背景」というレイヤーで開きます。この「背景レイヤー」は画像が透過されない「台紙」のようなもの。
セル画のように透過されるレイヤーを「画像レイヤー」と言います。

2.複製したレイヤーに「ハイパス」効果を加える

「ハイパス」効果を加えるには、レイヤーを選択後「フィルター」→「その他」→「ハイパス」と進みます。

ハイパスの調整画面になると、写真が均一なグレイで表示され被写体のエッジ部分だけがうっすらと見えます。
ここで半径を指定して効果の具合を決めます。
上の写真は半径5pixelになっていますが、これは数値が高すぎです。

目安としてはエッジ部分だけが線画として見える程度に調節することです。
今回は半径2pixelとしました。

ハイパス効果とは
被写体の輪郭(色と色の境界)を立体的に強調させ、全体を均一なグレイ画像にする機能です。

3.ハイパス効果を加えたレイヤーの描画を「オーバーレイ」にする

ハイパス効果を加えたレイヤーは輪郭が強調されましたが、グレイでは使えませんよね。
これは、レイヤーの描画モードを変えて解決します。

分かりやすいように、生成されたレイヤー名を「ハイパス2.0」と変えています。

まずは、レイヤーの描画モードを「オーバーレイ」にします。
モードを変更すると、これまでグレイだった写真がカラーで表示され輪郭が強調された画像になります。
これは特別な処理が加わったわけではなく、レイヤーの表示の仕方が変わっただけです。
ポイントは「オーバーレイ」に変えたことですね。

レイヤーの描画モード
Photoshopではレイヤーの描画モードを変えることで、下のレイヤーに対してどのような合成をするかを変更することができます。

レイヤーの描画モードを変えてみると分かりますが、ものすごい種類があります。
一つ一つについて解説しませんが、オーバーレイについて簡単に説明すると、

yama
上に重ねた画像に応じて、暗いところはより暗く、明るい所はより明るくなる表示方法。50%グレーは下のレイヤーに影響を与えません。

つまり、今回の処理ではハイパスによって描かれた輪郭部分(暗い部分)が表示をオーバーレイに変更することで強調され、全体のグレイの部分は下の画像に影響を与えないために見えなくなっているのです。

最後に、今回のまとめ

以上がハイパス効果とレイヤーの描画モードを使ったシャープのかけ方です。
アンシャープマスクやスマートシャープより設定する項目が少ない方法として紹介しましたがいかがでしょうか?

ハイパスは半径を調整するだけなので、画面を見ながら輪郭線が見える数値を設定しましょう。
後はオーバーレイにすればOKです。
作例ではレイヤーの不透明度を70%にしていますが、ハイパス効果が強すぎる場合はこの不透明度を調節してみましょう。

それでは、今回はこのへんで。

Photoshopの参考書としておすすめです!!

 

ひとり広報
Line@ 始めました !


  • デザインのコツに関する質問・疑問
  • デザイナーに仕事頼んだらこんな価格提示あったけけど、これって高いの?
  • 記事の「ここがわかりにくぞ!!」
  • デジカメ購入相談 など

「これってどうなの?」ってくらいの感じで気楽に使ってやってくださいな。

↓ コチラをポチッと

友だち追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA