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?
css
css-sprites
web-performance
Simon_Weaver
źródło
źródło
Odpowiedzi:
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.
źródło
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.
źródło
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/
źródło
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ć.
źródło
Spróbuj tego:
http://spritepad.wearekiss.com/
źródło
ZeroSprites to generator sprite'ów CSS, którego celem jest minimalizacja obszaru przy użyciu algorytmów planowania pięter VLSI.
źródło
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
źródło
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
źródło
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:
Funkcje dodane w drugiej wersji:
Funkcje rozważane w przyszłych wersjach:
źródło
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;)
źródło
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.
źródło
Compass CSS Framework posiada automatyczne generowanie sprite'ów .
źródło
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.
źródło
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.
źródło
Jeśli używasz ruby on rails, istnieje łatwa do zainstalowania biblioteka do generowania sprite'ów css.
http://github.com/aberant/spittle
źródło
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,
źródło
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:
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.
źródło
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
źródło
Ż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:
źródło
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.
źródło
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.
źródło