TSUNAGU GROUP TECHNOLOGIES

TGT TechBlogTGT TechBlog

フロントエンドからバックエンドまでの技術ナレッジ

スライスに役立つ「Slicy」の使用方法

「Slicy」とは

先月からGEEKの一員となりましたデザイナーの鄭(てい)です。
今回は、Photoshop上で画像をスライスする際に、とても便利なアプリケーションを紹介したいと思います。

 
スライスする時、いちいちPhotoshop上で画面を拡大したり、
透過pngの光彩やドロップシャドウなど、どこまでスライスしていいのか分からない…
といったところで少々戸惑ったり手間がかかりますよね。
 
そんな時に活躍するのが「Slicy」!Slicyは、Photoshop上の画像を簡単にスライスして書き出してくれるアプリです。
ダウンロードはこちらから。
Slicyを利用する大きなメリットとしては以下の通りです。

  • わざわざ画像を拡大しながらスライスしなくてもあっという間にスライスしてくれる
  • 自動更新機能があるので、一度Slicyでスライスしておけば、Photoshopで修正後、
    保存するだけで自動的に変更内容を更新して上書きしてくれる(再度スライスする必要なし!)

また、便利な機能もたくさんありますが、今回はスライスの手順を画像付きで紹介したいと思います。
 

簡単3ステップ!「Slicy」でスライスするまで

  1. Slicyの書き出し用フォルダを作成
  2. Photoshop上でレイヤーまたはレイヤーフォルダに拡張子付きのファイル名を付ける。
  3. スライスしたいPhotoshopデータをSlicyにドラック&ドロップして書き出し用フォルダを選択

以上が大まかな流れです。(というかこれだけです)
 
それではまず、スライスした画像をまとめる書き出し用フォルダを作成します。
 
geek_Slicy00
 
 
 
次に、Photoshopでスライスしたいファイルを開きます。
 
 
 
geek_Slicy01
 
今回は以下の通りにスライスしたいと思います。
 
geek_Slicy01
 
レイヤーまたはフォルダに、それぞれ拡張子付きのファイル名を命名します。
※pngに関しては、透過してないレイヤーはpng8、透過しているレイヤーはpng24に自動的に振り分けてくれます。
 
 
これでほぼスライスは終わったも同然です!
あとはこれをSlicyにドラック&ドロップするだけです。
 
geek_Slicy03
 
すると。。。
 
geek_Slicy04
 
 
それから画面上の「Save」ボタンを押下して、はじめに作成した「geek」フォルダに移動。
 
 
geek_Slicy05
 
geek_Slicy06
 
これでスライスした画像をひと通り格納してくれます。
 
最後に、「今後ファイルを保存する度に自動的にスライスした画像も上書きしていきますか?」と問われます。 この機能を利用すれば、上で述べた通り、今後はPhotoshopで保存するだけでスライス画像も新しく上書きしてくれます。 ※Slicyを起動してないと自動更新機能は作用しません。
geek_Slicy07
 
これでスライス完了です。
 
他にも便利な機能があるので、こちらで確認してみてくださいね!