Webサイトのデザインやバナー作成時に便利なPhotoshopの機能「スウォッチ」

photoshop-swatch-thumb

HTML/CSSコーディングやWordpressの構築ばかりやっている自分ですが、バナー作成やWebサイトのデザインをする事が時たまあります。その度荒ぶるPhotoshopを扱いきれずにヒーヒー言いながら使用するも「便利過ぎて他のソフト無理」な身体になってきています。最近になってPhotoshopの1機能「スウォッチ」の便利さに気付きました。

色を管理する機能「スウォッチ」

デザインについて大したことは言えないのですが、基本的にデザインをする時は予め使う色を決める、っていうセオリーがあります。

基礎的な方法としては、ベースカラー・サブカラー・アクセントカラーの3つに分けて色を考えると纏りやすく、赤・青・白のトリコロールカラーを使用したドラえもんやガンダムが良い例です。

こうしたデザイン手法でやるならば、統一感を出したいので「同じ色でデザインするべき所なのに若干色が薄い・鮮やかすぎる」といった事は避けたいですよね。

スウォッチを例えるならクレヨンや絵の具

例えば、ドラえもんの塗り絵で遊ぶとします。

大体の人は塗り絵で遊ぶ時に予めクレヨンや、パレットに赤・青・白の絵の具を用意しますよね。スウォッチはこの例に当たるクレヨンや、パレットに用意した絵の具なのです。

決まった色を用意しておけば色の違い、つまりRGB値(もしくはCMYK値)が違っていたなんて事は起きません。

(ちなみにスウォッチの意味は「見本、小切れ」のようです)

「スウォッチ」の使い方

では早速スウォッチを使ってみましょう。

と言っても使い方は至って簡単。

まず、スウォッチパレットが表示されていない方はPhotoshopのメニューの「ウィンドウ」から「スウォッチ」にチェックを入れます。

メニューのウィンドウからスウォッチにチェック
メニューのウィンドウからスウォッチにチェック
こんな感じで表示されます
こんな感じで表示されます

あとはこのパレットに色を作成するだけです。

まずは描画色で色を決めます。

photoshop-swatch-03

描画色に色を設定したら、スウォッチパレットの上でクリック。スウォッチ名の入力欄が出てくるので任意の名前を設定しましょう。

photoshop-swatch-04

「OK」ボタンをクリックすると、スウォッチパレットに色が出現します。あとは、デザインを進めていく上で色を設定する時にスウォッチパレットから色を拾うだけです。

スウォッチにある邪魔な色を空にするデフォルトファイル

色を設定したとして、初期からある色がどうも邪魔です。

ただ、Photoshopのスウォッチには、何故か色の全削除設定が無いんですよね。

仕方がないので1つ1つ色を右クリックして削除しましょう…、というよりもっと楽な方法があります。

色が空のスウォッチファイルに置き換える、という方法です。

その方法について説明されているページが有りますのでご紹介いたします。

以上、スウォッチの簡単な活用方法でした。

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/photoshop-design-swatch/trackback/