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

  • 更新日:
  • 公開日:

HTML/CSSコーディングやWordPressテーマの制作を主にやっている自分ですが、バナー作成やWebサイトのデザインをする事が時たまあります。

最近になってPhotoshopの1機能「スウォッチ」の便利さに気付きました。

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

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

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

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

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

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

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

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

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

「スウォッチ」の使い方

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

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

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

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

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

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

photoshop-swatch-03

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

photoshop-swatch-04

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

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

色を設定したとして、初期からある色が不要です。

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

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

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

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

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

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone