スライスの作成と書き出し - Photoshop
Photoshopでスライスの作成とスライスの書き出し手順について紹介します。
事前準備
下図の画像を作成します。9つの□の画像のスライスを作成し、それぞれの画像を書き出します。
画像は□のレイヤーと数字のテキストレイヤーで1つのレイヤーグループになっています。9つのレイヤーグループがキャンバスに配置されています。
スライスの作成手順
ウィンドウ左側のツールパレットから[スライスツール]を選択します。
スライスを作成しやすくするため、[表示]メニューの[スナップ]をクリックしてチェックをつけます。
キャンバス上をドラッグして、スライスを作成します。[1]の画像領域のスライスを作成します。
[1]の領域のスライスが作成できました。
同様のドラッグ操作をして、[2][3]の画像部分のスライスを作成します。
同様の操作で9つのスライスを作成します。
以上でスライスの作成は完了です。
スライスの書き出し
作成したスライスの画像を書き出します。[ファイル]メニューの[書き出し]の[Web 用に保存(従来)]の項目をクリックします。
[Web 用に保存]ダイアログが表示されます。ダイアログ下部の[保存]ボタンをクリックします。
保存フォルダを指定して保存します。
保存ディレクトリを開きます。imagesフォルダが作成されていますので、フォルダを開きます。
スライスのそれぞれの領域の画像が保存されています。レイヤーやレイヤーグループに拡張子のついたレイヤーのみ画像出力されるため、スライスの書き出しのように余白部分は画像で出力されません。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。