REDLINE MAGAZINE | Fireworksで使っている色見本を共有するREDLINE MAGAZINEトップページへ

すべてのエントリを見る

Fireworksで使っている色見本を共有する

自分でデザインしてるとここ部分はあそこの色と同じとか頭の中で理解してて、スポイトで色抜いちゃう人なので、個人的には色見本の使用頻度はあまり高くなかったりもします。

でも複数人で作業してて、例えば自分は大枠のデザインするけど、他の人がコーディングしてる途中で「あーそこの画像何か作って入れてくらさい」ってお願いしたい場合なんかに基本的なカラーパレットを予め渡しておけば「使ってる色これですから」って説明しやすいし、いちいち相手もスポイトで色抜かなくても分りやすいかな、と。色に拘りたい時に他の人が作った画像見て「その色ちゃうねん!」みたいなのを未然に防げたりとか。

Fireworksでのカラーテーブル(.act)ファイルの作り方

問題の色見本パネルのカラーテーブルは「.act」っていう拡張子のファイルらしいということが判明。とりあえずそれを作りたい。色見本パネルのオプション部分を見てみるとカラーテーブルをカスタマイズできそうな項目が。

キャプチャ・色の置き換え

「色見本の追加」は今のカラーテーブルに色見本を加える。「色の置き換え」はカラーテーブルを全部置き換える。

とりあえず何かこの辺いじってる場合は、一旦「色見本の保存」で現在のカラーテーブルを「default.act」か何かにしてバックアップとっておく方がいいかも。

一括でサイトに使われてる色を読み込む

「色見本の追加」や「色見本の置き換え」はgif画像からも色を読み込める。とりあえずサイトのキャプチャをGIF形式で保存して「色見本の置き換え」で読み込ませる。そうすると色見本がこうなった。

サイトキャプチャを色見本に読み込ませたところのキャプチャ

カラーチップを削除する

このサイトはグラデーションを多く使ってるので特にそうなんだけど、上の図みたいな色見本だと色数が多すきるぜって場合はカラーチップを減らす。

カラーチップの削除方法は、Ctrlキーを押しながら削除したいチップにカーソルを合わせるとマウスがハサミのマークになるのでクリックする。逆に色をコピーしてチップを増やしたい場合はマウスカーソルがスポイトになってる状態でAlt押しながらそのチップをドラッグすればコピーできる。ちなみにShift押しながらクリックすると、今選択している色で上書きというか置き換えられる。カラーパネルのこの操作はCtrl+Zでもやり直せない。

※Fireworksの場合、カラーパネルを大きくすると連動してカラーチップのマス目が大きくなるので、大きくしてから削除する色を選ぶとやりやすいかも。(バージョン8の場合。それ以降のバージョンについては分らないけど。)

キャプチャ・減色した色見本

そんな手順で白数減らして色見本ができたら「色見本の保存」で.actファイルを保存する。

そもそも色数減らさなくていいならキャプチャしたGIF画像を相手に渡せばいいだけの話。でも多分多くのデザインする人はメインカラーとかサブカラーとかソフトが抜いた多数の色じゃなくて自分で意図して作った色を手渡したいと思うので・・・。

カラーテーブルに追加したい色を個別に読み込む

上の方法だとGIFから読み込んで色を吟味するにはいいんだけど手間がかかる。個別に「ここの色は色見本行き!」っていうのを設定する方法もある。

まず一旦、色見本パネルのメニューから「色見本のクリア」でカラーチップを全部削除。(別に残しておいてもいいんだけど)で、スポイトツールを選択した状態でプロパティパネルを見ると、

キャプチャ・スポイトツールを選択した状態でプロパティパネル

こんな風にサンプリングするエリアの大きさみたいなのを選択できるので、適当に自分の好きな範囲を選ぶ。

その後、スポイトツールにしたまま画面上の任意の場所(色見本に追加したい色)を選んでクリック。そうすると多分左のツールバーんとこにその色がバケツの横のボックスに入ってるので、その状態をキープしたまま色見本パネルにマウスカーソルを移動。カーソルがバケツに変化するので、その場でクリック。そうするとカラーチップとして表示される。あとは色見本に加えたい色数の分だけそれを繰り返す。

キャプチャ・スポイトで抜いた色を色見本パネルに加える

