フォトショップ

わずか10秒っ!Photoshopで部分的に色を変えたいときの【色の置き換え】の使い方&動画解説ダイジェスト

Photoshopで部分的に色を変えたいっ!」と思ったとき、単純な形状のものであれば変更したい場所を【選択ツール】を使って選択することで、任意のカラーに調整することができます。

しかし、選択したい色が複雑に散らばっている場合には、Sfiftを押しながらポチポチと作業しなければならなかったり(これが結構面倒くさい)、なかなか思い通りに選択することができず、頭を悩ませることがあります。

ここでは、Photoshopの【色の置き換え】を活用して、わずか10秒で服の色を変える方法を解説します

また応用編として、【服の一部分だけ色を変える方法】と【服の一部分を残してモノクロにする方法】も解説し、最後に3:32の動画ダイジェストも用意しているので参考にしてみてください。

わずか10秒で服の色を変える【色の置き換え】の使い方

 

Photoshopで画像を開き、イメージ 》色調補正 》色の置き換え をクリック。

change-color01

変化させたい色の部分をスポイトで抽出

change-color13

色を変えたくない肌の部分などは”あまり選択範囲に含まれない”ように、プレビューを見ながら許容量を調節(ちなみに肌にも服の赤色が反射されているので、バッチリと服の色だけ変えるよりも、ほんの少し選択範囲に含めたほうが自然な仕上がりになります)

change-color02

色相や彩度を調整して任意の色に変更

change-color03

このように、Photoshopの【色の置き換え】を使うことで、わずか10秒で任意の色に変えることができます

もちろん、その他の色も許容範囲を調節して色相・彩度・明度を調整しながら、さまざまな色のバリエーションを作ることができます。

woman4

【色の置き換え】を使って服の”一部分だけ”色を変える

【色の置き換え】は許容範囲の調節によって”同系の色を一気に変える”ことができるので便利ですが、逆に一部分だけ変更したい場合にはレイヤーマスクを併用しましょう。

背景の女性レイヤーは直接編集せず、右クリックして背景レイヤーを複製

change-color04

複製したレイヤーを選択している状態で、イメージ 》色調補正 》色の置き換え許容量、色相・彩度・明度を調整して任意の色に変更します

change-color05

服の色を変えたレイヤーにレイヤーマスクを追加

change-color06

ブラシ(黒)を選択して、口紅、ネイル、スカートなど色を変化させたくない部分(元々の赤い部分)を塗ると、塗った部分が透けた状態になり後ろの背景が表示されます

(レイヤーマスクを使用しなくても、服の色を変化させた前面のレイヤーを消しゴムツールで消すことで同様の効果が得られますが、レイヤーマスクに使い慣れておいたほうが応用範囲が広いと思います。)

change-color07

【色の置き換え】を使って服の”一部分を残して”モノクロにする

よくビールなどのCMで、モノクロの世界の中でビールジョッキだけが小麦色に輝き”主役を引き立てるような表現“を目にすることがありますが、このような表現をパートカラーと言います

ここでは【色の置き換え】を使って服の”赤のパートカラー”を残し、その他をモノクロにしてみましょう。

イメージ 》色調補正 》色の置き換え を選択し、残したい色(ここでは赤)以外の背景色などをスポイトで抽出したら、許容量を調節。彩度をMAXまで落としてOKをクリック

change-color08

抽出しきれなかった部分を繰り返し抽出して彩度を落としてOK

change-color09

微妙に抽出しきれなかった肌の色も、もう1度抽出して彩度を落としてOK

change-color10

最後にコントラストを調整したいので、調整レイヤーのトンカーブを追加

change-color11

画面全体を確認しながら印象を調整して完成です

change-color12

動画ダイジェスト

change-color-movie

Photoshopで服や髪、目や建物など部分的に色を変えた場合、選択ツールを使うのが一般的なようですが・・

色の置き換え】を活用することで、選択ツールを使わなくても簡単に任意の色に変更することができるので、ぜひ基本的な使い方と応用方法を身につけて、効率が求められるデザインの現場で役立ててください。

 

スリームデザインの無料メールマガジン

ピックアップ記事

  1. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…

関連記事

  1. webデザイン

    フォトショップ初心者でもできる!プロ並みの画像合成で自然になじませる方法を解説。

    フォトショップを使用して合成画像を作りたいと思っても、自然になじませる…

  2. webデザイン

    3秒で解決!Photoshopでシェイプを作ると毎回点線がついてしまうときの対処法

    Photoshopでシェイプを作るとなぜか毎回点線がついてしまう・・…

  3. webデザイン

    ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

    前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合に…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  5. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
PAGE TOP