Narzędzia do tworzenia sprite'ów CSS? [Zamknięte]

Czy są jakieś dobre narzędzia do tworzenia sprite'ów CSS?

IDEALNIE chciałbym dać mu katalog obrazów i istniejący plik .css, który odwołuje się do tych obrazów, i poprosić go o utworzenie dużego obrazu zoptymalizowanego ze wszystkimi małymi obrazkami ORAZ zmienić mój plik .css, aby odnosił się do tych obrazów.

Przynajmniej chciałbym, żeby pobierał katalog obrazów i generował dużego duszka i pliki .css niezbędne do użycia każdego z nich jako tła.

Czy są jakieś dobre wtyczki do Photoshopa lub w pełni rozwinięte aplikacje do tego?

To wykona 90% pracy za Ciebie: CSS Sprite Generator . Nadal będziesz musiał samodzielnie edytować reguły, ale narzędzie dostarczy Ci fragmenty kodu potrzebne do nowego pliku CSS.

Instant Sprite jest generatorem sprite'ów CSS w przeglądarce, nad którym pracuję. Jest naprawdę szybki, ale nie ma tak wielu funkcji, jak niektóre inne. Obecnie działa tylko w przeglądarce Firefox lub Chrome, ponieważ używa JavaScript FileReader i HTML Canvas do generowania sprite'ów w przeglądarce internetowej bez przesyłania.

Jest teraz Sprite Me autorstwa Steve Souders. Po prostu go wypróbowuję i wydaje się, że działa całkiem nieźle.

Oto link http://spriteme.org/, a tutaj ogłaszający to wpis na blogu.

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

To wygląda obiecująco:

http://csssprites.org/

Znalazłem również ten artykuł, który zawiera przydatne informacje, a nawet komentarze czytelników warte przeczytania.

Najwyraźniej także zestaw narzędzi internetowych Google ma coś - więc jeśli go używasz, może warto to sprawdzić.

Spróbuj tego:

http://spritepad.wearekiss.com/

ZeroSprites to generator sprite'ów CSS, którego celem jest minimalizacja obszaru przy użyciu algorytmów planowania pięter VLSI.

okazało się, że ten jest dość szybki, chociaż limit wysyłania 500K może być uciążliwy. kod źródłowy jest dostępny tutaj

Tonttu to aplikacja oparta na Adobe AIR, która zapewnia łatwy interfejs do tworzenia potężnych obrazów CSS Sprites. Możesz określić FiledWidth i FieldHeight lub posortować obrazy.
Twórz obrazy sprite CSS za pomocą narzędzia Tonttu Desktop Tool

Nie jest jeszcze jasne, czy trafi do rdzenia platformy ASP.NET, ale oto projekt Microsoft Codeplex dla csssprites:

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

jeśli ci się podoba - wykorzystaj - lub po prostu podoba ci się pomysł, dodaj komentarz. Myślę, że byłoby to świetne rozwiązanie we frameworku ASP.NET. Nie używałem go osobiście (sam musiałem wymyślić koło), ale ma dobre recenzje.

Obejmuje następujące elementy:

• API do automatycznego generowania sprite'ów i obrazów w treści
• Kontrolki i pomoce, które zapewniają wygodny sposób wywoływania interfejsu API

Funkcje dodane w drugiej wersji:

• Kontrolka łączenia CSS dla formularzy sieci Web (wybiera właściwy plik CSS dla przeglądarki użytkownika, ale nie wyświetla obrazu)
• Używanie niestandardowych ścieżek folderów innych niż App_Sprites
• Zmiana kierunku kafelkowania obrazków sprite
• Scalanie wygenerowanego CSS z własnym CSS użytkownika

Funkcje rozważane w przyszłych wersjach:

• Automatyczny wybór najbardziej wydajnego koloru tła duszka
• Automatyczna kompresja renderowanego CSS
• Kompilowanie względem .NET 3.5

Po prostu użyj http://sprites.scherpontwikkeling.nl/ , może on również generować sprite'y z adresów URL witryny ... możesz zintegrować swoje sprite'y po opracowaniu witryny. Jest bardzo łatwy w użyciu;)

Nie jest to bezpośrednia odpowiedź, ale dla moich kolegów programistów i integratorów internetowych, rozważ po prostu dopasowanie każdego duszka do potęgi dwóch; np. siatka 16 lub 32 pikseli. To znacznie ułatwia obliczanie przesunięć w pliku CSS. Wszystkie odstępy między nimi nie mają znaczenia, ponieważ formaty gifd i png kompresują się tak dobrze.

Compass CSS Framework posiada automatyczne generowanie sprite'ów .

Jeśli lubisz Javę, możesz użyć GWT 1.5+, który zawiera coś o nazwie „ ImageBundle ”. Kompilator GWT zajmie się wszystkimi nieprzyjemnymi szczegółami za Ciebie. Nie będziesz musiał nawet kodować ani jednej linii kodu JavaScript ani pisać żadnego kodu CSS.

