Subscribe Twitter

2012年5月5日土曜日

このエントリーをはてなブックマークに追加

◎ 自分の個人的な作業支援用に、Javascriptを使って、カラーサンプルと、カラーサンプルジェネレータもどきを作ってみた。



自分の作業の際に、次のような使い方をするために作成したもの。

イラストをPhotoshopやIllustratorなどを使って作成する際の色見本として、ブラウザでカラーサンプルのページを表示しておいて、必要に応じてスポイトツールで色を抽出するためのカラーテーブルとして使用

PhotoshopやIllustratorなどで、デスクトップ上から、すばやく色を抽出する方法はこちら

カラーサンプル(渋め)
彩度をおさえたやや渋めのトーン50色。 
ColorUtils.jsを使い、Illustratorのブレンドツールのような感じで、2色のコード(16進数)間を10段階に分け、コードとともにボックスの背景色として、コードの色を表示させ、それを5つ重ねて50色にしている。

❖ カラーサンプルジェネレータもどき(1)
表示させたい色を2つ入力し、[作成]ボタンをクリック。カラーサンプル(渋め1)と同様の動きで、2色間を10段階で色コード(16進数)とともに新規に作成表示する。

 ❖ カラーサンプルジェネレータもどき(2)
単色を入力し、[作成]ボタンをクリック。入力した色をもとに、円形カラーピッカー右回り一周を10段階に分けて色相を取得して、色コード(16進数)とともに新規に作成表示する。 

ジェネレータもどきは、各[作成]ボタンの下に結果を表示させたいが、作り方が下手くそなので、結果のみの表示になってしまう。もとのページに戻る場合は、リロード(ページ再読み込み)が必要。

なお、画像保存機能はないので、結果を保存する場合は、サンプル部分をスクリーンショット(画面キャプチャー)で撮り*、PhotoshopやIllustratorにペーストしたり、プレビュー.appで「クリップボードから新規作成」したりしている。
*よく使うスクリーンショット:「Command + Shift + Control + 4 」で矩形選択、クリップボードにコピー。

実際のカラーサンプルやのジェネレータもどきのページはこちら(私のwebサイトです)


Related Post:


0 コメント: