クリエイター手抜きプロジェクト[301]Adobe Illustrator CS5編 カラー見本を作成する(1)
── 古籏一浩 ──

投稿:  著者:


デザイン上で助けになるのがカラー見本帳、配色表です。何かネタがないかなと思って本屋に行ったら、ちょうど「MdN」の発売日。今月号(2012年2月号。vol.214)には配色ハンドブックが付録でついてました。中を見ると配色パターンが70ページ近くもありました。

そこで、今回はこの「MdN」付録の小冊子のカラーサンプルを自動的に生成するスクリプトです。配色データは、あらかじめタブ区切りテキストとして以下のように用意しておきます。

221 150 15
200 58 63
255 240 0
208 109 140
101 172 227

左から赤、緑、青の順番です。それぞれの数値は0〜255で、数値と数値の間はタブで区切ります。テキストファイルとして、わかりやすいところに保存しておきます。

次にIllustrator CS5を開いて、新規にドキュメント(RGBカラーモード)を作成し、以下のスクリプトを実行します。最初に、AIファイルを保存するフォルダを選択します。その次に、RGBカラー配色のデータを入れたタブ区切りテキストを選択します。配色の数だけ自動的に横3×縦4個で配置し、AIファイルで保存してくれます。エラーが出る場合は、タブ区切りテキストが間違っていることがほとんどですので確認してみてください。それでもエラーになる場合は、Illustrator CS5を再度起動してください。





// カラーサンプルブロックを描画する
var myFont = app.textFonts["Arial-Black"];
var defFont = app.textFonts["Helvetica"];
(function(){
  if (app.documents.length == 0){
    alert("ベースとなるドキュメントを新規に作成してください");
    return;
  }
  var saveFolder = Folder.selectDialog("保存先のフォルダを指定してください");
  if (!saveFolder){ return; }
  var tabFile = File.openDialog("タブ区切りファイルを指定してください");
  if (!tabFile){ return; }  // キャンセルされたら何もしない
  var flag = tabFile.open("r");
  if (!flag){
    alert("タブ区切りファイルが開けません");
    return;
  }
  var baseX = 20;
  var baseY = -50; // CS5
  var boxW = 120; // 四角形の横幅
  var boxH = 100; // 四角形の縦幅
  var dx = 200;  // 横の間隔(boxW + オフセット)
  var dy = 200;  // 縦の間隔(boxH + オフセット)
  var count = 1; // ファイル名を示すカウンタ変数
  // ファイルの終わりまで繰り返す
  while(true){  // 最初に全てのパスなどを削除
    for(var i=app.activeDocument.pageItems.length-1; i >=0; i--){
      try { app.activeDocument.pageItems[i].remove(); }catch(e){}
    }
    for(var yy=0; yy< 4; yy++){
      for(var xx=0; xx< 3; xx++){
        var data = tabFile.readln().split(String.fromCharCode(9));
        if (data.length == 0){ return; }  // 空行の場合も終了
        $.writeln(data[0]+","+data[1]+","+data[2]);
        drawRect(baseX+xx*dx, baseY+yy*-dy, boxW, boxH, setColor(data[0], data[1], data[2]));
        if (tabFile.eof == true){
          saveFile(saveFolder.fullName+"/"+count+".ai");
          return;
        } // ファイルの終わり
      }
    }
    saveFile(saveFolder.fullName+"/"+count+".ai");
    count = count + 1; // 1つずつ増やす。ページ数に合わせて数値を変えてもOK
  }
  
})();
// ファイルを保存する
function saveFile(filename){
  var savefile = new File(filename);
  activeDocument.saveAs(savefile);
}  
// 指定した色で四角形と文字を描く
function drawRect(x, y, w, h, tempColor){
  var layerObj = app.activeDocument.activeLayer;
  // 上の大きい四角形を描く
  var rect = layerObj.pathItems.rectangle(y, x, w, h/2);
  rect.filled = true; // 塗りあり
  rect.stroked = false; // 線なし
  rect.fillColor = tempColor; // 塗りの色を指定
  // 中央の四角形を描く
  rect = layerObj.pathItems.rectangle(y-h/2-2, x, w, h/4);
  rect.filled = true; // 塗りあり
  rect.stroked = false; // 線なし
  rect.fillColor = tempColor; // 塗りの色を指定
  // 下の四角形を描く
  rect = layerObj.pathItems.rectangle(y-h/2-h/4-4, x, w, h/4);
  rect.filled = true; // 塗りあり
  rect.stroked = false; // 線なし
  rect.fillColor = tempColor; // 塗りの色を指定
  // BLACKとWHITEの文字を描く
  drawText(x+8, y-h/2-h/4+2, "BLACK", 20, myFont, setColor(0, 0, 0));
  drawText(x+8, y-h, "WHITE", 20, myFont, setColor(255, 255, 255));
  // RGBの文字と値を描画
  drawText(x+w+4, y-12, "R "+tempColor.red, 9, defFont, setColor(0, 0, 0));
  drawText(x+w+4, y-22, "G "+tempColor.green, 9, defFont, setColor(0, 0, 0));
  drawText(x+w+4, y-32, "B "+tempColor.blue, 9, defFont, setColor(0, 0, 0));
}
function setColor(r, g, b){
  var tempColor = new RGBColor();
  tempColor.red = r;
  tempColor.green = g;
  tempColor.blue = b;
  return tempColor;
}
function drawText(x, y, str, fsize, font, color){
  var textObj = activeDocument.textFrames.add();
  textObj.contents = str;
  textObj.paragraphs[0].fillColor = color;
  textObj.paragraphs[0].size = fsize;
  textObj.paragraphs[0].textFont = font;
  textObj.translate(x, y);
}


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>

あけまして、おめでとうございます。今年もよろしくお願いします。と書いても、すでに小正月過ぎ。ハッピーマンデーで成人の日が、ずれたので毎週連載なのに、毎年時季外れのご挨拶となっております......。RGBカラーの配色は印刷なんかで使わないよ、ということで、次回はCMYKで、CS3/CS4で動作するスクリプトです。タイトルにもちゃんと(1)とつけてあります、はい。

・クリエイター手抜きプロジェクト【2010年分まで用意しました】
< http://www.openspc2.org/projectX/
>

・毎度おなじみASCII.jpの連載
「CanvasとPhoneGapで作るiPhone用落書きアプリ」
< http://ascii.jp/elem/000/000/661/661027/
>

・新JavaScript例文辞典【HTML5関係も追加】
< http://www.openspc2.org/reibun/javascript2/
>

・Google API Expertが解説する Google Maps APIプログラミングガイド
【発売中】
< http://www.amazon.co.jp/dp/4844331167/
>

・jQuery Mobile 1.0例文辞典
< http://www.openspc2.org/reibun/jQuery_Mobile/1.0/
>

・CSS3(スタイルシート Level 3)例文辞典
< http://www.openspc2.org/reibun/CSS3/
>

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199
>

・10日で覚えるHTML5入門教室【増刷。補習講義でiOS5/Android 4に対応】
< http://www.amazon.co.jp/dp/4798124184
>

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。