Oto skrypt, który łączy obrazy za pomocą skryptu programu Photoshop w sprite'y CSS . Nie zrobi mapy sprite, jak prosiłeś, ale połączy obrazy w wielokrotności dwóch (2, 4, 8), jeśli mają ten sam rozmiar. Wolę łączyć podobne obrazy (normalne, po najechaniu, zaznaczone, nadrzędne lub wybrane) niż wszystkie obrazy w jednym pliku.

Jeśli używasz ruby ​​on rails, istnieje łatwa do zainstalowania biblioteka do generowania sprite'ów css.

http://github.com/aberant/spittle

Istnieje nowe narzędzie o nazwie ActiveSprites, część klejnotu active_assets.

Github: http://bitly.com/eRTwU4

Używasz ruby ​​dsl do definiowania swoich duszków, a następnie wykonujesz „rake sprite'y”, a duszki i odpowiadające im arkusze stylów są generowane.

To super!

Oto przykładowy kod,

# 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

To narzędzie ma nowatorskie podejście, ponieważ tworzy żądane obrazy w locie jako usługa http. To sprawia, że ​​cały proces jest dość prosty (nie jest wymagane wstępne przetwarzanie, zmieniasz obrazy w dowolnym momencie): uruchamiasz usługę, a następnie odwołujesz się do dowolnych obrazów w swoim HTML:

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

Ponieważ jest dynamiczny, możesz nawet tworzyć sprite'y z dynamicznego zestawu obrazów, takiego jak strona miniatur. Nie obsługuje jednak JPEG, ale PNG i GIF działają dobrze.

Sugeruję użycie Sprite Master Web . Generuję arkusze sprite automatycznie i eksportuję kod CSS dla Ciebie. Zawsze stara się wygenerować najmniejsze arkusze sprite'ów za pomocą zaawansowanych algorytmów.

Oto zrzut ekranu i wideo z YouTube

Żadne z tych narzędzi nie spełniało moich wymagań, więc napisałem takie, które wykorzystuje niewielką bibliotekę obrazów Marka Tylersa, mtpixel (obecnie część mtcelledit ) jest ono bardzo rozbudowane, ale można je łatwo rozszerzyć za pomocą wbudowanych funkcji mtpixel, które obejmują: skalę szarości, odwrócenie kolorów , obrót, wyostrzanie, kwantyzacja, posteryzacja, przerzucanie (w pionie i poziomie), transformacja, rgb-> indeksowane, indeksowane-> rgb, wykrywanie krawędzi, wytłaczanie, rysowanie wielokątów, tekst i więcej.

Wszystko, co musisz zrobić, to przekazać mu zestaw obrazów jako argumenty (obsługuje png, gif i jpeg), a wyprowadzi plik rgb png o nazwie sprite.png wraz z przydatnymi danymi dotyczącymi cięcia obrazu na standardowe wyjście. Używam go w skryptach bash, aby spryskać cały katalog obrazów i wyprowadzić dane dotyczące wycinania w celu automatycznego generowania css (z nadzieją, że w końcu uda mi się automatycznie zastąpić istniejące tagi img odrobiną kreatywnego sed / awk)

Pakiety binarne dla szczeniaka linux będą tutaj:

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

Mój przypadek użycia wymagał jedynie łączenia obrazów w pionie w nowy plik png, więc to wszystko, co robi, ale mój kod źródłowy jest własnością publiczną, a biblioteka mtcelledit to gpl3. Z statycznie połączonym mtpixel, plik binarny ma <100kb (tylko kilka kb, gdy jest połączony dynamicznie), a jedynymi innymi zależnościami są libpng, libjpeg i libgif (i freetype z oficjalnym mtpixel, ale nie potrzebowałem obsługi tekstu, więc ja zakomentował bity typu freetype w kompilacji statycznej)

możesz dowolnie modyfikować na własne potrzeby:

#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; 
}

Jeśli używasz .net, odwiedź http://www.RequestReduce.com . Nie tylko automatycznie tworzy plik sprite, ale robi to w locie przez HttpModule wraz z scalaniem i minimalizacją wszystkich CSS. Optymalizuje również obraz sprite za pomocą kwantyzacji i bezstratnej kompresji oraz obsługuje obsługę wygenerowanych plików przy użyciu nagłówków ETags i Expires, aby zapewnić optymalne buforowanie przeglądarki. Konfiguracja jest banalna i wymaga jedynie prostej zmiany pliku web.config. Zobacz mój wpis na blogu dotyczący jego przyjęcia przez galerię Microsoft Visual Studio i MSDN Samples.

niedawno znalazłem to narzędzia: SpriteRight http://spriterightapp.com/

SpriteRight to generator arkuszy sprite'ów CSS dla komputerów Mac, który umożliwia importowanie istniejących obrazów lub arkuszy stylów. Przyspiesz ładowanie witryn, zmniejsz koszty przepustowości i oszczędzaj czas. SpriteRight nawet generuje kod CSS w locie.