リンクをクリップボードにコピー
コピー完了
・一つの画像を構成するパスが66個あり、それぞれHTML用に切り出します。
・位置が重要になるので全てアートボードサイズになります。
・これの色違い3種類なので計198個作ります。
・CCを使用しています。
これを一括でできるようにしたいのですが
どんな方法が考えられますか?
パスの正しい位置が分かる様に一つのアートボードでレイヤーを66個にしたいですが
アクションは個別のレイヤーを認識しないので自動で切り出すのは難しいでしょうか?
何か手段があったら教えてください。
>輪になってる部分はあります
…が、複合パスとどう違うのか、よくわかりませんが
ChatGPTをこき使ってみました
「illustratorのスクリプトを書いてください
自分で書けるんですがめんどくさいのです
ドキュメント上のpathItemを1つずつ、アートボードサイズでsvg形式で保存するやつです。
複合パスは存在しないので考慮しなくていいです。
段取りは以下に沿ってください。
1 すべてのpathItemがアートボードの外へ出るように移動、またはアートボードのほうを移動。移動量は覚えておく
2 pathItemsでループし、1つずつ工程1の移動量の反対ぶん移動して、アートボード内にpathItemが1こだけある状態にする
3 コピーを保存:svg形式
4 工程2で移動したpathItemを削除
5 ループ抜け、終了報告」
というプロンプトでした。
書いてもらったスクリプトこれです。
かんたんなテストでは問題なさげでした。
// pathItemsを1つずつアートボードサイズでSVG保存するスクリプト
// 複合パスは考慮しない(単純なpathItemの...
リンクをクリップボードにコピー
コピー完了
最終的にどのようなファイル形式を作成したいのかわからないので何とも答えようがないのですが、たとえば次のページで紹介している手順でおおむねやりたいことができるのか、できないとしたらどこが違うのかを書いてもらったら早いかもしれません。
illustrator レイヤーごとにPDFやPNGで書き出す方法
まるっきり違う、そもそもPhotoshopを持っていないということでしたら、保存したいファイル形式と最終仕上がりのイメージ図があると解決につながりやすいかも。
リンクをクリップボードにコピー
コピー完了
リンクをクリップボードにコピー
コピー完了
スクリプティングのタグが付いてたので書き捨てレベルの物を書いてみました。
アートボード基準でレイヤー毎にpngを書き出します。
var docName = app.activeDocument.name;
var lyr = app.activeDocument.layers;
var fdr = Folder.selectDialog("保存先フォルダの選択");
function exportPng(dc, flder, name)
{
var fl = new File(fdr.fsName + "/" + name);
var exportOptions = new ExportOptionsPNG24();
exportOptions.antiAliasing = true;
exportOptions.transparency = true;
exportOptions.artBoardClipping = true;
app.activeDocument.exportFile(fl, ExportType.PNG24, exportOptions);
}
for (var i=0;i<lyr.length;i++)
{
for (k=0;k<lyr.length;k++)lyr[k].visible = false;
lyr[i].visible = true;
exportPng(app.activeDocument, fdr, "test"+i+".png")
}
やっつけなんで、効率の良いものではありません。
リンクをクリップボードにコピー
コピー完了
リンクをクリップボードにコピー
コピー完了
「一つの画像を構成するパス」と「拡大縮小できるsvgにしたい」から、
元のデータの状態がちょっと想像しきれずにいます。
「画像」は、ラスター画像ではないのでしょうか?
多少お手間でも、「こんな状態」がわかるようなスクショなどがあればいいなと思います。
実際のデータを見せられないのであれば、見せる用のかんたんなサンプルは作成できますか?
リンクをクリップボードにコピー
コピー完了
リンクをクリップボードにコピー
コピー完了
あー、意味わかったかも…
一般に「画像」というとラスター画像(ピクセルの集まりでできたもの)を先に思い浮かべてしまう人が多数だとは思いますよ。
今回はベクターのイラストレーション(パスだけでできた図柄)なのですね。
作業イメージはこんなかんじでしょうか?
これをやるとなるとスクリプトなどしか思いつかないのですが、
たとえば複合パスなどはどうなるのでしょうか?
ドーナツなら2回に分けるんですか?
リンクをクリップボードにコピー
コピー完了
お返事が遅れました。
いえ、一筆書きのような画像なので複合パスは無いです。
それぞれ一本の交わることがない線でできています。
(輪になってる部分はあります)
リンクをクリップボードにコピー
コピー完了
>今回はベクターのイラストレーション(パスだけでできた図柄)なのですね。
>作業イメージはこんなかんじでしょうか?
あ、一つ目の質問はその通りです。
順番が間違ってすみません。
リンクをクリップボードにコピー
コピー完了
>輪になってる部分はあります
…が、複合パスとどう違うのか、よくわかりませんが
ChatGPTをこき使ってみました
「illustratorのスクリプトを書いてください
自分で書けるんですがめんどくさいのです
ドキュメント上のpathItemを1つずつ、アートボードサイズでsvg形式で保存するやつです。
複合パスは存在しないので考慮しなくていいです。
段取りは以下に沿ってください。
1 すべてのpathItemがアートボードの外へ出るように移動、またはアートボードのほうを移動。移動量は覚えておく
2 pathItemsでループし、1つずつ工程1の移動量の反対ぶん移動して、アートボード内にpathItemが1こだけある状態にする
3 コピーを保存:svg形式
4 工程2で移動したpathItemを削除
5 ループ抜け、終了報告」
というプロンプトでした。
書いてもらったスクリプトこれです。
かんたんなテストでは問題なさげでした。
// pathItemsを1つずつアートボードサイズでSVG保存するスクリプト
// 複合パスは考慮しない(単純なpathItemのみ)
// by ChatGPT(怠け者対応バージョン)
(function () {
if (app.documents.length === 0) {
alert("ドキュメントを開いてください。");
return;
}
var doc = app.activeDocument;
var ab = doc.artboards[doc.artboards.getActiveArtboardIndex()];
var abRect = ab.artboardRect; // [左, 上, 右, 下]
var abLeft = abRect[0];
var abTop = abRect[1];
var abRight = abRect[2];
var abBottom = abRect[3];
// ===== 工程1:全pathItemをアートボードの外へ移動 =====
var moveX = abRight - abLeft + 100; // 適当にアートボード幅ぶん右へ出す
var moveY = 0; // 縦方向移動はなし
for (var i = 0; i < doc.pathItems.length; i++) {
var p = doc.pathItems[i];
p.translate(moveX, moveY);
}
// 保存フォルダを指定
var destFolder = Folder.selectDialog("SVGを書き出すフォルダを選択してください");
if (!destFolder) return;
// ===== 工程2〜4:ループで1個ずつSVG保存 =====
var total = doc.pathItems.length;
for (var i = total - 1; i >= 0; i--) {
var p = doc.pathItems[i];
// 工程2:対象pathItemをアートボード内に戻す
p.translate(-moveX, -moveY);
// 工程3:コピーを保存(SVG形式)
// SVGファイル名を path_001.svg のように
var fileName = "path_" + ("000" + (total - i)).slice(-3) + ".svg";
var saveFile = new File(destFolder + "/" + fileName);
// SVGオプション設定
var options = new ExportOptionsSVG();
options.embedRasterImages = true;
options.fontSubsetting = SVGFontSubsetting.None;
options.coordinatePrecision = 3;
options.preserveEditability = false;
// 書き出し
doc.exportFile(saveFile, ExportType.SVG, options);
// 工程4:pathItem削除
p.remove();
}
// ===== 工程5:終了報告 =====
alert("完了しました!\n" + total + " 個の pathItem をSVGとして書き出しました。");
})();
スクリプトに不慣れな場合、こちら便利なのでどうぞ
https://tama-san.com/jsx_downloader.html
スクリプト部分をまるごとコピーして、リンク先にペーストしてください。
結果に不満点があれば、同じ要領でChatGPTやClaudeなどに直してもらうとよいかもです。
リンクをクリップボードにコピー
コピー完了
有難うございます。
少し試したのですがちゃんとバラバラのSVGに書き出せました!
ただ補足通り少し修正が必要だったので、私もAIで修正してみます。
今回初めてillustratorでスクリプトを試したので、いい勉強になりました。
丁寧に対応していただき感謝いたします。
リンクをクリップボードにコピー
コピー完了
複数オブジェクトの位置合わせのためにレイヤーで作成するのは、扱いにくいのであまりオススメしません。
書き出す数だけアートボードを用意します。アートボードの座標とサイズがピクセル整合するように気をつけてください。
オブジェクトの位置合わせは「同じ位置にペースト」でアートボードの同じ位置に配置されるので、そちらを使用すると良いですよ。
アートボードに書き出しのファイル名をつけます。「任意の文字列+連番」ならアートボードパネルメニューの名前をつける、で一括で作成できます。
スクリーン用に書き出し のアートボードタブでjpg、png、svgなどそれぞれの形式で書き出しできます。
リンクをクリップボードにコピー
コピー完了
有難うございます。
この方法も見たんですが、66個のボードを確認するのが大変なので採用しませんでした。
確かにcom+Fで同じところに来ますよね。
まず一つのボードで66個のレイヤーで作り、それを66個のボードに分ける
と言う機能があれば使いたいんですが無いですよね。笑
リンクをクリップボードにコピー
コピー完了
「HTML用に」、という部分と「SVGで良い」という部分が気になったので、こういう方法もありますよ、というのを書いてみようと思います。想定の条件と違っていたらスルーしてください。
Webページ上にSVG形式で表示させるのであれば、という条件付きですが、イラスト部分をバラバラに書き出さず、一つのSVGにまとめた状態で、任意のレイヤーのところだけを表示させるSVGスプライトという方法があります。すべてのアイコンを一つのSVGにいれておいて、使うところで呼びだす、というようなやりかたです。
レイヤーひとつひとつに名前(=idとしてCSSに対応します)をつけたりする必要はありますが、シンプルなアイコンのようなデータであればデータ量も軽いです。66個のパーツがあるイラストとのことですが、そのなかで動的に表示非表示を切り分けるような場合におすすめです。(逆に細かいイラストだったり色数が多い場合はデータが重かったり手間が煩雑になるのでおすすめしづらかったりします)
リンクをクリップボードにコピー
コピー完了
お返事が遅れて申し訳ございません。
SVGスプライトを調べてみました。
なるほど、このやり方なら求める用途として使用できます!
しかし、やはりSVGを扱うのが困難だという事で
今回はビットマップで行く事になりました…
色々な知恵を頂きとても勉強になりました。
interemit様含め、みなさまご教示くださって有難うございます。
アドビコミュニティ(フォーラム)が進化します!新しい体験を1月にお届けします。
詳細はこちら