こんにちは！GrowGroupでエンジニアをしている石原です。
いや〜最近めっきり暑いですね！外を歩いている時に風が吹くと非常に気持ち良い季節です。
荒れ狂う波にもまれ〜私は〜風に〜なり〜たい〜♪
そうです。ものすごいスピードでコーディングして風になりたい。
ということで、Adobe Illustrator から速く、風のようにスライスができる方法をシェアしたいと思いま す！
先に結論
・Sketch を利用する (Windowsの人はすみません)
・Adobe Illustrator のラスタライズ機能をキーボードショートカットに登録する
・PSDや、イラレ上の埋め込み画像、リンク画像もSketchに貼り付けれる
・Sketch に貼り付けてひたすら管理
・Sketch ではビットマップレイヤーをダブルクリックすると
面倒だったイラレからのスライス ~ 2年前
現在、GrowGroupではデザインは ほとんどイラストレーターで制作しています。
2年前はまだ書き出し機能等もなく、非常に、非常に苦労した覚えがあります。
アートボードを使った方法とか、Layer Exporter というエクステンションを使ったスライス方法ですとか、
はたまた初心に戻ってスライスツールを使ってみるとか。
まさに試行錯誤の連続。
便利なSketchでの書き出し
Photoshopでさえ、レイヤーから簡単に書き出しできるのに。。。。
Sketchではさらに便利に高速に書き出しできるのに。。。
なんで！！！！！イラレは！！！！！！！！！できないんだ！！！！！！！よ！！！！！！！
と思っていた時期です。
ある時、僕は間違ってSketchにPSDファイルをドラッグドロップしてしまいました。
「エラーかなにか表示されるかなぁ〜」と思っていましたが、
そこには、、、、なぜがPSDがビットマップ画像として表示されているではありませんか。。。。。。
？？？！！！！！
そうです。
Sketch は psd、aiでも、ドラッグ、もしくはコピペすれば、ビットマップとして取り込むことが可能だったのです。
(恐らくpsd、ai ファイルの内部で持っているサムネイル画像だとは思いますが)
特に品質的にも問題ないと判断し、イラストレーター内で利用しているpsdの写真データなどはSketch にそのまま貼り付けるようになりました。
(ちなみに、イラレ上からもコピペ可能です)
鍵を握るのは「ラスタライズ」
もうこの時点で イラストレーターでのスライスはやめて、Sketch でスライスしようと考えていたのですが、
イラストレーター上で作っているレイヤーについては、コピペに成功する時もあれば失敗するときもあります。
こちらはSVG、またはPDFの互換上仕方がないのかなとも思いますが、諦め切れない。。。。
そんな時、イラレでも『ラスタライズ』できるということを知りました。
つまりは、アートボード上でビットマップ化できる
キーボードショートカットにラスタライズを登録し、書き出したいレイヤーを選択し、
おもむろにラスタライズ。
解像度を144ppiに設定するとRetinaにも対応できます。
イラレから Sketch に局所的にデータをコピーしたい時には、『ラスタライズ』してからSketch へコピペし、書き出すということが可能となりました。
もう、あとは書き出したいレイヤーを選択してはラスタライズし、Sketchへコピペ。
それだけです！
イラストレータの書き出し機能は、クリッピングマスクがかかっていると余白がでてしまうので、
正直二度手間なんですよね。
もうスライスに時間を取られない
Sketch を利用して作業を行うことで、圧倒的にスライスにかかる時間は短縮されました。
3倍ぐらい速くなるのでは！と思っています。
もうこの方法になってから大分時間は経ちますが、未だにこれを超える効率の良い方法は考えつきません！
イラストレーターからコーディングすることに困っている方は是非参考にしていただければと思います！
以上、現場からでした〜
