【🍕現役デザイナーオススメ😘】稼ぐスキルを確実に身につけるWebデザインスクール

【初心者向け】 カラーチャンネルとは?詳しく解説【photoshop】

Photoshopを学ぶ

こんばんは。ピザ好きのフォトピザです。
photoshopを始めたばかりの人、もしくは既に触っている人の中には「チャンネル」がよく分かっていない人も多いんじゃないでしょうか?

チャンネル?俺はテレビは見ないよ。youtube専門。

↑こんな感じになっちゃってる人でも大丈夫です。
最初から丁寧に解説していくので、少しの間お付き合いください。

そもそも、チャンネルとは?

「チャンネル」とは、色を表現する為に必要な要素をRGBCMYKなどのカラーモードで分解し、グレースケール画像で表したものです。

カラーチャンネルアルファチャンネルの2つ覚えておけば良いので、この2つについて説明していきます。

アルファチャンネルについては別記事で詳しく解説していますので、よければそちらをどうぞ。

この記事ではカラーチャンネルについて解説していきます。

カラーチャンネルとは?

RGBなら、3種類のカラーチャンネル(R,G,B)+合成チャンネルで構成されています。
文章だけだと分かりづらいと思うので、下の画像を見てください。

 

何かしら画像を開いた状態で、ウインドウ→チャンネルを選択すると、その画像の情報を見ることができます。
RGBであれば、レッド=R、グリーン=G、ブルー=Bの三色で表され、それぞれがカラーチャンネルとして分割されていますね。各々のチャンネルはグレースケール画像で表現されます。
この3つのチャンネルが合わさってはじめてフルカラー(合成チャンネル)として画像が表示されます。

上の画像を見てください。それぞれのチャンネルのみを選択することで、違った結果が表示されていますね。

なんでレッドとかグリーンが選択されているのに白黒なの?

ここ疑問ですよね。
これは、レッドであれば画像に赤色の情報がどれだけ含まれているか
ブルーであれば画像に青色の情報どれだけ含まれているか、という色の濃淡を256段階のグレースケールで表しているからです。

なので、レッドとかグリーン、ブルーチャンネルと表記されていますが、そもそもグレースケールで表現されているということですね。詳しくは下で解説しています。一旦は仕様ということでざっくり覚えてしまって問題ないです。

対象の色が含まれているほど白に近づき、色が含まれていないほど黒に近づきます。

つまり、白い所=色の情報がある 黒い所=色の情報がないと考えることができますね。

もう一度、分かりやすくレッドとブルーを比較してみます。

上で白い所=色の情報がある、とお伝えしましたが、その通りになっていますね。レッド選択時(左図)は、炎の部分が赤色なので
赤色の情報を持っている=白
になっています。
逆に、ブルー選択時(右図)は青色の情報が炎の色味の中にあまり入っていないことを表しています。

もっと詳しく

白い所=色の情報がある 黒い所=色の情報がないについてちょっと補足します。

先ほど、「色の濃淡で明暗を表している」とお伝えしました。
試しに、炎の1pxに思いっきりズームしてある1pxの色をとってきます。

この茶色い1pxをスポイトツールで色を調べ、カラーピッカーで確認してみましょう。
すると、、

これにより、それぞれの色の情報を256段階のグレースケールで表してみると(チャンネルパネルに切り替えると R,G,B それぞれのグレースケール画像が確認できます)比較してみるとこのようになります。

一目瞭然ですね。レッドチャンネルの方で見ると、茶色は赤色の情報を一番多く含んでいるので、白に近づいています。逆にブルーチャンネルの方でみると黒に近いので、茶色が青色の情報をほとんど含んでいないことが分かります。

白=色情報を持っている
黒=色情報を持っていない
が証明されました。

つまり、白黒で色情報の含有量を表していることになります。

 

ちょっと補足

因みに、R,G,Bそれぞれのチャンネルを「グレースケール画像で表す」というのはどういうことでしょう。
チャンネルパネルに移動して、例えばレッドチャンネルを見てみましょう。

レッドチャンネルは、今回の茶色の場合だと「R:137」でしたよね。

レッドチャンネルのみを選択した後、カラーピッカーで画素値を確認してみましょう。
すると、「R:137、G:137、B:137」と全て同じ値になっていますよね。

つまりR,G,Bそれぞれのチャンネルをグレースケール画像で表す、とはそれぞれの画素値を他のRGB要素にも全て適用させたものだということです。
光の三原色を用いて説明します。

引用:光の三原色ってなに?

光の三原色では、上記の画像がよく使われますよね。
この時、中心点は白(R:255、G:255、B:255)ですね。

この、赤+青=マゼンダって書いてあるところをみてください。
今中心の白にいるとします。
G値を減らしてみましょう。

いかがでしょうか。
マゼンダに近づいていきますよね。

光の三原色の図の通りですよね。
次にグレースケールの動画を見てみましょう。

RGB値を見ると、全ての値が等しいことが分かりますね。

三原色の図でいうと、R,G,Bを等しく混ぜ合わせているので中心点から動かず、逆にどれかの値を変えると色が現れるということです。

カラーチャンネルでは、色情報の含有量を白黒で表す仕組みの為、全ての値を揃える必要がある

(レッドチャンネル)Rであれば、他のGとBにも、
(グリーンチャンネル)Gであれば、他のRとBにも、
(ブルーチャンネル)Bであれば、他のRとGにも、
同じ値を補完して表現する必要があるということですね。
だから、それぞれのチャンネルがグレースケールで表されているというわけです。

レッドチャンネル(R:137)R:137、G:137、B:137
グリーンチャンネル(G:63)R:63、G:63、B:63
ブルーチャンネル(B:18)R:18、G:18、B:18

最初はとっつきにくいですが、とても重要ですので覚えておいてくださいね。

参考:【Photoshop】チャンネル・RGB・グレースケールって何?どうやって表の情報を読み取ればいいの?

今回はここまで。
次回は アルファチャンネルについて説明していきます。

タイトルとURLをコピーしました