• WEB

Photoshopのカラーテーブルで簡単に写真の配色を確認してみよう!

  • みたか
    みたか レタッチちーむ
  • このエントリーをはてなブックマークに追加
Photoshopのカラーテーブルで簡単に写真の配色を確認してみよう!

常日頃、私たちがウェブを見ていて必ずと言っていいほど目にする写真やイラスト。

写真やイラストを私用しているページは華やかで見応えがありますよね!
「この写真かっこいいなー、こっちのイラストも色使いがうまい! 配色参考にしたい…」
なんて考えたことはありませんか?

きれいな色使いが気になる、理想の色構成に近づきたい、構成力の幅を持たせたい

などなど、理由は様々だと思いますが、実際に確認しようとしてもいちいちスポイト機能で色を吸い取るのは面倒…

そこで、スルーしてしまいがちな機能を使い3ステップで簡単に配色を確認してしまいましょう!

配色確認の方法

激カワなねこちゃんの写真

この激カワなねこちゃんの色構成を見ていきたいと思います。

ステップ1

webおよびデバイス用に保存ウィンドウを表示します。

メニューバーの「ファイル」→「webおよびデバイス用に保存」
(ショートカット:Ctrl+Shift+Alt+S)

通常ではJPEG設定になっていると思うので、GIFに設定をしてください。

抽出した色を確認しつつ、2~256色までの抽出したい色の数を任意で指定します。
個人的には40色未満が多すぎず少なすぎず丁度いいと思います。

色の数を指定

ステップ2

抽出する色が決まったら、カラーテーブル右横のメニューを表示しカラーテーブルを保存を選択します。

カラーテーブルを保存

ステップ3

保存が完了したら、先ほど保存したカラーテーブルをスウォッチに表示させます。

ウィンドウ→「スウォッチ」を表示→「スウォッチ」ウィンドウの右横のメニューを表示→「スウォッチの置き換え」を選択

既存のカラーを置き換えたくない場合は、「スウォッチの読み込み」を選択することで下に色が追加されていきます。

スウォッチの置き換え

この置き換え後の色構成がねこちゃんだと思うともう可愛らしくてしょうがないです。
抽出した色でイラストを描いてみたり、オリジナルのページやデザイン制作などに活用できそうですね!

以上でカラーテーブルを使った配色の確認はおしまいです、お疲れ様でした。

おまけ 配色参考サイト

Color Scheme Designer
Color Scheme Designer

バランスのとれた複数の色を設計できるジェネレーター
「配色に迷ったらここ!」らしいです。

Color.Hailpixel
Color.Hailpixel.com

ウィンドウ上でマウスを動かすだけで直観的に色選びができる、恐ろしくクールなサイト。
オリジナルカラーパレット作成に最適!

Color of Book
Color of Book

日本国内で発売されている本や雑誌の表紙から、カラーチャートを自動で検出してくれる神が作ったに違いないサイト
アマゾン検索ができます。見ているだけで楽しいですね!

それではよいレタッチライフを!

このエントリーをはてなブックマークに追加

みたかが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