■スライスいらず!もうAdobeさんが買い取って標準にしたらいいんじゃないの?

おつかれさまです。GOROLIB DESIGNです。

いっや、本当に心から三階ラボさんのスクリプトはものすごくすごいです(すみません、ボキャブラリ少なくて)。

中でも超絶なのはイラストレーターデータからWebデザインのコーディング用素材をサクッと切り出すスクリプトです。

もうね、これはAdobeさんが買い取って標準にしたらいいんじゃないの?と思うほどです。もんのすげ完成されてます。

詳細はもちろん三階ラボさんのページにてどうぞ。
参考:Illustratorでアートボードを作り、そして書き出す
http://3fl.jp/nis006

スライス機能なんてまったく使いません(笑)標準機能全否定ですね…。だって使いにくいんだもの。

ちなみに昨今のSVG出力やデバイスの高解像度化を鑑みると、イラストレーターでのWeb素材作成にシフトするのは間違いありません(かも…)。


■アートボードごとに素材にする


このオペレーションをざっくり言うと、

(1)イラストレーターで作成したWebデザインカンプにて
(2)コーディング素材をそれぞれアートボード化して
(3)アートボードごとに素材(pngなど)としてファイル出力

です。(2)と(3)の工程で三階ラボさんのスクリプトを使用します。

(2)はこちら。
Add Artboards
http://3fl.jp/nis006

(3)はこちら。
Export Artboards by Dialog
http://3fl.jp/is003


■素材をアートボード化する際のくふう


もう本当に心からすばらしいスクリプトなのですが、(2)だけ少々注意が必要かなと私の実例をご紹介いたします。

まず、完成したデザインカンプのアートボードを複製します。
06

次に素材として切り出す部分をすべて塗りなしの線にします。
55

素材名を入力します。これにはエクセルの連結関数が便利です。
01
13

こんな感じにしてプレーンテキストをイラストレーターへ貼り付け。
41

テキストをバラします。イラレでべんりさんの「テキストばらし」が本当に便利です。
21

参考:テキストばらし
http://d-p.2-d.jp/ai-js/pages/01_scripts/text/

これをそれぞれの素材枠に近づけて、枠を文字をグループ化します。
12

最近グループ化のショートカットを見直しました。こちらを参考ください。
参考:グループと思ったらグループじゃない!問題を根底から見直しました(Illustrator)
http://gorolib.blog.jp/archives/57037391.html

※注意!
このとき、グループ化が入れ子になっていると(2)のスクリプトがうまく起動しないようです。手作業になりますが慎重に…。

くれぐれも
・グループ化されていない文字と
・グループ化されていない枠を
・1回だけグループ化する
ようにしてください。ここで1時間くらいハマった記憶があります…。

次に枠線もなしにしてください。線ありは作業の便宜上で、実際には線なしじゃないと「線まで素材になってしまう」ためです(後述)。

自動選択が便利かと思いますが、これはいろいろ方法あるのでご自由に…。
22


■ここで保存。以降は保存しません。


この状態でイラストレーターファイルを保存します。以降の作業は保存しないほうが私は好きです。なぜなら素材作成をやり直す場合にわかりやすいからです。

文字と枠をカットして本体のアートボードにペーストします。
・前面にペースト…コマンド+F
・同じ位置にペースト…シフト+コマンド+V
36

(2)のスクリプトを起動します。
13
 
45

そうすると枠とグループ化した文字列がアートボード名となり、それぞれがアートボードになります。

すげっ!

つづけて(3)のスクリプトを流すとpng素材(その他もok)が自動作成されます。

すげっ!(2回目)
18
26
58

ね、もうこれ標準機能でいいでしょう?こんな便利なツール他にありません!三階ラボさんいつもお世話になっております。ありがとうございます。


ではでは出羽の海。