PRESSMAN*Tech

HTML5, CSS3からWordPress, AWS, Docker, Node.jsまで。プレスマンのスタッフが綴る技術ブログ。

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]
投稿者:taichi

taichi の紹介

何でもやりますが、一応プログラマです。
このエントリーをはてなブックマークに追加

私たちと一緒に働きませんか?

株式会社プレスマンでは、ディレクションが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

プレスマンの採用情報を見る →

コメントは受け付けていません。

▲ 先頭へ戻る