スライスに役立つ「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

 

これでスライス完了です。

 

他にも便利な機能があるので、こちらで確認してみてくださいね!

投稿者プロフィール

GEEKstaff
GEEKstaff
株式会社GEEKの制作チームです。
Web業界の気になるニュースのまとめと、制作に役立つ記事を投稿しています
このエントリーをはてなブックマークに追加
はてなブックマーク - スライスに役立つ「Slicy」の使用方法
Facebook にシェア
[`evernote` not found]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です