訪問していただき、ありがとうございます。
Illustratorスクリプトを独学したいと思っている人向けに
・javaScriptの基本を知りたい
・Illustrator独自のオブジェクトを知りたい
・サンプルコードを見たい
こんな疑問にお答えします。
本記事は、JavaScriptとIllustratorScriptを使用して構成されるプログラムを通して、「ドット絵を描いてくれる」スクリプトを学ぶ内容となっています。
構成は、第1章ではスクリプトのポイントなどを解説し、第2章では「ドット絵を描いてくれる」スクリプトのコードを公開しています。
それでは、どうぞお楽しみください。
Profile
この記事を書いている私は、DTPデザイナーとしてIllustratorの操作経験が15年以上あり、スクリプトも自分の業務で必要になったものを自ら作成し、デザイン作業の効率化を図っています。
最近では、当ブログでも自作スクリプトを公開しています。
「スクリプトの自作は難しい」と感じていませんか？
生成AIなら、「やりたいことを伝える」だけでIllustratorのスクリプトも作れます。
💡生成Aiで作るIllustratorスクリプトの具体手順を見る
【ドット絵を描いてくれる】スクリプトの解説
【ドット絵を描いてくれる（ファイル名：Pixel_art）】は、僕がJavaScriptベースに自作したIllustrator用の学習用スクリプトです。
まず、この章ではスクリプトのポイントや使い方について解説します。
※読み飛ばしてもOKです。
【ドット絵を描いてくれる】スクリプトのポイント
【ドット絵を描いてくれる】スクリプトは、
・JavaScriptの【配列・繰返し・関数・変数】
・Illustrator独自の【図形・カラー・レイヤー・属性・新規ドキュメント】
を組み合わせて作成しています。
このスクリプトは練習用に、あえて非効率な組み合わせをしている箇所もあります。
学習していく中で、効率よくなるようにカスタムしてみてください。
【ドット絵を描いてくれる】スクリプトの入手
学習をする前に、このスクリプトがどのような動作するのか知りたい方は、下記よりDLできます。
下記リンクからスクリプトをダウンロード
ちなみに、【スクリプトの使い方や作り方】を知りたい方は、、【Illustratorの作業効率が上がる！【スクリプト】の使い方と作り方】の記事を参考にしてください。
【ドット絵を描いてくれる】スクリプトコード【独学用】
前章では【ドット絵を描いてくれる】のポイントついて解説しました。
この章では、【ドット絵を描いてくれる】のコードを公開します。
コードにコメントアウトも書いてありますので、カスタマイズする際の参考にしてください。
app.coordinateSystem=CoordinateSystem.ARTBOARDCOORDINATESYSTEM; //座標値をアートボード基準
var docObj = documents.add(DocumentColorSpace.CMYK,51,39);//新規ドキュメント作成
var actDoc = activeDocument;//アクティブドキュメント指定
var monsterLay = actDoc.layers.add();//新規レイヤー作成
monsterLay.name = 'モンスター'; //レイヤー名
var baseObj = actDoc.pathItems.rectangle( 0,0,51,39); //四角形作成（Y軸，X軸，横幅，縦幅）
baseObj.fillColor = setCMYKColor(0,0,0,95);//オブジェクトの塗り
baseObj.stroked = false; //オブジェクト線なし
var siza = 3; //正方形のサイズ
for(i = 1 ; i <= 11 ; i++){ //Y軸に１１個
for(j = 1 ; j <= 15 ; j++){ //X軸に１５個
var rectObj = actDoc.pathItems.rectangle( zikuY(i),zikuX(j),siza,siza); //四角形作成
rectObj.fillColor = setCMYKColor(50,0,0,0);//塗り
rectObj.stroked = false; //線なし
rectObj.note = 'y' + i + 'x' + j; //属性の作成
};
};
//不要 削除 ここから
var todo = ['y1x1','y1x2','y1x3','y1x4','y1x5','y1x6','y1x7','y1x9','y1x10','y1x11','y1x12','y1x13','y1x14','y1x15',
'y2x1','y2x2','y2x3','y2x4','y2x5','y2x6','y2x10','y2x11','y2x12','y2x13','y2x14','y2x15',
'y3x1','y3x2','y3x3','y3x4','y3x5','y3x11','y3x12','y3x13','y3x14','y3x15',
'y4x1','y4x2','y4x3','y4x13','y4x14','y4x15',
'y5x1','y5x2','y5x14','y5x15',
'y6x1','y6x15',
'y9x1','y9x15',
'y10x1','y10x2','y10x14','y10x15',
'y11x1','y11x2','y11x3','y11x13','y11x14','y11x15',]; //配列 属性
for(var i = 0; i < actDoc.pageItems.length; i++){//作成した四角形の数だけ繰返し
for (var j = 0 ; j < todo.length ; j++){//指定した配列の数だけ繰返し
if(actDoc.pageItems[i].note === todo[j]){ //属性が一致する場合
try{
actDoc.pageItems[i].selected = true; //四角形を選択
}catch(e){
alert ('選択でエラーが出ています。');
};//catch(e)
};
};
};
var selObj = actDoc.selection; //選択中の四角刑
for(var i = 0; i < selObj.length; i++){ //選択中の四角形の数だけ繰返し
selObj[i].remove(); //四角形を削除する
};
actDoc.selection = null; //選択を解除する
//不要 削除 ここまで
//白色 ここから
var white = ['y3x6','y3x7',
'y4x4','y4x5',
'y5x3','y5x4',
'y6x6','y6x10',
'y7x5','y7x7','y7x9','y7x11',
'y8x6','y8x10',];
for(var i = 0; i < actDoc.pageItems.length; i++){
for (var j = 0 ; j < white.length ; j++){
if(actDoc.pageItems[i].note === white[j]){
try{
actDoc.pageItems[i].selected = true;
}catch(e){
alert ('選択でエラーが出ています。');
};//catch(e)
};
};
};
var selObj = actDoc.selection;
for(var i = 0; i < selObj.length; i++){
selObj[i].fillColor = setCMYKColor(0,0,0,0);
};
actDoc.selection = null;
//白色 ここまで
//オレンジ ここから
var orange = ['y9x5','y9x11',
'y10x6','y10x7','y10x8','y10x9','y10x10',];
for(var i = 0; i < actDoc.pageItems.length; i++){
for (var j = 0 ; j < orange.length ; j++){
if(actDoc.pageItems[i].note === orange[j]){
try{
actDoc.pageItems[i].selected = true;
}catch(e){
alert ('選択でエラーが出ています。');
};//catch(e)
};
};
};
var selObj = actDoc.selection;
for(var i = 0; i < selObj.length; i++){
selObj[i].fillColor = setCMYKColor(0,60,55,0);
};
actDoc.selection = null;
//オレンジ ここまで
//みずいろ ここから
var orange = ['y11x4','y11x5','y11x6','y11x7','y11x8','y11x9','y11x10','y11x11','y11x12',
'y10x4','y10x12','y10x13',
'y9x3','y9x6','y9x7','y9x8','y9x9','y9x14',
'y8x4','y8x7','y8x8','y8x9','y8x11','y8x14','y8x15',
'y7x3','y7x8','y7x12',
'y6x9','y6x11',
'y5x10',
'y4x10',
'y3x9',];
for(var i = 0; i < actDoc.pageItems.length; i++){
for (var j = 0 ; j < orange.length ; j++){
if(actDoc.pageItems[i].note === orange[j]){
try{
actDoc.pageItems[i].selected = true;
}catch(e){
alert ('選択でエラーが出ています。');
};//catch(e)
};
};
};
var selObj = actDoc.selection;
for(var i = 0; i < selObj.length; i++){
selObj[i].fillColor = setCMYKColor(55,20,0,0);
};
actDoc.selection = null;
//みずいろ ここまで
//薄いみずいろ ここから
var orange = ['y2x8',
'y3x8',
'y4x6','y4x7', 'y4x8',
'y5x5','y5x6','y5x7',];
for(var i = 0; i < actDoc.pageItems.length; i++){
for (var j = 0 ; j < orange.length ; j++){
if(actDoc.pageItems[i].note === orange[j]){
try{
actDoc.pageItems[i].selected = true;
}catch(e){
alert ('選択でエラーが出ています。');
};//catch(e)
};
};
};
var selObj = actDoc.selection;
for(var i = 0; i < selObj.length; i++){
selObj[i].fillColor = setCMYKColor(20,0,0,0);
};
actDoc.selection = null;
//薄いみずいろ ここまで
//紫 ここから
var orange = ['y5x11','y5x12',
'y6x12','y6x13',
'y7x13',
'y8x3','y8x12','y8 x13',
'y9x4','y9x10','y8 x12','y8x13',
'y10x5','y10x11',];
for(var i = 0; i < actDoc.pageItems.length; i++){
for (var j = 0 ; j < orange.length ; j++){
if(actDoc.pageItems[i].note === orange[j]){
try{
actDoc.pageItems[i].selected = true;
}catch(e){
alert ('選択でエラーが出ています。');
};//catch(e)
};
};
};
var selObj = actDoc.selection;
for(var i = 0; i < selObj.length; i++){
selObj[i].fillColor = setCMYKColor(20,0,0,0);
};
actDoc.selection = null;
//紫 ここまで
//黒 ここから
var black = ['y7x6','y7x10',];
for(var i = 0; i < actDoc.pageItems.length; i++){
for (var j = 0 ; j < black.length ; j++){
if(actDoc.pageItems[i].note === black[j]){
try{
actDoc.pageItems[i].selected = true;
}catch(e){
alert ('選択でエラーが出ています。');
};//catch(e)
};
};
};
var selObj = actDoc.selection;
for(var i = 0; i < selObj.length; i++){
selObj[i].fillColor = setCMYKColor(0,0,0,70);
};
actDoc.selection = null;
//黒 ここまで
//グループ化 ここから
for(var i = 0; i < actDoc.pageItems.length; i++){
try{
actDoc.pageItems[i].selected = true; //選択
}catch(e){
alert ('選択でエラーが出ています。');
};//catch(e)
};
app.executeMenuCommand("group");//グループ化
//グループ化 ここまで
function zikuY(y){
var ziku = 0; //y座標のスタート位置
var yziku = ziku - (3 * y);
return yziku
};
function zikuX(x){
var ziku = 0; //x座標のスタート位置
var xziku = ziku + (3 * x);
return xziku
};
function setCMYKColor(c,m,y,k){ //色の関数宣言
var CMYK = new CMYKColor();//CMYKの初期化
CMYK.cyan = c;
CMYK.magenta = m;
CMYK.yellow = y;
CMYK.black = k;
return CMYK
}
免責事項
・このページで配布しているスクリプトを無断で転送・販売・配布することは禁止です。
・アプリケーションのバージョンアップの内容によって利用できなくなる場合がありますのでご了承ください。
・このスクリプトによって起きるいかなる不具合や損害も、責任を負いません。ご利用の際は自己責任にてお願いいたします。
というわけで、今回は以上です。
＜Illustratorでドット絵を描くスクリプト【独学用】＞を
最後まで読んでいただき有難う御座いました。
あなたの「働き方」も、アップデートしませんか？
スクリプトで作業を効率化したその先に―― 「もっとクリエイティブに集中したい」「ルーチンに縛られない働き方をしたい」 そんな思いが芽生えたなら、次は“働き方”を見直すタイミングかもしれません。
●「量より質」を重視した求人のご紹介
●「クリエイティブがわかっている」
●「求人企業を深く知る・密接な関係」
成長できる転職先を探すなら【HIGH-FIVE】がおすすめ
また、デザイナーとしての経験から、グラフィックデザイナーの「転職・独立をサポートする厳選3社」を紹介しています。
PAGE TOP