珍しく、Photoshopネタでも。
コーディング関係だからこのブログの主題っぽい！

今回は、PhotoshopCS6を利用したスライスに関するアレコレです。
コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。

内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。
ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！

何はともあれ、Photoshopを起動します。
これはすごく重要な作業です。


Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。
CS3の頃はサクサクで良かったんですが。

起動したら、psdファイルを開きましょう。

普通のスライス

まずは普通にやった場合のスライスです。


スライスしたい部分を拡大して、スライスツールで選択してやる感じですね。
シャドウとか落ちてると高さが分かりにくくて時間が掛かっちゃいます。
んで、似たようなボタンとかが続く場合は、スライスをコピーしたりしてやったりすると思います。
もっとも基本的なスライスツールの使い方でしょうか。

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

初めて、レイヤーに基づく新規スライスを知った時は感動したのを覚えてます。
もうコレがないとスライスなんてやってられないです。


やり方はカンタンで、スライスしたいレイヤーを選択して、メニューから、レイヤー→レイヤーに基づく新規スライスを選択すればOKです。
動画ではカーソル動かしてやってますが、この際、Alt＋L → B と流れる様にタイプすると良い感じです。

複数のレイヤーを一度にスライスして統合

先ほど説明した、レイヤーに基づく新規スライスはレイヤーを複数選択して行うと、一度にスライスが出来るので便利です。
別々になったスライスは、一度﹁ユーザー定義スライス﹂に変更するとスライスを統合することが出来ます。


見出し部分と装飾部分のレイヤーが分かれてるのはよく有るので、コレも中々使えるテクニックかと思います。

スライスしたいグループを統合してから一気にスライス

先の例と似ていますが、一度グループを統合してからレイヤーを複数選択して、レイヤーに基づく新規スライスをやるといい感じで一気にスライス出来ます。


若干何やってるか分かりにくいですね...流れとしては、Crrl＋Eでグループを統合してAlt＋[ で下のレイヤーに移動して、Ctrl＋Eで統合、そしてまた移動を繰り返してます。
んで、統合した各レイヤーを選択してから、レイヤーに基づく新規スライスを行なっています。
その後そのままスライスオプションを表示することで、先ほどスライスしたのが一括で変更できます。

これを覚えるとスライスがわりと効率良く出来ると思います。
ただ、PSDのレイヤーがぐちゃぐちゃだと、レイヤーに基づく新規スライスでは上手くいかない事が多かったりするので、この辺りに気を使ってくれるデザイナーさんだと素敵ですヾ(*´∀｀*)ノ

保存からの一括リネーム

スライスとは違いますが、Photoshopでスライス名をイチイチ付けるのが面倒な場合は、リネームソフト的なのを使った方が手っ取り早い感じです。


連番の場合、PhotoshopのWeb用に保存の出力設定からやっても良いんですが、何か設定が残らなかったりなんだったりで微妙なんですよね...
ちなみにボクが使ってるリネームソフト的なのは、秀丸ファイラーClassicって言うファイラーで、リネームはおまけ機能的なノリですが、ソフト起動してやるより全然楽でかなり重宝してます。
何よりも、タブ表示が便利でXPでお馴染みの上へボタンも付いてるので、標準のままの人はぜひ。
有料ですが、1,260円なので便利さを考えたら安すぎるくらいかな、と。

スライスを使わない画像の差し替え

最後は、スライスを使わないで画像の差し替えを行う方法です。
個人的には、数枚の画像を差し替える場合、スライスツールからWeb用に保存とかするのがダルいので、この方法でやる事が多いです。
PSDにスライスデータが無い場合もそうですし、他のフォルダで作業してる時に別案件でちょっと画像を差し替えるとかって場合、Web用に保存を使うと最後に保存したフォルダが変わって面倒なんですよね。


まずは、差し替え用の画像が有るPSDデータと、差し替えたい画像ファイルを同時に開きます。
この際、環境設定のインターフェイスの﹁タブでドキュメントを開く﹂にチェックが有ると、上手くいかないかと。

そんで、上の方のレイヤーかグループを選択して、Ctrl＋Shift＋Alt＋Eを押します。
そうすると今見えてる状態で、一枚のレイヤーが追加されます。︵表示部分をスタンプ︶

そしたら、そのレイヤーをドラッグアンドドロップで差し替えたい画像の方に持って行き、レイヤーを統合して上書き保存すればOKです。

ざっとこんな感じです。
超絶テクニック！とかって感じじゃないですが、少しでも効率化に繋がる方が居れば幸いです。

最後におまけで、今回のサンプルのPSDです。