45
09


■ほぼ自動!スライスって実は2工程なんですよね
^ ^

※本スクリプトから新作スクリプトは月額マガジンに含めていきます。

 おつかれさまです。@gorolibです。

 IllustratorでWebデザインカンプを制作されている方は、そのスライスをどうされていますでしょうか?標準機能はさておき(スルー早っ!)スライスって実は2工程ありますよね。

 工程1:スライス範囲確定
 工程2:スライス実施(png出力)

 今回はそれぞれの工程に対してスクリプトをご提案します。具体的には選択オブジェクトにピクセル最適化されたクリッピングマスクをかけ、その後、選択されたクリッピングマスクをアートボード番号+連番にてpng出力するものです。


■工程1:スライス範囲確定(G388_SlicePNG.jsx)

 まずはスライス範囲を確定します。オブジェクトの座標そのものをスライス範囲としても良いのですが(まとめたいところはグループ化するなど)、デザインカンプ制作工程ではスライスは意識したくないので、専用スクリプトを作りました。

 このスクリプトは選択範囲に対してピクセル最適化されたクリッピングマスクをかけます。この「ピクセル最適化されたクリッピングマスク」というのがこのスクリプトの最大の売りです。

 もともとIllustratorでWebデザインカンプを作るときはピクセル最適化を意識して作ります。しかしベクターデータであっても、ロゴデータやポイント文字などはそのままの座標ではどうしてもピクセル最適化できませんよね。
58
01
54
58


 このスクリプトは選択オブジェクトにピクセル最適化されたクリッピングマスクをかけて、この問題を解決するものです。
05
09
06
09



 稚拙ながら以前にもご提案していたのですが、改めて再提案いたします。



■スライス対象じゃなくても座標の指示に使えます

 またスライス対象ではなくても、独立したポイント文字でURLリンクがあるものなど、コーダーさんにはピクセル最適化された座標の指示が必要かと思います。その際は座標表示スクリプトと併用いただければ幸いです。
28




■工程2:スライス実施(png出力)(G388_SlicePNG.jsx)

 スライス範囲が確定したらpng出力します。これも専用のスクリプトをご用意しましたが、工程1で作られた「ピクセル最適化されたクリッピングマスク」を拾ってpng出力します。
09
 番号はアートボード番号+連番(自動採番)ですが、後から作り直しもできるように番号指定画面を用意しています。
22


■今回のスクリプト情報


【スクリプト概要】
工程1:スライス範囲確定…選択オブジェクトにピクセル最適化されたクリッピングマスクをかけます。

工程2:スライス実施(png出力)…選択されたクリッピングマスクをアートボード番号+連番にて、png出力します。

【スクリプトファイル名】
G388_SlicePNG.jsx
G389_PixelClip.jsx


【使い方】
<工程1:スライス範囲確定>
(1)ひとかたまりでスライスしたいオブジェクトを選択します
(2)このスクリプトを起動します
(3)選択範囲をピクセル最適化(座標に端数が出ないように)してクリッピングマスクをかけます

<工程2:スライス実施(png出力)>
(1)png出力したいクリッピングマスクオブジェクトを選択します
(2)このスクリプトを起動します
(3)png出力フォルダを指定します
(4)アートボード番号+連番にてpng出力します


お役に立てれば幸いです!ではでは出羽の海。


■ダウンロードはこちらから


https://note.mu/gorolib/n/n71f5f5d4b8a1