2020.10.25  2021.04.04

Photoshopで指定の場所のカラー番号を調べる方法

皆さんこんにちは!マコブログです!

今回は、Photoshopを使って、画像のカラー番号を取得する方法をご紹介します。
デザイナーからデザインが納品されたのに、そのデザインの色を正確に再現する方法が分からなければ、それはデザイナーさんに対してとても失礼に当たります。
基本デザイナーさんは、一つ一つのレイアウトに意味を持たせ、色合いや形などをよく吟味して作られています。
それを私たちプログラマーの勝手で変えてしまっては、デザイナーさんの努力を水の泡にするのです。



上記のことをしっかりと意識して、製作者(エンジニア)は今回の記事の内容をマスターしてください。

画像のカラー番号を取得する

まず、Photoshop(フォトショップ)の編集画面に移動します。

そして、左側メニューからスポイトツールを選択してください。
スポイトツールを選択した上で、画像の上にカーソルを乗せると、カーソルがスポイトの形になるのが分かると思います。

この状態で、画像の色味を調べたい箇所を左クリックのあと右クリックすると、「カラーの16進コードをコピー」というメニューが一番下に出てくると思います。
この「カラーの16進コードをコピー」をクリックすると、先ほどクリックした場所のカラーコードがコピーされ、
貼り付けで「ac91e3」のように16進数で識別されたカラーコードがペーストできます。

この方法を利用して、cssでカラーコードを正確に指定し、デザイナーさんが思い描いた通りのデザインを作ることが可能になるのです。

まとめ

いかがでしょうか?
今回は、Photoshopを使って、画像のカラーコードを取得する方法を紹介しました。



あなたがフロントエンジニアで、「プログラマーだからデザイナーのツールは使用できなくてもいい」と考えているなら、今すぐその考えを改めることを進めます。
プログラマーだからこそ、他の領域のツールを理解することで、臨機応変に対応できるのです。

是非あなたも、デザインのカラーコードを正確に再現する方法を習得して、一流のプログラマーを目指してみてはいかがでしょうか?
こちらの記事も是非チェックしてみてください↓
Photoshopで長方形ツールを使って画像をトリミングする方法

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →