サイトの色をフォトショップに取り込む方法 超簡単!

WEBデザイン

サイトの色をフォトショップに取り込む方法 超簡単!

Photoshop でサイトの素材をつくるとき、サイトの色を簡単にPhotoshopに取り込めたらいいなと思いませんか??

スポイトツールで色を一つずつサンプリングするのは面倒です。

実は、CSSファイルを使うことで、すごく簡単にPhotoshopに色を取り込むことができます。

この方法を使うことで、Photoshopでの色の管理がとても楽になりました。

【スォッチの読み込み】を使う

方法はとても簡単です。

Photoshopの スォッチを使ってCSSファイルを読み込むだけです。

PhotoshopのスォッチはPhotoshopのファイル以外にも、 HTMLやCSSファイルを読み込むことができます

【スォッチの読み込み】でサイトの色情報が書かれているCSSファイルを読み込めば、その操作だけでサイトの色を一度に簡単に、Photoshopnに取り込むことができます。

それでは、操作をやってみましょう。

スォッチの読み込み

【スォッチ】から【スォッチの読み込み】を選択します。
 【スォッチ】から【スォッチの読み込み】を選択

【スォッチ】がパネルに表示されていない場合は、画面上部オプションバーの【ウィンドウ】→【スォッチ】で表示できます。

ファイルの種類を「CSSファイル」にして、CSSファイルを読み込みましょう。

サイトのCSSファイルは多く場合「style.css」となっています。

ファイルの種類を「CSSファイル」

本サイトでは、WORDPRESSテーマ「SANGO」を使っています。
「SANGO」のCSSファイルを読んでみます。

すると、「SANGO」で 使われているカラーがスォッチにすべて表示されます。

使われているカラーがスォッチに表示
とても簡単にサイトで使われている色をPhotoshopに取り込むことができました。

けっこう多くの色が使われているんですね。

この方法を使うと気に入ったサイトのカラーを、一気に取り込むことができるようになります。

また、paletton.comなどのカラーピッカーサイトではCSSファイルでテンプレートカラーをダウンロードすることができます。

そのCSSを読み込むこともできます。

新しいサイトのカラーを考えるときも参考にできそうです。

ぜひ、Photoshopでのカラー管理の参考にしていただければと思います。

それでは、楽しいPhotoshopライフをお過ごしください。