2013/11/01

デザイナー必見!photoshopでのスライスを素早く正確に行う方法

デザイナー必見!photoshopでのスライスを素早く正確に行う方法

仕上げたデザインをHTMLコーディングする際、必ず行うのが各パーツのスライスです。

手で一つ一つスライスしていては時間が掛かりますし、ドロップシャドウや光彩の範囲が正しくとれてなくてスライスをやり直す・・・なんてことにもなりかねません。

そんなとき役立つのがphotoshop CS5から追加されている『レイヤーに基づく新規スライス』という機能です。選択中のレイヤーを自動でスライスしてくれる優れもので、ドロップシャドウなどの範囲が一見分かりにくいレイヤーも正確にスライスすることが出来ます。

目次

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

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

レイヤーに基づく新規スライス』は、photoshop CS5から追加された機能で、選択中のレイヤーを指先一つでスライスしてくれる非常に便利な機能です。

ガイドを引いたり、拡大したりという煩わしい作業がすべて無くなり、素早く正確にスライスを行うことが出来ます。

実際に使ってみた

例えば↓のような雲をスライスしようとした場合、どこからどこまででスライスすれば良いか判断するのが大変です。

雲をキレイにスライスする

では実際に『レイヤーに基づく新規スライス』を使用してスライスしてみましょう。

レイヤーに基づく新規スライス』は、レイヤーごとにスライスを作成するので、スライスする雲レイヤーを選択します。

雲レイヤーを選択する

レイヤーレイヤーに基づく新規スライスを選択すれば、もうスライスは終了です。

レイヤーに基づく新規スライスを選択

実際にレイヤーの大きさに合わせてスライスが作成されました。肉眼では判別しづらい部分もしっかり正確にスライスされているのが分かると思います。

スライスの作成

他には太陽やレンズフレアなど、全体の大きさが把握しづらい要素の切抜きにも適しています。

さらにスライスが捗る方法

今度は複数のレイヤーをまとめてスライスする際のコツをご紹介します。

以下のようなボタン4つをまとめてスライスします。

SNSボタン

すぐにでも『レイヤーに基づく新規スライス』を使いたいところですが、レイヤーが細かく分かれているため使用することが出来ません。

レイヤーが細かく分かれている

そこでフォルダ全体を一つのレイヤーとするために『スマートオブジェクトに変換』を使用します。
これで一つのレイヤーという扱いになります。

スマートオブジェクトに変換

4つすべてのフォルダをスマートオブジェクトに変換したら、スライスしたい4つのレイヤーを選択します。

4つのレイヤーを選択

この状態で『レイヤーに基づく新規スライス』を使用すれば、4つのスライスが瞬時に出来上がります。

4つのスライスが完成

このようにして複数のスライスでも一括で行うことができ、作業時間の大幅な短縮につながります。
※『ラスタライズ』でも『スマートオブジェクトに変換』と同じ状態になり、『レイヤーに基づく新規スライス』が使用できますが、再編集可能なスマートオブジェクトの方が後々楽です。

まとめ

この方法を使用すれば、太陽や雲のようなスライスがしづらいものでも素早く正確にスライスすることが可能になります。もし一つ一つ丁寧にスライスしているという方は、ぜひ一度試してみて下さい。