普段ホームページ制作などをしていますが、Photoshopは欠かせないツールです。人にもよりますが、私の場合はサイトのデザインはすべてPhotoshopで作成し、必要な箇所だけをスライスして書き出しています。画像を加工したり、修正しながら全体のデザインを把握できるので非常に便利です。
一昔前ではIllustratorでデザインを構築していましたが、最近ではPhotoshopでもアートボードが使用できるため、こちらを使っている人も多いのではないでしょうか。
Web制作をする上で、美容院のホームページを作ったりする時に意外に要望が多いのが「被写体のヘアカラーを変える」、「同一人物の異なるヘアデザインを複数作ってほしい」などのご相談が多いです。
異なるヘアデザインを作ることはちょっとテクニックが必要ですが、ヘアカラーの変更は少しのコツですぐに変更することができます。
さて、今回は「Photoshop モデルのヘアカラーを簡単に変える方法」を作成します。
開発環境
| OS | Windows 10 64bit |
|---|---|
| バージョン | Photoshop CC 2018 |
| 作成時間 | 約１０分 |
| ステップ数 | およそ５ステップ |
| テクニックのポイント | 色域指定 / 範囲選択 / レイヤーカラー |
難易度
今回の難易度はブロンズレベル（初級者以上）です。
ダウンロード素材
今回利用する素材アイテムです。ダウンロードの内容は以下の通りです。
- 「model.jpg」・・・JPG画像（1920 × 1200）
[wpdm_button_template id=21345 style=”instagram” align=”left”]
- ※再配布・販売・その他サイトへのアップロードはできません。
- ※ダウンロードできない場合はコメントからご連絡ください。
最終的な完成図
ヘアカラーをチェンジする前のビフォー / アフターです。黒髪から、ブラウンに変更しています。その他は何も変更を加えていません。ちょっとしたコツでササッとカラーを変更することができます。
[twentytwenty]
[/twentytwenty]
Photoshop モデルのヘアカラーを簡単に変えるチュートリアル
このチュートリアルは、被写体のヘアカラーを簡単に変える方法をチュートリアル形式で解説しています。チュートリアルを実践するにあたり、素材「model.jpg」をあらかじめダウンロードしておいてください。
【手順１】キャンバスの作成
任意の大きさでキャンバスを作成します。ここでは「1920 × 1200 px」で作成しています。
【手順２】レイヤーの複製
モデルの画像を挿入し、レイヤーをコピーしておきます。コピーは「Ctrl + J」で簡単に複製することができます。
【手順３】色域指定で髪の毛だけ選択する
上部メニュー「選択範囲」＞「色域指定」を選択します。下記のようなパネルが表示されるので、許容範囲を「100ほど」に設定し、モデルの髪をスポイトで抽出します。髪の部分にも明るい部分と暗い部分があり、スポイトで抽出した場所によって結果が変わります。
色域指定のプレビューウィンドウ（白黒になっている箇所）を見ながら、髪の毛がより真っ白くなる箇所を選択しましょう。
※場合によっては何度かトライすることになります。
色域指定で指定された範囲を見てみましょう。下記のように、髪の毛がきれいに選択されていますが、顔の一部（目や鼻、口など）もかすかに残っています。レイヤーマスクを選択し、白色のハードブラシで余分な箇所を隠していきます。
消した後は下記のような感じになります。間違って髪の毛を消さないように作業しましょう。
【手順４】新規レイヤーの作成＆クリッピングマスク
新規レイヤーを一番上に作成し、下のレイヤーに対してクリッピングマスクを設定します。
【手順５】レイヤーの種類を「カラー」に変更する
描画色を「#f89f12」に変更し、手順４で作成したレイヤーにソフトブラシで髪の毛の部分だけを大胆に塗っていきます。あとは、レイヤーの種類を「カラー」に変更します。
これで、下記のように違和感なくブラウンのヘアーにすることができました。あとは、同じ手法でカラーを変えていけば、それぞれ異なるヘアカラーを作ることができます。
完成
これで完成です。最後の微調整として、色相・彩度をやや強めに適用してもOKです。
あとがき
さあ、どうだったでしょうか。
わずか５ステップなので、色域指定の使い方さえ覚えれば、さして苦労せずに簡単にヘアカラーを変更することができます。今回の被写体は人物でしたが、このテクニックは車などのオブジェクトにも利用することができます。
Photoshopはほんの少しのテクニックさえ覚えれば、写真の雰囲気をガラリと変えることもできます。ぜひ、身につけておきましょう。
次回はスキンや合成のテクニックを記事にしていきたいと思います。
アッと驚くPhotoshopチュートリアル
- Photoshop 簡単な影の作り方３パターン ＋ リアルな影など
- Photoshop モデルと彫像のコンポジット チュートリアル
- 日本語で学べるPhotoshopチュートリアルまとめ
- Photoshop チュートリアル 20選
- Photoshop クリエイティブな光のエフェクト表現 + ダウンロード
- Photoshop CC 簡単にチョコレートの背景を作るチュートリアル
- Dimension × Photoshop で作る3Dストロークテキスト
- Photoshopでアーティスティックな流体アートを簡単に作る方法
- Photoshop 炎と人のコンポジット・テクニック / 簡単チュートリアル
- Photoshop 氷のようなフローズンエフェクトのチュートリアル
- チラシのデザインどうしよう?! 素人が学ぶべきデザイン基礎10個
- Photoshop 顔をリザードに変形させるレタッチ
- Photoshop ビンテージ写真を簡単に作る方法
- Photoshop 鏡のようなリフレクション効果を簡単に作成する方法
- Photoshop モデルのヘアカラーを簡単に変える方法
- Photoshop 可愛くておしゃれなカラフルパッチワーク テキスト
- WebデザインをアップさせるPhotoshopスキルテクニック Part.1
- Photoshop CC レタッチ / スピード レタッチ
- Photoshop CC チュートリアル / 光のデザインアート Vol.1
- Photoshop CC チュートリアル / Nebula（宇宙）の作り方
- Photoshop CC チュートリアル / 幻想的な光のライン
- Photoshop チュートリアル / ドロップレイン
- Photoshopで髪の毛を綺麗に切り抜く 5つのテクニック
- Photoshop 女性をスリムにする簡単な方法！ 自然なレタッチの極意
- Photoshop アート キメラと少女 チュートリアル【Part.1】
- Photoshopでライオンなどの体毛を綺麗に切り抜くテクニック
- Photoshop 簡単に３Dキャラクタを作るチュートリアル
- Photoshop 花で彩られたフローラル タイポグラフィ
- Photoshop パペットワープがもっと上手くなる簡単テクニック
- Photoshopで犬や猫などの動物の体や顔を綺麗に切り抜くテクニック
- Photoshop 木漏れ日や降り注ぐ光を簡単に表現する方法
- Photoshop 雪を簡単に表現できるスノーエフェクト
- Photoshop 雨の日のガラスを表現する方法
- Photoshopで人物の破壊を表現するチュートリアル
- Photoshop 機械のカエル チュートリアル【Part.1】
- Photoshop フリーで使えるヘアーブラシ10 + テクニック
- Photoshop 瞳を簡単に変えるテクニック１０
- Photoshop 炎の呪術師 簡単チュートリアル！
- Photoshop カエルの王様 簡単チュートリアル！
- Photoshop ミニチュア風 エフェクト 簡単チュートリアル！
- Adobe Dimension × Photoshopで作るガラスのロケット