CSS Sprite Script

| コメント(0) | トラックバック(0) |
もうネタとしてはかなり賞味期限切れだと思うんですが、
CSSスプライトを簡単に作れるPhotoshopスクリプトっていうのをちょっと前に作ったので公開します。

前にTonttuっていうAirのCSSSprite支援ツールを作ったんですが、
プロジェクトをttdファイルっていう独自のフォーマットでしか保存出来なく、これだとまだまだ不便だなーとずっと思っていたので、いっそpsdのプラグインにしちゃえってことでこんなもの作りました。

http://collamo.jp/cssspritescript/CssSpriteScript.zip

PhotoshopでSprite画像を組み立てて、あとはjsxを実行すればHTMLとCSSを吐き出すようなツールになっています。
スプライトを作ったpsdをそのまま残しておけば良いので、運用で画像差し替えなんかあっても便利に使えるんじゃないかと思います。
以下簡単なHow toです。

READ ME============================
■使用の流れ
1. Photoshopでスプライト画像を組み立てる。
2. スプライト画像を自分で書き出す(ファイル名.gif)
3.ファイル>スクリプト>参照から、このjsxを実行してHTML(CSS込み)を書き出す。

■Sprites画像作成のルール(参照:sample.psd , sample.html)
・HTMLを書き出す際、レイヤーもしくはフォルダを1つの画像と見なすので、使用する画像毎にレイヤー/フォルダ分けしてください。(フォルダは中にいくつレイヤーがあっても、フォルダ1個まとめて1つの画像と見なします)

・またその際、レイヤー名/フォルダ名がcssで書き出す際のID名になるので、きちんと名前を付けてください。
・元になるスプライト画像は、(psdのファイル名).gif であるという想定でcssが書き出されます。

・非表示/背景のレイヤーは無視されます。
・色調調整レイヤーなどの複雑なレイヤー(フィールド全体を覆ってスタイルをかけるようなレイヤー?)を残すと正しく書き出されない場合が多々あるので、非表示にするか画像を統合するようにしてください。

■その他
・デフォルトがgif想定ですが、スクリプトでgifとなってるところをpngとかにも変えることができます。
=====================================

トラックバック(0)

トラックバックURL: http://collamo.jp/mt/mt-tb.cgi/83

コメントする

About

  • Name : collamo
  • Work : WebDevelop, WebDesign, FlashDevelop, Illustration(趣味)
  • Place : Tokyo
  •  
  • Mail : info@collamo.jp