photoshopでWeb画像の切り出しとCSSの生成

～～～～photoshopでWeb画像の切り出しとCSSの生成～～～～

PhotoshopでHTML・CSSで使用する画像の切り出しと、
HTML・CSSソースの生成まで行う機能があります。
大変便利なんで書いてみたいと思います。

①たとえば１枚の画像があったとします。
その画像を「スライス」ツールで３つに分割します。
②もし、分割した画像にリンクやaltを記述したい場合は「スライスオプション」で指定します。
③次にHTML・CSS・画像の書き出し設定です「Webおよびデバイス用に保存」を選択し、
「プリセット」の「最適化メニュー」から「出力設定の編集」の「出力設定」の２番目の項目から「スライス」を選択、「スライス出力の設定」から「CSS」を選択、出力設定の「OK」
④Webおよびデバイス用に保存の「保存」でHTML・CSS・画像と出力されます。

＊Photoshop大変便利です。画像の切り出しなんて「ナゾル」と出来ます。
パノラマやなんかも自動生成しますし凄いです。