technologiesこの広告は、90日以上更新していないブログに表示しています。書き出しがもっと楽に行えるスクリプトを作成しました。今後はこちらを使ってみてください。2-hats.hateblo.jpIllustratorに限らずデザインカンプから画像部品を切り出すのって面倒ですよね。Fireworksのスライスツールは割と使いやすい方でしたが、illustratorのスライスツールは使いやすいとは言いがたい。Exporterという便利なエクステンションがあるようですが私がよく使うCS6の環境では使えません。調べてみると一旦レイヤーに分ける手間があったり、ドロップシャドウが欠けてしまったり、画像のサイズを指定できなかったりとUI向けに使うにはちょっと辛いかなと思うような点がありそうでした。(ちなみにCCは持ってないので使ったことはありません)そこで、上記の課題を解決しつつ、デザインカンプからできるだけ素早く切り出しが行えるスクリプトを作ってみようと思いました。SVGの形式で一括書き出しします。1.書き出したいオブジェクトを選択してください。一つの画像にまとめたいものはグループ化してから選択してください。2.プラグインを実行し、希望の画像形式を選択して「OK」を押してください。実行すると、AIファイルと同じフォルダ内に「(AIファイル名)_Image」というフォルダが自動的に出来、切り出した画像が保存されています。切り出しの仕様できるだけ操作を簡単にするため次のような仕様に決めました。・画像の大きさは「オブジェクト>スライス>作成」で作ったスライスと同じです。線の太さやドロップシャドウなどのアピアランスの効果まで含んだ大きさで切り出します。・背景透過の状態で切り出します。スライス機能のように、背景を透過にするためにレイヤーの表示・非表示を繰り返す作業は必要はありません。・ファイル名は自動的に連番でつけます。ファイル名を任意でつけられる仕様も考えたのですが操作に手間がかかるようになるかもしれないと考えたので今回はドロップしました。(バージョン2ではファイル名をつける機能を追加することを考えています)・SVGで切り出す場合、処理の時間が他より長めになる傾向にあります。切り出し途中でフリーズっぽい画面になったとしてもしばらく待ってみてください。座標と大きさ自動で画像を切り出せたのはいいけれど、それらの座標をいちいち手作業で探し出していくのは面倒です。このスクリプトは「画像の範囲を長方形パスで描く」というオプションがあります。これにチェックして切り出すと、カンプのAIデータに画像の範囲を示す半透過の四角形パスを追加します。こちらのパスの大きさや座標を元にレイアウト指示を素早く作ることが出来ます。Area」というレイヤーに描く仕様になっているため、元々のデザインを変更してしまうということはありません。画像エリアを指定して切り出す画像作成のスクリプトやプラグインは画像の大きさを自動で決めてしまうものが多いと思います。実務では画像のサイズを指定して切り出すことがほとんどかと思います(アイコンのサイズは全て同じにしたいなど)。そこで次のような手順で切り抜く方法を考えました。1.切り出したい範囲に半透明の四角形のパスを描く。2.切り出す対象と合わせてグループ化する。3.このスクリプトを起動し、画像形式を選択してOKを押す。3つのアイコンが同じ120☓120pxで切りだされているのがわかると思います。SNOWのアイコンは試しに上半身だけ切り抜く設定にしてみました。このように思い通りの大きさで簡単に切り抜くことができます。ちなみに動画内ではグループ化は「Ctrl+G」のショートカットを使っています。Area」に引っ越します。そのため「切り出せたのはいいけれど、グループ化を解除する手間が面倒!」ということが起きないようにしています。前項でも説明したように、この半透過パスを座標指示に活用していただくことができます。切り出す範囲として認識するパスは下記の条件にしています。グループの一番手前にある四角形のパスオブジェクトである塗りがベタ塗り(グラデーション等を使用していない)透過度が設定してある。上手く切り抜けないときは、この設定になっているかご確認ください。その他CS6をターゲットとして開発していますがCS5でも動作しました。細かくは動作検証できていません。私の間違いかillustratorの仕様のせいか分からないのですが、たまに思いもよらない切り抜き方をしてしまうバグがあります。ご協力頂けるのであれば、その現像をコメントとして連絡いただけると助かります。このスクリプトはMITライセンスで配布していますので無保証です。topの違い座標をいじるようなスクリプトを作成していると、たまに予測不...2014-10-03illustratorでUIデザイン:属性抽出スクリプト文字のサイズ・色やパスの線の太さ・塗りの色などを抽出してく...2014-09-17illustratorでUIデザイン:スクリプトの注意点illustratorのスクリプトについて調べていくうちに意外と引っか...2014-09-04illustratorでUIデザイン:ボタン量産スクリプトまたillustrator用のスクリプトを作成してみました。»プロフィールid:two-hatsUIデザイン関連のネタや、個人的なインテリアの趣味など思いついたものを投稿するごった煮なブログです。(2)月別アーカイブはてなブログをはじめよう!two-hatsさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。