スプライト画像を作るのって意外と面倒ですよね。たくさんのアイコン画像を並べて、そのピクセル位置を測りながらスタイルシートに設定していくのはとても根気のいる作業です。それで指定がミスっていたら目も当てられません。 そこで使ってみたいのがStitchesです。アイコン画像をアップロードするだけで一気にスプライト設定を生成してくれます。

Stitchesの使い方

こちらがデモです。これは6つの画像をアップロードした後です。

ダウンロードを押すと、結合した画像がダウンロードできます。

こちらはHTML設定。元の画像ファイル名が使われるのでそれっぽい名前にしておくのが良さそうです。

スタイルシート設定。

画像の配置については自動的に決まるようです。スプライトにしたいアイコン画像を一気にまとめて指定すれば、自動的に切り出す設定を追加してくれます。スプライト画像をアップデートする時も、生成されるスタイルシート自体をまるっと差し替えてしまえば良さそうです。

StitchesはHTML5製で、クライアントサイドだけでスプライト生成処理を行っているのが特徴です。

StitchesはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Stitches - An HTML5 sprite sheet generator draeton/stitches