読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【Web制作】もうスライスなんてしてられない。Slicy で 神速コーディング!

f:id:sitk:20151220110232p:plain

まいど!小畑タカユキです。

今日は久々に、Web制作な話。
自分の労力をなるべく少なくするべく、日々研究を重ねております。
そんな中、Slicyという、神ツールと出会うのです。

http://macrabbit.com/slicy/

今では、Photoshopの新しいバージョンでよく似た機能が付いてるようですが、 レビューを見ているとイマイチな印象。

ということで。

この一週間使ってみた感想など書いておきましょう。

Slicy とはなんぞや

まずは、Slicy とはなんぞや。というお話。 簡単に言うと、PSDをドラッグ・アンド・ドロップして、画像を自動で書きだしてくれるツール

まぁ、これだけだとイメージがつかみにくいかな。

詳しくは、こちらの記事達を参考にしてみてください。

colopixie.com

ozpa-h4.com

ざっくり Slicy の使い方

立ち上げると、こんな画面がでてきます。

f:id:sitk:20151220105814p:plain

ここにポイッとPSDを入れるだけ。

簡単ですねw

ま、ポイッと入れるだけとは言いましたが、少しPSDの作り方を覚える必要があります。

ポイントは3つ! - フォルダにファイル名を書く - @2x を付けると、レティナ用の画像まで吐き出してくれる - 指定のサイズで書き出したいときは、@bounds という名前で書き出したいサイズのレイヤーをつくる

これだけ覚えておけば、もう怖いものはない。

f:id:sitk:20151220105823p:plain

こんな感じ。

簡単ですね!

ちなみに、PSDをドロップすると、、、

f:id:sitk:20151220105828p:plain

こんなかわいい感じで画像を生成してくれます。

f:id:sitk:20151220105842p:plain

ほら、できた!

簡単ですね!

ただし、PNGかJPGしか書き出してくれないので、その点は要注意。

まとめ

デザインを作ってもらう時も、フォルダ構成を意識してもらえれば、もっと楽に書き出せそうです。

機械にでもできる仕事はどんどん任せていきたい。

これからのWeb業界は、どんどん自動化が進むでしょう。

自分がやるべき仕事は何か?を考えた時、作る前の準備(設計)に時間を使いたい。

そんな、コーダーさん必見です!

是非、お試しくださいー。

http://macrabbit.com/slicy/

でわでわ。

追伸

今更ながら、Twitterはじめました! フォローよろしくお願いいたします。 twitter.com