STEP 1 新規作成

スライスとは、1つの画像から、必要な画像を切り取り、保存する作業です。Webデザインの見た目を先に作成し、確認してからWebサイトの作成を行うときに利用します。

[ファイル]−[新規]で、新規ファイルを作成します。サイズなどは作成するデザインにあわせます。例では幅　320px　高さ240pxとしました。Web素材の解像度は72です。

ベースになる画像をコピー、ペーストで取り込むか、描画します。

STEP 2　シェイプを作成

ボタンのベースになるシェイプを作る作業を行います。グリッドを引くために、まず画像の上と左に定規を表示します。
定規の上からドラッグすると、グリッドを表示します。

例では、高さ100px　幅150pxのボタンを縦に4つ作るので、縦のライン、100、200、300、400にグリッドを引き、横のライン、150に左からグリッドを引いています。

画像を拡大表示し、グリッドに沿って正確に長方形ツールでドラッグし、長方形を描きます。左上から右下にドラッグしますが、やりにくいようであれば、右下から左上にドラッグしても同じ結果になります。

STEP 3 シェイプの複製と整列

レイヤーウインドウに、先ほど作成したシェイプがあります。レイヤーウインドウが青い状態が選択された状態です。作成したシェイプを選択し、レイヤーウインドウの不透明度の設定を70%にします。

次に長方形のシェイプをレイヤーウインドウでコピーして増やします。コピーの方法は「写真で作るアイコン」を参考に行います。

長方形のシェイプの一つを選択し、移動ツールで4つ目のグリッド（↓）へドラッグし、区切ったエリアへ移動します。1つだけ移動させて、上の画像のようになったら、レイヤーウインドウを参考にアクティブレイヤーとのリンクを設定します。

レイヤーウインドウの目のアイコンの横の、○の部分をクリックすると、アクティブレイヤーとのリンクが有効になり、鎖のアイコンが表示されます。

リンクされた状態で、シェイプを整列します。移動ツールで○の部分をクリックし、均等に分布と整列をします。

STEP 4 テキストレイヤーを追加

続けてテキストを入力する作業を行います。テキストツールを選択し、例では色を#300000に設定しています。

テキストレイヤーも不透明度を35〜40%程度にして、背景画像が少し透ける程度に調整します。

適当な位置にテキストを配置し、その後シェイプと同じように整列させます。

STEP 5 スライスを作成

スライスを作成する作業を行います。シェイプのうちの一つを選択し、[レイヤー]-[レイヤーに基づく新規スライス]をクリックします。レイヤーに番号が振られて、スライスが作成されました。スライスを設定したレイヤーは、左上に青くスライス名が表示されます。

他のシェイプも同様の作業を繰り返し、4つともスライスを作成します。

STEP 6 Web用に保存

すべてのスライスを書き出す作業を行います。[ファイル]-[Web用に保存]をクリックします。

Web用に保存のダイアログが開きます。画像に合わせてファイル形式を設定し、保存をクリックします。

保存時設定のスライスの項目で、すべてのスライスを選択します。

STEP 7 完成

指定したディレクトリに、4つのメニューボタンと、自動で生成された2つの画像パーツがスライスされます。

これでボタン素材の完成です。