Photoshop スライス機能の基礎

スライスとは？

Webサイトを制作する時の必須作業とも言える「スライス作業」。

Webデザイナーさんがページ全体のデザインをして、次にコーディングをする人がボタンやアイコンといったパーツを切り出していく、そのときに使うのが「スライス」機能です。

FireworksやIllustratorにもスライス機能がついていますが、ここではPhotoshopのスライス機能の使い方をまとめてみます。

作業環境はPhotoshop CS5（Windows版）です

フォトショップのサイドバーにある、「スライスツール」を選択して、スライスしたい部分をドラッグします。

スライスできました！

スライスした部分をダブルクリックすると、スライスオプションが表示されます。

該当のスライスを選択している状態でないとダブルクリックがききません。スライスツール選択時は、Ctrlキーを押しながらダブルクリックをするか、「スライス選択ツール」を選んでから該当のスライスをダブルクリックしてみてください。

名前の部分に入力されている文字列が、画像を書き出した時にその画像のファイル名となります。

スライスサイズの微調整もここでできるので便利です。

いちいちドラッグするのが面倒！という人にオススメな機能がこちら。

スライスしたいレイヤーを選択してから、
[レイヤー]→[レイヤーに基づく新規スライス]
を選択すると、そのパーツぴったりにレイヤーが作成されます。

ショートカットを割り当てておくと、さくさくスライスが作れます。

そのパーツの大きさを変更すると、スライスの大きさも一緒に変更されるのでとっても便利な機能なんですが、スライスオプションを表示させてもスライスのサイズが変更できません。

入力項目がグレーアウトされてしまっていて数値が変更できません。

スライスのサイズを変更したい！という場合は、スライスツールを選択した状態で、該当のスライスの上で右クリックをします。

ここで、「ユーザー定義スライスに変更」をクリックすると、スライスのサイズが自由に変更できるようになります。

スライスの使い方をマスターすると、作業効率が格段にアップします。
ショートカットを駆使しつつ、快適なスライスライフを！

このライフレシピへの質問や感想がある場合は、Facebookを使って以下から投稿してください！

このライフレシピを評価してください