Photoshopで選択した部分だけ色を変える方法

Photoshopで選択した部分だけ色を変える方法


デザインをしていると、「このパーツがもし赤だったら」「青だったら」・・・
とカラーバリエーションを考えることがありますよね。
同じ物でも色によってずいぶん印象が変わりますので、適した色を選びたい
ものです。今回はファッションを例に用い、このカラーバリエーションを考える
場合に便利な、『色を変えたい部分だけを変える』方法をご紹介します。

1.パーツを選択する

画像の中で色を変えたい部分を選択範囲にします。
選択に使うツールは任意ですが、選択する形の特徴によって使い分けると
簡単でキレイに選択できます。

選択ツール+境界線を調整 による選択

髪の毛やニット、ファーなどの服など微細な毛を選択するのはとても複雑に
見えますが、[境界線を調整]機能を使うことで簡単に行えます。

手順
1.クイック選択ツールやなげなわツールなどで大まかに選択範囲を囲います。
2.オプションバーの[境界線を調整]をクリックしダイアログを起動します。
3.表示モードをオーバーレイにし、半径調整ツールにチェックを入れ、境界線を
ドラッグし、赤い範囲をなじませます。
4.出力先を選択範囲にして[OK]をクリックします。

 

境界線を調整

ペンツールによる選択

洋服のように、はっきりと輪郭線がありながら直線でも弧でもない複雑な形の
場合は、輪郭線を辿って選択範囲を作ることが出来るペンツールがお勧めです。
髪の毛と接している部分は[境界線を調整]と複合して行うと綺麗に選択できます。

手順
1.ツールボックスでペンツールを選びます。
2.輪郭線を辿って点(アンカーポイント)を打っていきます。
3.アンカーポイントとポイント同士をつなぐ線(セグメント)で輪郭線を全周したら、
[ウインドウ]→[パス]でパスパネルを表示し、[パスを選択範囲として読み込む]を
クリックします。

 

ペンツールを使った選択

 

クイックマスクモードによる選択

肌の一部など輪郭線がないものを自然な選択範囲にするにはクイックマスク
モードがお勧めです。ブラシでペイントする感覚で自由な選択範囲ができます。
髪や洋服と接している部分など[ペンツール]や[境界線を調整]と箇所によって
複合して使います。

手順
1.ツールボックスで[クイックマスクモードで編集]をクリックします。
2.選択範囲にする部分をブラシの黒で塗りつぶします。(塗りすぎたら白で消せます)
3.塗り終わったらクイックマスクモードを解除し、選択範囲を反転(Shift+Ctrl+I)します。

 

クイックマスクモード

 

2.選択範囲をレイヤーにする

色を変えたい範囲を選択したら、選択範囲をレイヤーにします。
レイヤーを複製すれば、同じ選択範囲の色違いをパターンとして残すことができます。
また元データを扱わないため色変更による元データの劣化を防ぎ、元データへの
修復も簡単です。

手順
1.レイヤーにしたい選択範囲を含む画像を開き、
[レイヤー]→[新規]→[選択範囲をコピーしたレイヤー](Ctrl+J)で選択範囲部分
のみのレイヤーが作成されます。

 

選択範囲をレイヤーに

 

3.選択範囲の色を変える

選択範囲を任意の色に変更します。

色相・彩度による変更

服の色、車の色、ソファの色・・など選択範囲そのものを全く違う色味に
変える方法です。

手順
[イメージ]→[色調補正]→[色相・彩度](Ctrl+U)でダイアログを開き、バーを
スライドさせ、任意の色に変更します。

 

色相・彩度で色変更

 


「色彩の統一」をチェックするか、しないか?

色彩の統一をチェックすると、選択範囲ではなく画像全体で行うとより
分かり易いのですが、「単色カラー」に、正しくはグレースケールに色付けしたもの
になります。その特徴として、落ち着いた色味になります。
選択範囲の色を変える場合、あまりに鮮やかな色は浮いてしまうことも多いため
チェックを入れた方が自然に仕上がる場合が多いです。

 

レンズフィルターによる変更

肌の色を褐色にしたり、透明の水を有色にしたり、フィルターやカラーレンズを
通したように地の色を活かしながら、色を加えることで色を変える方法です。

手順
[イメージ]→[色調補正]→[レンズフィルター]で重ねたい色をフィルターから
選ぶかカスタムで任意の色を作ります。

 

レンズフィルターで色変更

 


「輝度を保持」をチェックするか、しないか?

輝度を保持をチェックすることで、明るさを保持できるのですが、適・不適は
出したい効果や色味によって異なります。
肌の場合、チェックを外した方がマットでナチュラルに仕上がります。

 

まとめ

いかがでしたか?
この方法でデザインのカラーバリエーションを容易に増やすことはもちろん、
色を変えたパーツの組み合わせを変えれば一気にパターンが増えますね。
また、実際に色を変えることが難しい場合のシュミレーション用、レタッチ
としても使えたりと、用途も様々です。
ぜひ、色も使い方も工夫してみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【CSS】サイトの読み込みを高速化するスプライトとは?