Photoshopで高速にスライス出来る！「レイヤーに基づく新規スライス」

WEBサイトのコーディングで特に面倒なのが画像のスライスですよね。スライスツールでチマチマチマチマスライスするのはもう嫌になってきます。

そこで今回はPhotoshopでの画像のスライスを高速化できる「レイヤーに基づく新規スライス」機能をご紹介したいと思います。

Photoshopでのスライス

Photoshopでスライスする時はスライスツールを使うのが定番ですが、一発で思い通りのサイズにスライス出来ないですよね。

大体ずれてしまって、ずれたのを調整〜ってやる必要があるんですけど、これが面倒でしょうが無いです。特にグラデーションが掛かってる画像なんかの場合「これどこまでグラデーションかかってるんだろう…？」とか注意しながらスライスしないといけなくて更に面倒です。

レイヤーに基づく新規スライス？

そこで今回の「レイヤーに基づく新規スライスです。」

使い方は簡単！スライスしたいレイヤーを選択した状態でメニューの「レイヤー > レイヤーに基づく新規スライス」を実行すればOKです。

レイヤーにグラデーションが掛かってる場合でも、いい感じにスライスしてくれます。

クリッピングマスクに注意

注意しないといけないのは、クリッピングマスクが掛かってるものをスライスしたい場合は、マスクを選択した状態で「レイヤーに基づく新規スライス」を実行しないとちゃんと思い通りのサイズにならない点です。

選択ツールの「自動選択」機能でレイヤーを選択して〜、ってやってると、クリッピングマスクに気付かずめっちゃでかくスライスされてしまってびっくりするときがあるので注意しましょう。

アクションを使って複雑なパーツもスライス！

こんな便利なこの機能ですが、１点問題があります。

スライスする対象が単純なレイヤ一枚じゃなく、色々なレイヤが組み合わさって出来ている（画像の例だとタイトルとサブタイトルをいっしょの画像にしたい時とか）時に上手くスライス出来ないので、その場合手で調整する必要が出てくるのです。

こういうパターンの場合は、「スライスしたいレイヤーを全て選択 > レイヤーに基づく新規スライス > ユーザー定義スライスに変更 > スライスを結合」とすれば解決できます！

「毎回こんな手順踏んでられるか！」ってお思いの方、全くもってその通りなのでこの手順はアクションに登録しておいちゃいましょう。アクション作るのが面倒！という方のためにアクションファイルを用意しましたので良ければご利用ください。スライスしたいレイヤーを選択した状態で配布したアクションを実行すれば一発でスライス出来るようになっています。

アクションファイル：ftpa_selection_slice

以上

スライス作業はコーディングの中でもかなり時間がかかってしまう割に面白くない部分でもあるので、出来るだけ効率化して他の楽しい部分に時間を割けるようにしましょう！

以上、たにっぱでした〜