吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【Photoshop拡張機能】CSSスプライト用の画像を生成する

2013年5月21日 / category : jsx

Photoshopの拡張パネル「CSSSpritePanel」を作成しました。
CSSスプライト用の画像の生成と、必要なhtmlコードとcssコードも同時に書き出します。

【使い方】
1.CSSSpritePanelフォルダを下記のフォルダに追加する。
windowsの場合(CS6)
→ Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Plug-ins/Panels
macの場合(CS6)
→ Applications/Adobe Photoshop CS6/Plug-ins/Panels

2.PhotoshopCS6を起動する。
3.「ウィンドウ」→「エクステンション」→「CSSSpritePanel」を選択、CSSSpritePanelパネルが開く

4.PSDファイルを開き、アイコンごとに1つのレイヤーにし、同じドキュメントサイズ内で位置を揃える。
サンプルpsdデータを用意しました。
Download

5.パネル内の「margin」数値入力箇所でpxを指定し、アイコンのマージンを設定し、「コードを取得する」ボタンをクリックする。

6.パネル内の「html」テキストエリアに書き出されたコードを、該当htmlファイル箇所にコピーペースト。

7.パネル内の「css」テキストエリアに書き出されたコードを、該当htmlファイル箇所にコピーペースト。

8.生成された画像をweb用に保存し、htmlファイルの指定している「background」のパスを合わせる。
li a {
background: url(“images/sample.png”) top left no-repeat;
display: block;
padding:0 0 0 50px;
height: 50px;
}

9.該当ファイルをブラウザで開いて確認する。

【Download】
http://tsudoi.org/photoshop/Plug-ins/Panels/CSSSpritePanel.zip

【備考】
CS6での検証しかしておりません。使用中に不具合などがあれば、ご連絡ください。
mail : tsudoi@aru-inc.co.jp