CSSスプライトを作成するツール？[閉まっている]

cssスプライトを作成するための優れたツールはありますか？

理想的には、画像のディレクトリとそれらの画像を参照する既存の.cssファイルを与え、すべての小さな画像で最適化された大きな画像を作成し、それらの画像を参照するように.cssファイルを変更したいと思います。

少なくとも、画像のディレクトリを取得して、大きなスプライトと、それぞれを背景として使用するために必要な.cssを生成する必要があります。

これを行うための優れたphotoshopプラグインまたは完全に機能するアプリはありますか？

これで作業の90％が実行されます：CSSスプライトジェネレーター。ルールを自分で編集する必要がありますが、ツールは新しいCSSファイルに必要なコードフラグメントを提供します。

インスタントスプライトは、ブラウザ内のCSSスプライトジェネレーターです。それは本当に速いですが、他のいくつかの機能ほど多くの機能はありません。JavaScript FileReaderとHTML Canvasを使用してアップロードせずにWebブラウザー内でスプライトを生成するため、現在はFirefoxまたはChromeでのみ機能します。

現在、Steve SoudersによるSprite Meがいます。試してみると、かなりうまくいくようです。

こちらがリンクhttp://spriteme.org/であり、こちらがそれを発表したブログ投稿です。

http://www.stevesouders.com/blog/2009/09/14/spriteme/

これは有望に見えます：

http://csssprites.org/

また、私はこの記事にいくつかの有用な情報があり、読者のコメントでさえ読む価値があります。

また、どうやらグーグルウェブツールキットには何かがある-それであなたがそれを使っているならそれをチェックする価値があるかもしれない。

これを試して：

http://spritepad.wearekiss.com/

ZeroSpritesは、VLSIフロアプランアルゴリズムを使用してエリアの最小化を目的としたCSSスプライトジェネレーターです。

500Kのアップロード制限が面倒かもしれないという非常に速いこの1つを発見しました。ソースコードはこちらから入手できます

Tonttu は、強力なCSSスプライト画像を作成するための簡単なインターフェイスを提供するAdobe AIRベースのアプリケーションです。FiledWidthおよびFieldHeightを指定するか、画像を並べ替えることができます。
TonttuデスクトップツールでCSSスプライト画像を作成する

コアASP.NETフレームワークになるかどうかはまだわかりませんが、cssspritesのMicrosoft codeplexプロジェクトを次に示します。

http://aspnet.codeplex.com/releases/view/50869

気に入った場合は、それを使用してください。またはアイデアと同じように、コメントを追加してください。これは、ASP.NETフレームワークに組み込むには素晴らしいことだと思います。個人的には使用していません（自分でホイールを発明しなければなりませんでした）が、良いレビューを得ています。

次のコンポーネントが含まれます。

• スプライトとインライン画像を自動生成するAPI
• APIを呼び出す便利な方法を提供するコントロールとヘルパー

2番目のリリースで追加された機能：

• WebフォームのCSSリンクコントロール（ユーザーのブラウザーに適切なCSSファイルを選択しますが、画像は表示しません）
• App_Sprites以外のカスタムフォルダーパスの使用
• スプライト画像のタイリング方向を変更する
• 生成されたCSSをユーザー自身のCSSとマージする

将来のリリースで検討中の機能：

• 最も効率的なスプライトの背景色を自動的に選択する
• レンダリングされたCSSを自動的に縮小する
• .NET 3.5に対するコンパイル

http://sprites.scherpontwikkeling.nl/を使用するだけで、WebサイトのURLからスプライトを生成できます。Webサイトの開発後にスプライトを統合できます。使い方はとても簡単です;）

直接的な回答ではありませんが、私の開発者やWebインテグレータの皆さんには、各スプライトを2の累乗に単純に揃えることを検討してください。たとえば、16ピクセルまたは32ピクセルのグリッド。CSSファイルのオフセットの計算がはるかに簡単になります。gifdとpng形式はそれを非常によく圧縮するので、間のすべての空白は問題ではありません。

Compass CSS Frameworkには自動スプライト生成があります。

Javaが好きなら、「ImageBundle」と呼ばれるものが付属しているGWT 1.5以降を使用できます。GWTコンパイラーは、すべての厄介な詳細を処理します。JavaScriptの1行をコーディングしたり、CSSを記述したりする必要もありません。