一括で読み込むのと個別に読み込むの、どっちがいいか

ケースバイケースだと思うけど、後者の個別にこれを色見本に追加するぜってやり方の方が読み込んだ後迷わないので後者の方法の方が自分は好き。

ファイルの読み込み方法

出来上がった.actファイルを読み込むには「色見本の追加」か「色見本の置き換え」からそのファイルを読み込むだけ。

Photoshopの「イメージ > モード > カラーテーブル」から書き出した.actファイルもFireworksで読み込めました。但し!逆行き(Fireworks→Photoshop)は無理でした。悔しいのでググってたらFlashから書き出した.actファイルはPhotoshopでも読み込めるという情報をゲット!

さっそくFireworksで作ったカラーテーブルを一旦Flashに読み込ませてから再度Flash内で保存してPhotoshopのスウォッチパネルから読み込んでみたら・・・いけましたー!やっほー!ということで、上に書いた方法でカラーテーブルを作る際、photoshop使いの方にデータを渡す時はFlashを経由させて書き出せばいい、と。・・・めんどくさいけど。

色の抽出を自動でやってくれるwebサービス

随分前にlomoさんのブログで拝見した記事なんだけど、

>>好きなアーティストのアルバムでカラースキームを作ってみた | caramel*vanilla

こちらで紹介されてるCOLOURloversというサイトでは画像をアップすると簡単に作れる。写真とかを指定すると使われてる色が表示されてその中から選んでいく感じ。

CSSファイル内に。

これは別にFireworksとか関係ないんですけど、以前どこかのブログか何かでCSSファイル内にサイトで使用するカラーをコメントとして入れておくっていう話も拝見したことがありました。

/*---------------------------------
* Color chart
* Default text color -> "#333"
* hoge text color -> "#f00"
* hoge category -> "#000"
---------------------------------*/

こんな感じで。
CSSファイル内に色の指定入れる事も多いので結構いいなと思ったネタでした。

今までの私の行動パターン

どうでもいい話なんですが、サイトごとに色見本ファイルを作っておこうって思ったの最近なんですよね。それまでは「色見本のactファイル」じゃなくて適当に四角書いて色つけて(上のCOLOURloversのサイトみたいに)pngなんかで保存したものを案件ごとのデータフォルダに入れてたり、別スタッフに渡す元データに入れてたりしてたんですけど、actファイルで書き出して案件ごとにカラーテーブル入れ替えた方がスマートなんじゃないかとか思いました。特に別スタッフと色情報を共有する場合なんかには#○○○とか一応書いて渡したりする場合もあるんですが、actファイルも一緒に渡すと更に親切かなと。

Fireworksで作業する際、その色付けた画像って画面上に配置して作業してたりしたんですが、結構あれって邪魔だったりするし、そのレイヤー非表示にしておいたら、レイヤー増えて「どこの非表示になってるオブジェクトだったっけ?」みたいなこともありましたし。(それだけ別のレイヤーフォルダにすればいいだけの話なんですがいつも忘れる人)

まぁそんなこんなでちょっとでも効率よくなる事を期待してます。

追記:このサイトのカラーテーブル

@forestkさんにブクマコメントで『(「・ω・)「<それでそのファイルは何処だ?』と言われたので適当にこのサイトで使ってる色を20色程度ピックアップしてみました。(かなり適当に選出)

このサイトの色見本

>>Fireworks用のactファイル
>>Photoshop用のactファイル

Photoshopの場合は「スウォッチ -> スウォッチの読み込み -> ファイルの種類『カーテーブル(*.ACT)』」で読み込めると思います。

ていうか、別にactファイル作らなくても、サイトのキャプチャとってgifで保存して読み込めばよくね?って今思いました。あ。ということはアレか。気に入ってるサイトの色情報とか欲しかったらそういう手順でカラーテーブルにして楽しめばいいのか!

<< Fireworksのスライスガイドって | クリップボードの中身も効率よく使う >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/183

Fireworksで使っている色見本を共有する へのトラックバック一覧

» ウェブデザイン等の配色に役立つサイト集 送信元 Weblog
配色ツール kuler ColorJack: Color Generator Color Scheme Designer 3 Color Blender...
Trackback time : 2010.04.16

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。