Inkscape 手動でCSS Sprite画像を作成

CSS Sprite Generatorなどのweb serviceを利用すれば、

画像　＆　CSS

を自動で吐き出してくれるけど、

ここではInkscapeで手動で作成するときの方法を書いてみます。

他の画像処理ソフトを使っても同様のことができるかもしれません。

また、作成する例は同じ大きさのアイコンを利用しています。

ver. Inkscape 0.48

使用する機能

まずは、使いたい画像をInkscapeのキャンバス内にドラッグ＆ドロップします。

埋め込むかどうかを選択するダイアログが現れるので画像を埋め込みます。

リンクでもOKですが、ファイルを動かしたときにリンク切れになるおそれが有ります。

行と列ツールで画像を整列させます。
[オブジェクト]　→　[行と列]

このとき、並べたい順番があれば、適当に画像を並べたい順番に配置します。

一番上の行と列の設定で、それぞれの並べる個数を設定します。

最下部の数字の調整で、行間と列間の値が設定できます。

ここでは、3×3で行と列の間隔を2pxに設定しています。

選択ツールで整列したい画像を全て選択して、

整列ボタンを押下すれば完了です。

2×5に設定すると下のようになります。

整列された画像をグループ化(Ctrl + G or [オブジェクト]→[グループ化])しておきます。

このオブジェクトを選択した状態で、ビットマップにエクスポートします。
（[ファイル]　→　[ビットマップにエクスポート]）

エクスポート領域が【選択】になっていることを確認。

参照ボタンを押下して、ファイル名を決定する。

エクスポートボタンを押下すれば完成。

作成されるのはPNG画像です。