[Tips] Photoshop で画像を slice する方法

Fireworks がなくなってしまうので、やってみました。

[markdown]

> * [How to Work With Slices in Photoshop | Psdtuts+](http://psd.tutsplus.com/tutorials/tools-tips/slices-in-photoshop/)

CS6 対象の動画。CS3 で試してみました。
[/markdown]

[markdown]
## ユーザー定義スライスを設定する

* CS6 ではクロップツールの中にスライスツールがある。
* スライスツールで作ったスライスは「ユーザー定義スライス」。青色のタブがつく。
* グレーのタブは「自動スライス」。Photoshopが自動で作成する。

## ガイドに沿ってスライスする

* 水色のラインはガイド（上図）。ガイドに沿って自動でスライスできる。但し、以前の設定が上書きされてしまう。

## 自動スライスの表示・非表示切り替え

* スライス選択ツールに変更すると、自動スライスを隠すトグルボタンが現れる。

## スライスの分割、ユーザー定義スライスを設定する

* スライスを右クリックすると、メニューがあらわれる。

## レイヤーに基づく新規スライスを作成する

* 切り出したいパーツをまとめたレイヤーを選択する。

* 「レイヤー」-「レイヤーに基づく新規スライス」で作成する。

## スライスを消去する

* 「ビュー」-「スライスを消去」から、全てのスライスを消去できる。

## 補遺

### CS6

CS6 を使っていると、プラグインをつかった今風のフローが実現できるみたい。

> * [コーディングを考えたPSDのレイヤー整理 // Border/blog – RYO NAKAE, Web Designer](http://brdr.jp/blog/2013/09/psd-layer-order-for-coding/)

* [MacRabbit – Slicy](http://macrabbit.com/slicy/)
* [CSS Hat – Turn Photoshop Layer Styles to CSS3. Instantly.](http://csshat.com/)

> * [「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ！ | OZPAの表4](http://ozpa-h4.com/2013/05/16/mac-app-slicy-photoshop-slice/)

これは似たようなプラグインなんだろうか。

> * [Cut&Slice me – Photoshop plugin to export your assets – cut and slice me](http://www.cutandslice.me/)

他にもいろいろある。

> * [どんなWebサイト制作にも対応、Photoshopでグリッド、カラムガイドラインを作成する方法PhotoshopVIP |](http://photoshopvip.net/archives/38051)
> * [Webサイト制作を効率化！無料Photoshop拡張機能、スクリプトまとめPhotoshopVIP |](http://photoshopvip.net/archives/56997)

### CC

Creative Cloud は、いろいろ用意されているよう。

> * [無料でCreative Cloudを使い倒せ（14）：Node.jsで動くGenerator for Photoshopなら画像アセットが楽チン書き出しできる！ (1/2) – ＠IT](http://www.atmarkit.co.jp/ait/articles/1310/28/news065.html)
> * [無料でCreative Cloudを使い倒せ（15）：あなたの知らないレスポンシブWebデザインカンプ制作で使えるPhotoshopの新機能 (1/2) – ＠IT](http://www.atmarkit.co.jp/ait/articles/1310/30/news081.html)
[/markdown]