NITE and DAY.blog

ルーチンを嫌う遊び人クリエイターKaiのシゴト観。

【奇跡の神アプリSlicy】最も効率的なスライス作成方法はこれだ!〜photoshopでパーツ出し〜

つい先日、アプリをリリースしたての遊び人クリエイタ―Kaiです。ブログを書いていない時は、プログラマに拉致られながら真面目にデザイナーらしいこともやってるんですよ!

さて。今日は、アプリデザイナーなら誰しもが経験する「パーツだし地獄」についてのお話。
2016年現在、Adobe CC(2015)に代わり、書き出し機能もかなりグレードアップしたPhotoshopをもってしてもなお、オススメしたいアプリがあるので、ぜひ御覧ください。

f:id:doubleM:20161002020324p:plain
※この記事は、2013年06月10日にNAVERまとめに載せた記事のリライトです。

単調で非クリエイティブ。なのにやたらと手間のかかる、1px単位でズレのないデータの作成、@2xサイズのパーツ作成、makeデータとpngの管理、修正が発生するたびに迷宮化していくデータの数々。。これらを一気に解決する神アプリSlicyをご紹介します。

 

こんな「デザイナーあるある」に悩まされていませんか?

デザイン完了!からのスライス作業、何日目…?
> デザイナーにとってはここからが正念場、だったりする

不要な画像スライスを消し忘れ
> 無駄にゴミが書き出ます

「ガイドに基づくスライス」の、ガイドがカオス。
>レイヤーが重なっていると、こうなるんですよね。。

スライス領域内に別のスライス領域を定義できない
>無駄にpsdファイルが増えていったり。。

レイヤの一部を非表示にし忘れた!!さぁもう一度。。
>そんなことをしているうちに、別件が…。

こんな悩みを解消してくれるアプリがあるとしたら?

これを読んでいるあなたがもしもプログラマなら、是非、関係デザイナーにこのアプリを教えてあげて下さい!

Slicy…そう。それは神(macrabbit社)からの贈り物。

いやこれほんと、大げさじゃないんですよ。では、何が出来るのかを見てみましょう。

1. PsdファイルをDrag & Dropで簡単に画像を書き出し!!

レイヤー名に従って、名前も付けてくれちゃいます。

f:id:doubleM:20161002021513j:plain
出典 dribbble.com

2. 画像の大きさもいい感じにトリミング。

いい感じとはつまり、誤ってシャドウが途切れたりなんかしないってこと。
f:id:doubleM:20161002021625p:plain
出典 http://blog.asial.co.jp/1118

3. iPhoneアプリデザイナーが歓喜!Retina書き出し機能も便利♪

「@2x」の名前にするだけで、Retina & 非Retinaパーツを同時書き出ししてくれます。

【Webデザイナー・コーダー向け】震えるほど便利なPSDスライスツール「Slicy」 - Flash Black

出典:f:id:doubleM:20161002021839p:plain
Slicyはあっと驚くほど便利だった。 - colopixie

4. 矩形サイズだって指定出来る!

レイヤーグループの一番下に、「@bound」の名前の矩形を置くだけ!
※非表示にしなくても勝手に透明化してくれます。

f:id:doubleM:20161002022011j:plain
出典 Exporting Retina designs from Photoshop with Slicy | Veerle's blog 3.0

5. PSDに合わせて画像ファイルも自動更新!

PSDを保存すると自動的にSlicyが更新されてファイルが更新されます!

f:id:doubleM:20161002022351p:plain

6. 履歴がのこり、戻すことができます!

なんてデザイナー思いな、素晴らしい機能!!

f:id:doubleM:20161002114927p:plain

7. 複数PSDを同時投入OK!

つまり…
「全部のデザイン画完成〜! あとは書き出しといて♥」・⌒ ヾ(*´ー`) ポイ
ってなことが出来るわけです。

でも、Slicyの良さはこれだけじゃない!

こんなことってありませんか?

前任デザイナーの、データがカオス。。
> レイヤー校正はバラバラ、最終パーツデータが分からない、パーツ名と元データの整合性が取れない…などなど。

名前をミスると、プログラマとバトる。
> あまりにパーツ数が多い場合、一文字単位のミスが蓄積され、お互いの神経をすり減らします。

1/2データなんてバッチで簡単に…!上書き乙 Σ(´Д`lll)
> en / jp フォルダ分けや、xhdpi / hdpi / hdpi(FWVGA)などなど、ディレクトリ構造が深くなるにつれてこうしたミスは増えていきます。。。

これが、Slicyなら…!

1 ★ 命名ミスが減る。

1. レイヤーに「.png」の命名を忘れると書き出されない
 ↑つまり、パーツとデータは常にセット。あれ?と思ったらデータを確認。
2. レイヤー名ミスはともかく、非Retina/ Retina間での名前差は生まれない(自動なので)
3. 同一psd内の別レイヤーも同時書き出し出来るので、名前を一覧出来る状態で命名出来る。

2 ★ 元データ名とパーツ名が、必然的に同じになる!

これは本当に素晴らしいことです。Slicyを使う為に必要な作業は、「レイヤーをパーツごとにまとめてネーミング。」すること。
つまり、引き継ぎ側も引き継がれる側もきちんと整合性の取れたデータでやり取り出来るということ。

3 ★ 無駄なphotoshopファイルが減る!

photoshopを画面ごとに分けたり、元データとパーツ管理の為にphotoshopデータを矩形サイズごとに分割して保存したり、会社によってデータ管理はまちまちです。

しかし、少なくとも、
1. Retina / 非Retina用のファイルを持たなくていいことで1/2に。
2. レイヤーごとに命名出来るため、ボタンパーツなどは1つのファイルで一元管理可能に。

なる分、ファイルも少なくて済みます。

4 ★ 矩形指定のついでに…レイアウトマップ作成だって出来る!

矩形指定の為のレイヤーは、非表示にする必要がありません。かつ、「.png」の付かない画像は書き出されません。
つまり…パーツはSlicyにポイ★レイアウトマップは「command+alt+shift+s」で簡単に作成可能です!

5★形式の異なる画像を同時に書き出せる!

".png"と".jpg”を同時に書き出すことが可能なんです!

そんなSlicyはこのページから入手可能!

MacRabbit - Slicy
まずは無料版(water markが入ります)でお試しください✦

あなたのお気に入りの、パーツ出しツールはなんですか?