NORI-BEN

WEBデザインデザイン・イラストなど。エンジニアさん向けにphotoshop解説とかちょこちょこしてます。

【Photoshop】スウォッチ、使ってますか?

ちゃんと使えば便利なスウォッチ

使い方がわかりにくいのでメモ的にまとめておきました。

 

スウォッチとは

絵具のパレットのようなもの。

指定したカラーを、保存しておき、ワンクリックで利用できるもの。

f:id:franxx00:20140125001459p:plain

こんなかんじになってるー

 

■色の登録の仕方

・まずはスウォッチウィンドウを、開く(ウィンドウ>スウォッチ

・保存しておきたいカラーを、描画色に設定する。

スウォッチウィンドウのペラ紙のアイコンをタップすると追加される

 

テキストやシェイプのカラーをダブルクリックして、スウォッチからカラーを引用するなどで使ってください。

 

 

■自分だけのオリジナルのスウォッチをつくりたい!

さて好みの色を追加したし、このスウォッチライブラリを保存したい!

と思ってもだまされてはいけない。

スウォッチメニュー>スウォッチの保存 では、表示されているすべてのスウォッチがライブラリに登録される。

 

f:id:franxx00:20140125003601p:plain

これじゃだめよ!

 

選んだ色ごとに登録しておくには、

スウォッチのをますすべて削除してから、保存したい色だけにする必要がある。

 

スウォッチの削除

スウォッチを選んだうえで、右下のごみ箱のアイコンで削除はしてくれる。

これ、めんどう!

全削除したいときは、

スウォッチのメニュー>プリセットマネージャーで、Ctrl+A→削除ボタンで一気に消せる!

(編集>プリセット>プリセットマネージャーもおなじ)

 

■作ったスウォッチの並び順を変えたい!

上の削除とおなじく、プリセットマネージャーからドラッグで順番を変えられる!

 

 

スウォッチの高速化tips

・Altを押したままスウォッチをクリックで削除

スウォッチを空にした状態のライブラリ「empty_swatch.aco」をつくっていつでも新しくライブラリをつくれる状態にする

 

■実は知られてない小技

・WEB用書き出し→GIFやPNGなどで色数など指定して減色

・下の方にカラーパレットがあるので、そこからパレットが保存できる!

 

 

Adobe CCの便利機能!

なんとCSSからスウォッチを拾って来てくれる!!

» イトウ先生のTips note【Photoshop CS6 EXTENDED・クリエイティブクラウド版】CSSの読み込み(スウォッチカラー)と、 CSS書き出し(CSSをコピー)について −株式会社ワークスコーポレーション ブログ

 

■その他便利なサイト

f:id:franxx00:20140125004112p:plain

ColourGrab.com - Colouring The World.

URLを入れると、そのサイトで使っているカラーのスウォッチライブラリを作ってくれる。

デモとしてやってみたけどまったく動かないwwwなぜwww

 

f:id:franxx00:20140125005300p:plain

Web Site Color Picker | Webサイトで使われている"色"を抽出、分析します♪

日本のサイトもあった

 


Vol.1 of Photoshop Swatches Library for Flat UI Design on Behance

フラットデザイン向けスウォッチライブラリ

 

カラーを取ってきてくれるサービスは割といろいろあるので調べてみると面白くて眠いです。