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

126

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?

Simon_Weaver
źródło
Czy mógłbyś rozwinąć trochę więcej, czy próbujesz skompilować wszystkie sprite'y na jednym większym obrazie, a następnie użyć css do wyświetlenia części obrazu, która zawiera właściwy duszka. (technika drzwi przesuwnych)
teh_noob
1
czy istnieje sposób na zmianę koloru tła, aby na spritepadzie były widoczne moje białe ikony?
Jim
24
Naprawdę nie rozumiem, dlaczego to zostało zamknięte? Wydaje się, że istnieje wiele przydatnych odpowiedzi. To prawdopodobnie powinno być pytanie superużytkownika, ponieważ nie wspominam o żadnym konkretnym języku programowania, ale podoba mi się odpowiedzi, które otrzymałem, i oczywiście były przydatne dla wielu.
Simon_Weaver,
3
Proszę Boże, nie usuwaj tego pytania, jest to najbardziej pomocna lista w Internecie dotycząca tego problemu i na pewno jest związana z programowaniem (nawet jeśli nie jest to pytanie programistyczne) . To jest zdecydowanie wezwanie do oceny i nie powinno być zamykane na siłę przez mody; po to jest wspólnotowy system zamykania głosów…
BlueRaja - Danny Pflughoeft

Odpowiedzi:

46

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.

Sophie Alpert
źródło
@ben perfect! zakładając, że to
zadziała
1
jestem trochę niezadowolony z tego narzędzia, więc odznaczam je jako wybraną odpowiedź. skończyło się na przycięciu mojego obrazu i nie wyjaśnia zbyt dobrze, dlaczego pozostawia duże luki między obrazami
Simon_Weaver,
Nie podoba mi się to rozwiązanie, chociaż myślę, że działa dobrze. Wydaje się, że SpriteMe działa znacznie lepiej.
Chuck Le Butt
2
Problem z tym narzędziem polega na tym, że obrazy nie są w pełnej jakości.
Jim
50

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.

Brian Grinstead
źródło
1
Wow, co za świetne narzędzie. Dzięki!
Vivian River
Używam twojego narzędzia do pracy na niektórych produkcyjnych witrynach internetowych, odkąd opublikowałeś tutaj. To bardzo proste i łatwe.
Vivian River
7
+1. Twoje narzędzie jest znacznie lepsze niż reszta, której próbowałem.
Ed Bayiates
3
jest to najbardziej intuicyjne z dotychczasowych ... dzięki ... (chociaż powinno zawierać "inteligentny" układ sprite'ów, aby zminimalizować problemy z wydajnością)
kumarharsh
2
Dziękuję wszystkim! @Harsh, zgadzam się co do układu - zacząłem z tym eksperymentować już jakiś czas temu, ale nigdy do końca nie działało: github.com/bgrins/InstantSprite/tree/bin-pack
Brian Grinstead
31

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/

Jauder Ho
źródło
2
+1 Jest to niezwykle łatwe w użyciu: po prostu przejdź do żądanej strony i kliknij bookmarklet SpriteMe ... Automatycznie tworzy obrazy i CSS!
Chuck Le Butt
To fajne narzędzie, ale wymaga pliku ZIP z twoimi obrazami, a kolejność, w jakiej umieszcza twoje sprite'y, to kolejność ZIP. Poniższe narzędzie Briana umożliwia przesyłanie plików oraz przeciąganie i upuszczanie w celu zmiany kolejności.
Ed Bayiates
Podoba mi się, że ma swobodnie dostępny kod źródłowy
lkraav
13

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ć.

Simon_Weaver
źródło
Wygląda na to, że strona już nie działa ...
Bob,
nazwa smartsprites.osinski.name została przemianowana na csssprites.org , więc zredagowałem ją dla Ciebie. Wydaje się, że jest to jedna z niewielu opcji, które można zintegrować z procesem kompilacji, z tego, co tutaj widziałem.
ripper234
9

Spróbuj tego:

http://spritepad.wearekiss.com/

feniks
źródło
Jest to zdecydowanie uzasadnione. Zapisane mapy spritemaps IMHO są kluczem, więc tylko odpowiednie obrazy i wiersze kodu musiałyby zmieniać się w czasie, zamiast przeliczać cały zestaw współrzędnych przy każdej zmianie zawartości obrazu.
lkraav
7

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

liszaj
źródło
6

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

Scott Evernden
źródło
dlaczego przesyłanie 500kb byłoby uciążliwe? prawdopodobnie nigdy nie chciałbym przesyłać plików> 100kb
Simon_Weaver
Powiedziałem, że „może” to być uciążliwe. To trochę zależy od aplikacji, nie? .. Plik zip pełen średniej wielkości PNG, na przykład, na dużej siatce ~ ~ może ~ przebiegać blisko tej liczby. jeśli to wszystkie małe bitmapy, to na pewno / nie ma problemu.
Scott Evernden
1
ya, ale głównym celem sprite'ów css jest zapobieganie ładowaniu wielu małych obrazków wieloma żądaniami. jeśli naprawdę miałeś tyle małych duszków, załadowanie się zajęłoby dużo czasu, w którym to czasie żaden nie byłby wyświetlany. najlepiej je zachować, myślę, że najwyżej 100kb. zawsze możesz zrobić kilka
Simon_Weaver,
dużo pracuję z obrazami. może nie małe bitmapy css. więc może dlatego dałem zastrzeżenie. twoje potrzeby są inne / ok. Na większości łączy szerokopasmowych w ciągu sekundy pojawi się 500kb. jako pierwszy udzieliłem zaakceptowanej odpowiedzi na twoje zapytanie i oto jestem na dole ~ głosowałem i bronię swojego języka? cokolwiek ...
Scott Evernden,
To był dla mnie ból, ponieważ obrazy, od których zacząłem, okazały się pakietem większym niż ten limit, więc musiałem je wyciąć lub zoptymalizować, zanim mogłem ich użyć.
Kzqai,
4

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
Simon_Weaver
źródło
4

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;)

