Adobe「Photoshop CS3」の利用方法 【手順5.スライスの作成】

1.これから行うこと  2.スライスの作成方法

1.これから行うこと

スライスの作成を行い、1つのPSDファイルから9つのWEB用の画像に出力します。
  

2.スライスの作成方法

1.スライスする画像の範囲指定の補助となるガイドを設置します。
  ガイドをまでの画像の境界線となる部分にガイドを設置。
  の画像の場合には以下の赤い破線が境界部分になりますので、赤い破線のところへガイドを設置します。
  (横のラインは既にガイドが設置してありますので不要です。またPSDファイルの端にあたる四辺もガイドは不要です)
  

  注>の画像に関しては右上にHTML上でテキストを入力しますので、それを考慮してガイドを設置します。
  

  以下は全てのガイドを設置した状態です。
  
  Tips! ガイドが微妙にずれる】
  ガイドがうまく設置できない場合には、スナップを解除してからガイドを設置します。
  (その際、ピクセルがわかるぐらいに画面を拡大すると正確性がまします)

2.ガイドを設置後、スライスを作成します。
  (1)ツールパレットから「スライスツール」を選択し、スライスしたい範囲を対角線にドラッグ。
    (選択範囲を作成する要領と同じ)

  注)ガイドに沿ってスライスを作成するときには、スナップを有効にしておきます。
  

  作成したスライスのサイズや位置を調整する場合には、「スライス選択ツール」を使用します。
  ・「スライスツール」を長押し>「スライス選択ツール」
  

  以下は全てのスライスを作成、サイズ等を調整した状態です。
  

  最後に作成したスライスを書き出します。スライスの書き出しはこちら