これは、Photoshopスクリプトを介して画像をCSSスプライトに結合するスクリプトです。あなたが要求したようにそれはスプライトマップをしませんが、それらが同じサイズであるなら、それは2の倍数（2、4、8）で画像を結合します。1つのファイルにすべての画像を含めるよりも、類似した画像（通常、ホバー、選択済み、選択済みの親）を組み合わせる方が好きです。

RailsでRubyを使用している場合は、CSSスプライトを生成するためのライブラリを簡単にインストールできます。

http://github.com/aberant/spittle

ActiveSpritesと呼ばれる新しいツールがあり、active_assets gemの一部です。

Github：http : //bitly.com/eRTwU4

ruby dslを使用してスプライトを定義し、「レイクスプライト」を実行すると、スプライトと対応するスタイルシートが生成されます。

ラドだ！

ここにいくつかのサンプルコードがあります、

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end

https://github.com/northpoint/SpeedySprite

このツールは、リクエストされた画像をその場でhttpサービスとして組み立てるという点で、斬新なアプローチを採用しています。これにより、プロセス全体がかなりシンプルになります（前処理は不要で、いつでも画像を変更できます）。サービスを開始して、HTMLで必要な画像を参照します。

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

動的であるため、サムネイルページなどの動的な画像セットからスプライトを作成することもできます。ただし、JPEGはサポートされていませんが、PNGおよびGIFは正常に機能します。

Sprite Master Webを使用することをお勧めします。スプライトシートを自動的に生成し、CSSコードをエクスポートします。それは常に高度なアルゴリズムで最小のスプライトシートを生成しようとします。

ここにスクリーンショットとYouTubeのビデオがあります

これらのツールはどれも私の要件を満たしていなかったため、Mark Tylersの小さな画像ライブラリmtpixel（現在はmtcelleditの一部）を使用するツールを作成しました）、回転、シャープ、量子化、ポスタライズ、反転（垂直および水平）、変換、rgb-> indexed、indexed-> rgb、エッジ検出、エンボス、ポリゴンの描画、テキストなど。

必要なのは、画像のセットをargs（png、gif、jpegをサポート）として渡し、sprite.pngと呼ばれるrgb pngと、有用な画像スライスデータをstdoutに出力することです。私はそれをbashスクリプトで使用して、イメージのディレクトリ全体を分割し、スライスデータを出力してcssを自動生成します（最終的には、既存のimgタグを少しクリエイティブなsed / awkで自動的に置き換えることができるようになることを期待しています）

puppy linuxのバイナリパッケージは次のとおりです。

http://murga-linux.com/puppy/viewtopic.php?t=82009

私のユースケースでは、画像を垂直方向に新しいpngに接合するだけでよいので、それだけですが、私のソースコードはパブリックドメインであり、mtcelleditライブラリはgpl3です。mtpixelが静的にリンクされている場合、バイナリは<100kb（動的にリンクされた場合は数kb）であり、その他の依存関係はlibpng、libjpeg、libgif（および公式のmtpixelのfreetypeのみ）ですが、テキストサポートは必要なかったため、静的ビルドのfreetypeビットをコメント化しました）

自分のニーズに合わせて自由に変更してください：

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}

.netを使用している場合は、http: //www.RequestReduce.comを確認してください。スプライトファイルを自動的に作成するだけでなく、すべてのCSSをマージおよび縮小するとともに、HttpModuleを介して動的に作成します。また、量子化と可逆圧縮を使用してスプライト画像を最適化し、ETagsとExpiresヘッダーを使用して生成されたファイルの提供を処理して、最適なブラウザーキャッシュを確保します。セットアップは、単純なweb.configの変更を含む単純なものです。Microsoft Visual StudioおよびMSDNサンプルギャラリーでの採用については、私のブログ投稿を参照してください。

私は最近このツールを見つけました：SpriteRight http://spriterightapp.com/

SpriteRightは、Mac用のCSSスプライトシートジェネレーターで、既存の画像やスタイルシートをインポートできます。サイトの読み込みを高速化し、帯域幅のコストを削減して時間を節約します。SpriteRightは、オンザフライでCSSコードを生成します。