2012-02-21 16 views
24

Mam wiele obrazów sprite, które zawierają dziesiątki ikon. Czy istnieje prosty sposób na automatyczne przekształcenie sprite'ów w osobne pliki obrazów lub podanie współrzędnych, szerokości i wysokości?Łatwe narzędzie do rozkładania obrazu ikonki?

+0

Dobre pytanie, ja zawsze ten problem, skrzaty podjąć wieku. – Adamantus

Odpowiedz

6

pomocą narzędzia plaster w Photoshopie:

  1. Użyj slice select tool (zwróć uwagę na wybrać część tego, patrz ilustracja).
  2. Kliknij prawym przyciskiem myszy w dowolnym miejscu na obszarze roboczym i wybierz z rozwijanego menu Divide Slice....
  3. Wprowadź wielokrotność wysokości/szerokości lub spiczania.
  4. Po zakończeniu przejdź do strony save for web and devices...
  5. Po zapisaniu spowoduje to wyeksportowanie wszystkich poszczególnych wycięć do wybranego formatu pliku w oddzielnym folderze.

Jeśli mają one nierówny rozmiar (nie na siatce), można również wybrać je pojedynczo za pomocą waniliowego narzędzia "wybór plasterków". Jeśli masz dużo podobnych siatek, zapisz wszystko jako akcję w Photoshopie i przetwórz je.

slice **select** tool

+2

Chodziło o rozkładanie obrazu ikonki na pojedyncze obrazy. Nie mam nic wspólnego z duszkami CSS. – Abadaba

+3

jest to bardzo czasochłonne, odpowiedź BYS2 jest najlepszym sposobem na zrobienie tego. – xorinzor

5

dać to jak spróbować, jak to będzie podzielić ją na poszczególne rzędy: http://imagesplitter.net

+5

Ale to zakłada, że ​​każdy rząd ma taką samą wysokość, a obrazy mogą zajmować przestrzeń różnicy. – Abadaba

13

Ten program jest bardzo dobry w rozkładających duszków do poszczególnych klatek

http://www.alferdspritesheetunpacker.forkandbeard.co.uk/forkandBeard/apps/AlferdSpritesheetUnpacker/Download.aspx

obsługuje wszystkie standardowe formaty bitmapowe,. png, .bmp, .gif, .tiff i robi wszystko prawie automatycznie.

+1

kiedy przeciągam ikonkę na aplikację, a następnie klikam eksportuj zaznaczone, to zawiesza się ... – Abadaba

+2

@abadaba, oh naprawdę? Wydaje się, że działa to dobrze dla mnie: S .. masz kopię swojego sprite'a, którą mogę pobrać z internetu? Próbowałem tego na własną rękę i wygląda na to, że działa idealnie – BYS2

+1

Ok ... to było po prostu niesamowite. Działa doskonale. Nie spodziewałem się, że zrobi dla mnie CAŁĄ pracę. Dzięki za tonę! – Arbel

6

I napotkał podobny problem po utracie obrazy źródłowe ikonki i zbudował ten stosunkowo proste narzędzie: https://github.com/fmovlex/desprite

nadzieję, że to pomaga.

+0

Pamiętaj, że działa to tylko wtedy, gdy masz plik CSS zawierający szerokość/wysokość i położenie tła poszczególnych zdjęć, gdy masz tylko obraz ikonkowy ta opcja nie pomoże – xorinzor

3

Ten pracował dobrze dla mnie, aby wyodrębnić obrazy z jquery duszków ui http://renderhjs.net/shoebox/

+0

Awesome! Dzięki za heads-up na tej aplikacji, działało idealnie. –

-1

Tworzenie png:

używam spritepad do tworzenia obrazu PNG, po prostu przeciągnij i upuść obrazy, aby utworzyć sprite: http://spritepad.wearekiss.com/ (ale jak przypuszczam, nie chcesz tego kroku).

CSS:

Po tym zaimportować obraz do spritecow i uzyskać CSS dla każdego obrazu (dwukrotnie kliknij każdy obraz, aby uzyskać jego wysokość szerokość i współrzędne): http://www.spritecow.com/

You mógł używać tylko spritepada, ale wolę go używać tylko do stworzenia sprite'a. Dla css, spritecow wydaje mi się łatwiejszy. W każdym razie to zależy od ciebie.

Powiązane problemy