PRESSMAN*Tech(プレスマンテック)

東日本橋の制作・開発会社 プレスマンのスタッフブログ

ImageMagickでCSS Sprite用の画像を作る。

フリーのアイコンを使ってWebサイトを作るとします。感謝しながらアイコンを使っていますが、残念ながら、一つ一つ画像が分かれている場合もあります。別にそのまま使えばいいのですが、サーバーの負荷やクライアント側での速度を考えるとCSSスプライトでやりたいですよね。

自分はプログラマーですし、PCにフォトショップなんて入っていませんし、大体、たくさんのアイコンを一つの画像になんてめんどくさくてやってられないです。当然、デザイナーの方も嫌でしょう。やることはアイコンを並べるだけで単純かつ繰り返しなので、こういう作業こそプログラマーの出番ですよね。
そこで、ImageMagickを使って アイコンを結合します。以下の様なコマンドをコマンドプロンプトやbatファイルで実行して、appendしていけば画像の右にどんどん追加されていきます。[0]がついていますが、つけなくてもいいです。これがついていると元画像がアニメーションgifだった場合に1枚目の画像をappendするようになります。


“C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe” +append icon1.gif[0] cloud.gif[0] iconList.gif[0]
“C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe” +append iconList.gif[0] icon2.gif[0] iconList.gif[0]
“C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe” +append iconList.gif[0] icon3.gif[0] iconList.gif[0]
“C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe” +append iconList.gif[0] icon4.gif[0] iconList.gif[0]
“C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe” +append iconList.gif[0] icon5.gif[0] iconList.gif[0]
“C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe” +append iconList.gif[0] icon6.gif[0] iconList.gif[0]
“C:\Program Files\ImageMagick-6.7.6-Q16\convert.exe” +append iconList.gif[0] icon7.gif[0] iconList.gif[0]
この記事をシェアする:
投稿者:技術担当
技術担当

技術担当 の紹介

何でもやりますが、一応プログラマです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲ 先頭へ戻る