Web制作会社のマーズデザイン  »  デザイン会社 » RGBのままリッチなモノトーン・ダブルトーン画像を作る方法+アクションDL配布

デザイン会社

お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法+アクションDL配布

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法

いきなりグレースケールに変換? それは勿体無い!
RGBを活かしたままで、カラー写真を変換する方法。


印刷物ではちょくちょくあるが、WEBサイトでも
イメージとして、モノトーンやダブルトーンの写真を
使用することが時々ある。

「いきなり、グレースケールに変換してませんか?」

RGBとグレースケールを比べた時、
それぞれが持つことのできる画像としての情報には
大きな差がある。

グレースケールに変換した段階で、多くの情報が失われてしまう。
これは、非常に勿体無いし、実は後からの補正も大変だ。

しかし、今ならRBGのままモノトーン画像を作ることができる。

今日は、Photoshopの調整レイヤーと白黒機能を活用した
「RGBのままモノトーン・ダブルトーンにする方法」を紹介したい。


お題の写真

前回の「髪の毛の画像を1分で切り抜き」同様、
こちらが今回のお題の写真。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「お題画像」

先ほども書いたように、勿体無いので
いきなりグレースケールには変換しない。

また、後から再度補正できるように
「イメージメニュー」の「色調補正」も使わない。

ここでは、Photoshopの「調整レイヤー」を使う。


RGBのままモノトーン・ダブルトーン画像を作る方法


1)レイヤーパネルで「調整レイヤー」を作成

レイヤーパネルを開き、「調整レーヤー作成」をクリック。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「調整パネル」


2)調整レイヤーの「白黒」で補正

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「白黒調整レイヤー」

「白黒」の補正ウインドウが表示されるので、
大体、デフォルトで問題無いが、必要に応じて補正して
「OK」ボタンを押す。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「白黒調整ウィンドウ」

そうすると、レーヤーパネルに「白黒」調整レイヤーが作られ、
これで、いつでも自由に補正をやり直すことができる。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「白黒調整レイヤー」

ちなみに、現時点ではこのような仕上がり。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「白黒調整写真」

現状だと、写真が少しモヤっとしているので、
ここから、更に補正を行っていく。


3)調整レイヤーの「トーンカーブ」で補正

「白黒」と同様に、
「トーンカーブ」調整レイヤーを作成する。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「トーンカーブレイヤー」

「トーンカーブ」ウインドウが表示されるので、
左右の空白部分(=グレーのグラフの塗りがない部分)を
三角のつまみを動かして、詰める。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「トーンカーブウインドウ」

これによって、写真のトーンが引き締められ、
写真自体の仕上がりもこのように良くなる。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「トーンカーブ補正写真」

ちなみに、こちらも白黒同様に、
「トーンカーブ」レイヤーが生成されるので、
後から、いつでも自由に補正をやり直すことができる。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「トーンカーブレイヤー生成」

オプションとして、先ほどのモノトーン画像に
不透明度15%のピンク色の塗りをレイヤーで重ねると
このようなダブルトーン風の画像ができる。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「ダブルトーン画像」


追記:アクションを活用してより簡単に!


今回ご紹介した操作をアクション化したので
このブログで配布したい。ご自由にお使い下さい。

◆ファイルダウンロード:MonoAndDoubleToneAction.zip

念のため、PhotoshopCS3で読み込む方法をご紹介!


1)アクションパネルを開いてメニューを出す

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「アクションパネル」

2)メニューから「アクションを読み込み」を選択

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「アクション読み込み」

3)ダイアログでファイルを選択し、読み込む

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「ダイアログアクション読み込み」

4)読み込まれたのを確認し、内容を展開

今回、モノトーン用とダブルトーン用の2種類の
アクションを入れているので展開して、内容を確認。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「2種類のアクション読み込み」

5)どちらかのアクションを選択し「再生」ボタンをクリック

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「2種類のアクション読み込み」

このようにアクションを作って管理しておくと、
同じ様な作業があった際に非常に便利で、とっても効率的!


まとめ


調整レイヤーは、大分前のバージョンから存在するが、
実際、使っている人は少ないかもしれないですね。

特に、Photoshopの初期シリーズから使っている人は
その傾向が強そうですが、この機会に活用して欲しいです。

自分で納得できなかったり、クライアントの要望で
後から補正が必要になった時、非常に効率的です。

また、レイヤーとして複数パターンの補正を管理できるので
比較しながらより効果的なものを制作できます。

この方法が、多くのデザイナーさんの
素晴らしいWEBサイト・LP・印刷物の制作に役立てば幸いです。



ホームページ掲載以外にもWEBサイト制作実績・成功事例紹介多数ございます。
Webサイトからお問い合わせのお客様に限り、納品後3ヶ月のコンサルティング(期間限定)

Web制作の無料見積もり・お問い合わせ