Jan
źródło
3

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
dobra wskazówka, chociaż staram się głównie łączyć nagłówki tekstowe (po 1-2 KB każdy) w jeden plik. Nie martwię się zbytnio o białe miejsca, ponieważ wiem, że zostaną skompresowane - po prostu nie do końca rozumiem, dlaczego narzędzia do tworzenia duszków robią to tak dużo
Simon_Weaver
Jedno zastrzeżenie - podczas gdy białe spacje w obrazie zostaną skompresowane do transportu, są one rozszerzane i zajmują pamięć po załadowaniu przeglądarki. Niewidoczne użycie narzędzi do automatycznego generowania ikonek może prowadzić do powstania ogromnych obrazów, co może spowodować wzrost wykorzystania pamięci na tych stronach. Należy zachować ostrożność podczas grupowania obrazów w arkusze sprite, aby zachować to w rozsądnych granicach.
Sam Foster
Sam: Prawda! Dowiedziałem się o tym później. Jeśli obrazek duszka jest bardzo szeroki lub wysoki, warto to rozważyć! Szczególnie w przypadku aplikacji na telefony komórkowe (mniej pamięci). Simon: biała przestrzeń prawdopodobnie wynika z ograniczeń CSS. Nawet jeśli użyjesz opcji bez powtarzania na tle, obraz sprite'a będzie widoczny przez wypełnienie, wysokość linii i zasadniczo cały obszar tła elementu z wyjątkiem marginesów i obramowań. Załóżmy na przykład, że masz ikonę łącza. Jeśli łącze obejmowałoby wiele linii, mogą się przez nie wyświetlać inne ikony duszka. Dodanie wystarczającej ilości białych znaków sprawia, że ​​jest to bardziej „odporne”.
@Simon_Weaver - W oparciu o opinie wszystkich tutaj, opublikowałem narzędzie sprite, które jest proste stackoverflow.com/a/13281578/1162141
technosaurus
3

Compass CSS Framework posiada automatyczne generowanie sprite'ów .

Salman von Abbas
źródło
2
Jestem oszołomiony ilością ludzi, którzy nie używają Compass do Generowania Sprite. Compass narodził się po to ...
justnorris
2

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.

Aaron Digulla
źródło
2

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.

Stephen James
źródło
2

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
shwoodard
źródło
2

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.

Magnus
źródło
1

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

wprowadź opis obrazu tutaj

bateristt
źródło
Warto zauważyć, że nie jest to aplikacja bezpłatna ani open source, ale ma uczciwą cenę 3,99 USD. Jest dobrze zbudowany i ma dobrą kompresję PNG.
t.mikael.d
Tylko Mac. Szkoda, ten wyglądał obiecująco.
Mahn
1

Ż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; 
}
technozaur
źródło
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.

Matt Wrock
źródło
0

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.

prestarocket
źródło
Warto zauważyć, że nie jest to aplikacja bezpłatna ani open source, ale ma uczciwą cenę 4,99 USD. Jest dobrze zbudowany i ma dobrą kompresję PNG, więcej funkcji niż powyższy „Sprite Master Web”.
t.mikael.d
I to tylko Mac.
Mahn