【Photoshop】スポイトツールの使い方を徹底解説forフォトショ初心者

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）のスポイトツールの使い方を徹底解説します。
基本的なスポイトツールの使い方から便利な応用操作まで、フォトショ初心者の方にも分かりやすく解説！

スポイトツールはフォトショップを扱う上で基本的なツールの一つなのでマスターしましょう！

この記事の目次

スポイトツールの基本操作

スポイトツールの基本操作を解説します。
Photoshop操作の効率を高める基本ツールの使い方を極めましょう！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。（7日間無料体験可能。終了後は自動課金されます。）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

画像を読み込む

Photoshopに画像を読み込みます。
ドラッグ&ドロップで読み込み可能。

素材にこだわりたい方はAdobe Stockが最強！9億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

STEP.2

スポイトツールを選択

ツールバーから [ スポイトツール ] を選択します。
ショートカットは [ I ] です。

FINISH

抽出したい個所をクリックする

抽出したい色の上でクリックします。
すると描画色にクリックした箇所の色が適用されます。
あとはブラシツールや塗りつぶしツールなどで色を塗れます。

※ [ Alt ] (Mac：Option) を押しながらクリックすると背景色にクリックした箇所の色が適用されます。

スポイトツールはフォトショップでよく使う基本ツールの一つなので覚えておきましょう。

オプションを設定

スポイトツールを選択すると画面上部にスポイトツールの [ オプション ] が表示されます。
必要に応じて設定し、効率的に作業を進めましょう。
※オプションが非表示の場合はPhotoshop画面上部の [ ウィンドウ ] → [ オプション ] で表示可。

サンプル範囲

サンプル範囲が指定できます。
指定したピクセル、3ピクセル四方の平均、5ピクセル四方の平均、11ピクセル四方の平均、31ピクセル四方の平均、51ピクセル四方の平均、101ピクセル四方の平均の7種から選択可。

初期設定は指定したピクセルですが、色の平均値が欲しい方は設定しましょう。

サンプル

サンプルが指定できます。
全てのレイヤー、現在のレイヤー、現在のレイヤー以下、すべてのレイヤーで調整なし、現在および以下のレイヤーは調整なしの5種から選択可。

初期設定の全てのレイヤーが使いやすいですが、必要に応じて設定しましょう。

サンプルリング

チェックを入れるとスポイトツール周辺にサンプルリングが表示されます。
サンプルリングはある方が断然便利。

もし旧型のフォトショップみたくサンプルリングを非表示にしたい方はチェックを外しましょう。

カラーサンプラーツールの使い方

【Photoshop】カラーサンプラーツールの使い方を徹底解説forフォトショ初心者

スポイトツールと似たアイコンのカラーサンプラーツールというものが存在します。複数の色をサンプリングする際に便利なツールですよ。

フォトショップの画面外の色を抽出

スポイトツールで画面をクリックしたまま抽出したい色の上までドラッグして離します。
するとPhotoshopの画面外の色でも描画色の色を変えられます。

※ [ Alt ] (Mac：Option) を押しながら同様の操作を行うと背景色が変えられます。

Webサイトのデザイン作成中に、ブラウザ上の色を抽出したい時などに便利な機能です。
いちいちキャプチャを撮ってスポイトツールで抽出するのは面倒ですからね。

Photoshop用の名刺テンプレート

Photoshopで使える高品質な名刺テンプレートです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。

#01 Botanical Business Card Layout

葉っぱがモチーフの名刺デザインです。
こんなショップカードの花屋さんがあれば素敵ですよね。

ダウンロード

#02 Black Business Card Mockup Gold Foil

ダークグレーがベースでゴールドであしらいと文字がデザインされたテンプレートです。
分厚い紙に金刷り加工を入れると高級感タップリのカッコいい名刺の完成です。

ダウンロード

#03 9 Vintage Business Cards Mockup

9種類ものビンテージデザインの名刺テンプレートが収録されています。
名刺だけでなく、様々なデザインのパーツに使えそうな素材です。

ダウンロード

#04 Business Card Layout with Pink Ribbon Design

白、ピンク、グレー、まさにコーポレート用名刺にそのまま使える名刺テンプレートです。
ピンクを別の色に変えるだけで各企業に適した名刺に変える事ができます。

ダウンロード

#05 Colorful Liquid Graphic Business Card Layout

ダークグレーと赤オレンジの液体を流したような柄の名刺デザインです。
図案の配置が絶妙！

ダウンロード

Photoshop用とIllustrator用の名刺テンプレート

【商用可】高品質な名刺テンプレート50選【Illustrator・Photoshop】

フォトショップとイラストレーター用の高品質な名刺テンプレート50選です。
全て商用利用可能！

ワンランク上のテンプレート素材

PhotoshopやIllustratorなどで編集できる、高品質なデザインテンプレートを紹介します。
ポートフォリオや名刺、バナーなどの制作に役立つ素材を厳選！
プロが制作したテンプレートを活用すれば、作業時間の短縮だけでなく、レイアウトや文字組みなどのデザインテクニックも効率よく学べますよ。

例えばクリエイターの就職・転職活動に役立つポートフォリオ。プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性がアップしますよ！
厳選！ポートフォリオ用テンプレート46選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作ると仕上がりに悩むこともありますが、良質なテンプレートを元に作るだけでレイアウトや文字組みを効率よく学べます。
相手に好印象を与える名刺テンプレート50選

バナーはPhotoshopの操作を学ぶうえで良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利ですよ。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材38選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート58選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しています。あわせてチェックしてみてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）のスポイトツールの使い方についてでした。

色をゼロから決めるのは案外面倒です。
そんな時はスポイトツールを使って欲しい色をサクッと抽出しちゃいましょう。

また、Altを使うと背景色に抽出した色を適用できます。
案外知られていない小技ですが、非常に便利な機能です。

ではまた！