Photoshopの色域指定を使って手書きイラスト・文字を取り込む方法

※このページでは広告のリンクを含みます

手書きのイラストや文字をデジタル加工させる時に、Photoshopの「色域指定」機能をしようすると簡単にできます。
ここでは、「色域指定」を使った手書き文字の加工方法や他の表現方法に現場レベルで解説しています。
この記事で「色域指定」を使いこなせるようになります。

Photoshop「色域指定」機能は画像内の特定の系統色だけを選択できるツールです。

メニューバー［選択範囲］→［色域指定］を押下すると「色域指定」パネルが表示されます。この場合、レイヤーを選択しておかないと［色域指定］のメニュー項目がアクティブにならないので、もしメニューが選択できない時、気をつけておくとよいでしょう。

「色域指定」パネルに表示されているプレビューの白い部分は選択された部分であり、黒い部分が非選択部分です。

［OK］ボタンを押下すると選択されます。

また、パネル内にある、調整項目を使って選択、非選択部分を調整していきます。

• 「選択」：自動的に設定した選択の色域が選択（図1）
• 「カラークラスタ指定」：複数色域をより正確に指定（図2）
• 「許容量」：指定色域を選択（図3）
• 「追加・削除」：選択を追加、削除（図4）

ここから現場でよくある作業の内容を解説したいと思います。
解説する作業内容は、企業サイトで代表の写真にビジネスサインを入れている画像の制作になります。

完成イメージは下記のようになります。同様なデザインをどこかで見た記憶があるかもしれませんね。

制作の流れを以下にまとめました。

手順ごとに解説していきます。

受け取る素材は社長の写真と社長が直筆のサイン（シグネチャーとも呼ばれます。）のスキャンデータです。
実際の現場では、直筆サインした紙が入稿される場合もあるかも知れません。

Photoshopの色域指定で範囲選択するためにスキャンしたデータを一旦白黒表示にさせる必要があります。
「2階調化」を使って、白と黒のみにしたいので［イメージ］→［色調補正］→［2階調化］からおこないます。

「2階調化」パネルが出てくるので、プレビューで白黒化された状態で確認できるので［OK］を押下して反映させます。

白黒化された手書きの文字（シグネチャー）を抜き出します。
作業は［選択範囲］→［色域指定］から「色域指定」パネルを開きます。ここではカラークラスタ指定を項目のチェックを外しておきます。（チェックを入れておくと画像をより正確に指定してしまうため選択した状態で濃淡が出てしまします。）

今回のケースでは均一に色を出したいため「カラークラスタ指定」を選択しませんでした。状況に応じて使い分けしましょう。

白黒化された手書きの文字（シグネチャー）を抜き出すことができたら、シグネチャーを乗せる写真素材に合うようにシグネチャーのサイズや色味を変更します。

シグネチャーの変更にはシグネチャーのレイヤーを「スマートオブジェクト」に変換して、「カラーオーバーレイ」でレイヤーに色をつけていきます。

「スマートオブジェクト」に対しては、下記の記事に解説しています。

短時間で習得！Webデザインに必要なPhotoshopの基本操作

Webデザイナーは画像編集ソフト「Photoshop」を使えるスキルが必要です。膨大な機能がある「Photoshop」ですが、本記事ではWebデザイナー初学者にとって必要不可欠な「基本操作」について解説します。 Webデザイナーになるために他の項目を省きましたので、短時間で習得していきましょう。

前述した社長画像にサインを入れる方法の他に「色域指定」を使用するケースは、「写真素材のある部分の色味を調整・変更してほしい」といういう依頼に対してでしょうか。

例えば、肉屋の商品紹介サイトでクライアントから提供された牛肉の写真素材の牛肉をおいしそうに赤みを足してほしいという依頼があったとします。

その場合の方法は、下記のようにおこなっていきます。

手順ごとに解説していきます。

色味を調整したい範囲を決めます。
この素材写真の場合、肉の赤身の部分と脂身の白い部分の2箇所を選びます。

使いどころとして色彩の差が大きく、かつ色彩同士の境界線もハッキリしている画像であれば、「色域指定」を使うことで素早く選択されますので作業上効率化されます。

色味を調整したい範囲を決めたら、「色域指定」で範囲を作っていきます。
「色域指定」パネルを開いたら、選択するスポイト機能を選択（図1）して色域指定する部分（図2）をクリックします。
細かい部分を指定できる「カラークラスタ指定」（図3）の項目にチェックを入れておきます。

「色域指定」で選択されますので、調整レイヤーに「色相・彩度」を設定して数値を調整します。

調整レイヤーについては下記について解説しています。

短時間でPhotoshop習得！Webデザインに必要な写真の加工（補正・合成・トリミング）を解説

Photoshopは写真を加工することに特化したソフトです。写真加工をするための機能が多すぎて全て習得することが難しいので本記事ではWebデザイナーに必要な最低限の機能を紹介していきます。短時間でWebデザイナーのスキルを身につけましょう。

「2. 「色域指定」で範囲を決定」の手順に戻り今度は脂身の白い部分の色味を変更していきます。

Photoshopの「色域指定」機能の説明と「色域指定」を使うケース2つを紹介しました。
簡単にまとめましたので気になる部分については再度本文を読んでもらえますと良いです。

色域指定は特定の色の部分が選択可能

Photoshop「色域指定」機能は画像内の特定の系統色だけを選択できるツールでメニューバー［選択範囲］→［色域指定］を押下すると「色域指定」パネルが表示されます。

手書き文字を取り込む方法

企業サイトで代表の写真にビジネスサインを入れている画像の制作は下記の通り。

• 1. 素材の入稿待ち（素材集め）
• 2. 画像を白黒にする
• 3. 色域指定で画像を抜き出す
• 4. 色・サイズを調整して貼り付ける

精細な選択範囲が必要な場合

• 1. 色味を調整したい範囲を決定
• 2. 「色域指定」で範囲を決定
• 3. 調整レイヤーで色調補正をかける

手書きのアナログからデジタルに取り込む手法は自分が前職の制作会社につとめていた時に、ビジネス上お付き合いのあった印刷会社のデザイナーに直接教えてもらって以降自分の技術にしています。
（余談ですが、いま思うと他社から技術を教わるってどんなシチュエーションでそうなったんでしょうか。）

教えてもらって以降、仕事やプライベートでの制作でも使っているので、めっちゃ重宝しています。

趣味レベル程度であればスマホのアプリでも取り込めちゃうので手軽にやってみたい場合は、ぜひそちらの方を試してみても良いかもしれませんね。