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

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

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

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

この記事の目次

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

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

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

画像を読み込む

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

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

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を学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

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

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

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

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

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

良質な素材をもっと見る

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

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

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

おわりに

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

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

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

ではまた！